Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

  • 0
carlos jr

Menu css

Pergunta

Se alguem puder me ajudar, eu fiz um menu, só que ele não funciona, eu queria que quando eu clica-se em uma opção ele funciona-se. ex: eu clico na opção Sonic, queria que ao clicar nessa opção ele mudasse o fundo de uma div e o texto de outra. Será que alguem poderia me ajudar?

Compartilhar este post


Link para o post
Compartilhar em outros sites

10 respostas a esta questão

Recommended Posts

eu to fazendo em html.  não tem como fazer por html ? é um site básico para trabalho de Faculdade. segue o codigo abaixo (sem as CSS).

 

<html>
  <head>
    <meta charset="utf-8"/>
    <title>3 GAMES CLASSICOS</title> 
    <style type="text/css" media="all">@import "corpo.css";</style>
  </head>
   <body>
    <div id="topo"><p class="SuperMarioBros-font">3 GAMES CLASSICOS</p></div>
    <nav id="menu">
        <ul>
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">Super Mario Bros</a>
        </li>
        <li><a href="#">Sonic</a>
        </li>
        <li><a href="#">Pac-Man</a>
        </li>
        <li><a href="#">Sobre</a>
        </li>
        </ul>
    </nav>
    <div id="content">
    <div class="padding">&nbsp;&nbsp;&nbsp;&nbsp;<b>Considerado um clássico, Super Mario Bros. foi um dos primeiros jogos de plataforma com rolagem lateral, 
    recurso conhecido em inglês como side-scrolling. O jogo foi o mais vendido de toda a história dos videogames
    (contando-se aí os jogos vendidos junto com os consoles) com mais de 40 milhões de cópias e foi o 
    principal responsável pelo sucesso inicial do console NES (Famicom, no Japão).<br><br>Desenvolvedora: Nintendo Creative Department<br><br>Data de Lançamento:13 de setembro de 1985</b></div></div><br>
    <div id="header"></div>
    <div id="footer">Copyright 2017 © Carlos Alberto Silverio Junior - Turma BSI 8 - <a href="http://www.fortec.edu.br">FATEF</a></div>
   </body>
</html>

Compartilhar este post


Link para o post
Compartilhar em outros sites
46 minutos atrás, carlos jr disse:

Se alguem puder me ajudar, eu fiz um menu, só que ele não funciona, eu queria que quando eu clica-se em uma opção ele funciona-se. ex: eu clico na opção Sonic, queria que ao clicar nessa opção ele mudasse o fundo de uma div e o texto de outra. Será que alguem poderia me ajudar?

 

Você pode fazer com javascript da seguinte forma:

<script>
function teste(){
               var teste1 = document.getElementById("teste1");
               var teste2 = document.getElementById("teste2");
               teste1.style.background = "black";
               teste2.value= "teste";
            }
</script>

<div onclick="teste()">Sonic</div>

Se não for isso, coloque o seu código aqui.

Compartilhar este post


Link para o post
Compartilhar em outros sites
Em 07/09/2017 at 00:01, luiz14 disse:

 

Você pode fazer com javascript da seguinte forma:


<script>
function teste(){
               var teste1 = document.getElementById("teste1");
               var teste2 = document.getElementById("teste2");
               teste1.style.background = "black";
               teste2.value= "teste";
            }
</script>

<div onclick="teste()">Sonic</div>

Se não for isso, coloque o seu código aqui.

Já coloquei meu código. Ali onde tem o menu eu queria que ao selecionar uma opção mudasse o content (que seria o texto) e que mudasse o header(que seria o plano de fundo dessa div) e quando postar o código puder me dizer onde coloco e se tem alguma css.

Compartilhar este post


Link para o post
Compartilhar em outros sites
27 minutos atrás, gianp disse:

Posta seu código css.

segue o codigo css. programa acima.

body {
    margin: 0;
    padding: 0;
    background: url("Fundo.jpg");
    background-size: cover;
}

#menu ul{
    width: 985px;
    padding:0px;
    margin: 20;
    font-size:20;
    background-color:seagreen;
    list-style:none;
    height: 30px;
}

#menu ul li{
    display: inline;
}

#menu ul li a{
    padding: 2px 10px;
    display: inline-block;
    background-color:seagreen;
    color:white;
    text-decoration: none;
    border-bottom: 3px solid seagreen;
}
 
 #menu ul li a:hover{
    background-color:white;
    color:seagreen;
    border-bottom:3px solid white;
}

#content {
    float: right;
    width: 472px;
    margin: 20;
    font-size:17px;
    text-align:justify;
    color:black;
    font-family:Times new roman;
    border:5px solid seagreen;
    background:white;
    height: 300px;
    margin-top:-20px;
    margin-right:19px;
}
 #content .padding {
    padding: 20px;
    line-height: 20px;
}

#topo{
    width: 985px;
    margin: 20;
    font-family:Mario Bros;
    color:yellow;
    text-shadow: black 0.2em 0.2em 0.3em;
    text-align:center;
    letter-spacing:30px;
    font-size:35px;

    height: 60px;
}

@font-face{
    font-family:"Super Mario Bros.";
    src:url("Super_Mario_bros_/SuperMarioBros.ttf")format("truetype");
}

.SuperMarioBros-font{
    font-family:"Super Mario Bros.";
}

#header {
    width: 400px;
    margin: 20;
    font-size:30;
    background: url("SuperMariobrosClassico.jpg");
    background-size: cover;
    height: 200px;
}
 
#footer {
        position: fixed;
        bottom: 0;
        width: 100%;
        font-weight: bold;
        text-align: center;
        color: lightcyan;
}
#footer a {
    color: lightcyan;
    text-decoration: none;
}

#footer a:hover {
    color:royalblue;
}

Compartilhar este post


Link para o post
Compartilhar em outros sites

No caso seria assim:

 

.menu li a{

    color:#C0C0C0; 
    text-decoration:none; 
    padding:5px 10px; 
    display:block;
    transition: all 1s;
}

.menu li a:hover {

    transition: all 1s;
    box-shadow: inset 0 -1px 0 rgb(31,141,237);
    color: #A9A9A9;
}

Agora, gianp disse:

No caso seria assim:


.menu li a{
    color:#C0C0C0; 
    text-decoration:none; 
    padding:5px 10px; 
    display:block;
    transition: all 1s;
}
.menu li a:hover {
    transition: all 1s;
    box-shadow: inset 0 -1px 0 rgb(31,141,237);
    color: #A9A9A9;
}

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
54 minutos atrás, gianp disse:

No caso seria assim:

 

.menu li a{

    color:#C0C0C0; 
    text-decoration:none; 
    padding:5px 10px; 
    display:block;
    transition: all 1s;
}

.menu li a:hover {

    transition: all 1s;
    box-shadow: inset 0 -1px 0 rgb(31,141,237);
    color: #A9A9A9;
}

 

onde eu coloco isso, e preciso editar alguma coisa no html ? e o que isso faz?

Compartilhar este post


Link para o post
Compartilhar em outros sites
Em 08/09/2017 at 17:24, carlos jr disse:

onde eu coloco isso, e preciso editar alguma coisa no html ? e o que isso faz?

Dentro do <style>

Esse efeito hover, iria adicionar uma linha a baixo do texto (menu) e trocaria a cor da fonte suavemente através do transition: all 1s;

Compartilhar este post


Link para o post
Compartilhar em outros sites
48 minutos atrás, gianp disse:

Dentro do <style>

Esse efeito hover, iria adicionar uma linha a baixo do texto (menu) e trocaria a cor da fonte suavemente através do transition: all 1s;

Valeu pela ajuda, já consegui. obrigado!

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por juliosonic
      Boa noite..
      Estou desenvolvendo um site de https://www.maithunatantra.com.br/ e estou com um duvida sobre o menu de navegação da versão mobile.
      O menu que tem o dropdown "Terapeutas" e "Terapias" quando clico em cima ele expande como deve ser, mas quando clico denovo para recolher os submenus
      nao acontece nada.. segue o trecho do codigo do menu..
      <div class="collapse navbar-collapse" id="navbarsExample09">             <ul class="navbar-nav ml-auto">               <li class="nav-item  active"><a class="nav-link" href="index.html">Home</a></li>               <li class="nav-item  active"><a class="nav-link" href="about-us.html">Quem Somos</a></li>               <li class="nav-item dropdown1">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapeutas</a>                     <ul class="dropdown-menu">                         <li><a class="dropdown-item" href="terapeuta-julio-cezar.html">Julio Cezar</a></li>                         <li><a class="dropdown-item" href="terapeuta-pamela-priscila.html">Pamela Priscila</a></li>                     </ul>                                    </li>               <li class="nav-item dropdown">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapias</a>                     <ul class="dropdown-menu" aria-labelledby="dropdown01">                         <li><a class="dropdown-item" href="o-que-e-reiki.html">O que é Reiki</a></li>                         <li><a class="dropdown-item" href="beneficios-reiki.html">Benefícios do Reiki</a></li>                         <li><a class="dropdown-item" href="principios-reiki.html">Princípios do Reiki</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Reiki em Animais</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Estudos Sobre Reiki</a></li>                         <li><a class="dropdown-item" href="terapia-massagem-tantrica.html">Terapia Tântrica</a></li>                     </ul>               </li>               <li class="nav-item  active"><a class="nav-link" href="blog.html">Blog</a></li>                <li class="nav-item"><a class="nav-link" href="contato.html">Contato</a></li>             </ul>         </div>  
      Massagem Tantrica em Curitiba
      Tantra Curitiba
      Massagem Tântrica
      Tantra
      Julio Darshan

      Obrigado
      Att
      Julio Cezar
       
       
       
    • Por Felipe Medeiros
      Bom, criei um tema filho e o que aprendi é que para alterar qualquer coisa do tema filho eu preciso copiar o arquivo do tema pai o colocar dentro da pasta do tema filho.
       
      No meu caso, estou usando o tema "Astra" bem famosinho. O arquivo css que quero modificar não está dentro da pasta do tema pai, está em "wp-content/uploads/uag-plugin/assets/0/uag-css-10.css" sendo que o diretorio do tema pai é "wp-content/themes/Astra"
       
      O problema é o seguinte, preciso modificar a barra de pesquisa da pagina inicial, porem o inspetor de elementos do chrome ta acusando que esse arquivo é o responsavel por estilizar a barra de pesquisa. Será que isso tem a ver com "Cache de objetos", eu sei que o plugin liteSpeed Cache, AMP, Rank Math, todos eles tem essas paradas de criar arquivos css e js para tornar o site mais rapido.
    • Por Alessandro Bodão
      Fala galerinha, 
       
      Tenho um container com um título (h1) no cabeçalho do meu site, esse container ocupa metade da tela (50vw), e eu gostaria que esse título ocupasse toda a largura desse container, independente do seu tamanho ou do tamanho do monitor, de forma com que a palavra tenha exactamente o mesmo tamanho do container (vou anexar uma foto de exemplo). Já tentei todos os valores pra essa h1, como % e vw... mas nada parece fazer sentido.
       
       

    • Por FabianoSouza
      Gente, tenho as TRs da minha tabele já com os cantos arredondados (através das TDs first-child e last-child). Fiz dessa forma porque desconheço uma maneira de aplicar radius diretamente na TR.
       
      O problema é que ao colorir a TR com o over do CSS, perde-se a formatação do border radius das TDs e exibe a TR com os cantos quadrados.
       
      Preciso que os cantos fiquem arredondados mesmo ao passar o mouse sobre a TR.
       
      Como resolvo isso?
    • Por viniciusfroner
      Tenho um pequeno sistema de envio, estou utilizando o "PHPMailerAutoload". Após o usuário inserir as informações e clicar em enviar a mensagem é enviada com sucesso, o único problema é que apresentado ao usuário a seguinte mensagem:
      if ($enviado){ echo "E-mail enviado com sucesso!"; } else { echo "Não foi possível enviar o e-mail."; echo "<b>Informações do erro:</b> " . $msg->ErrorInfo; } Acabei procurando e não achei como posso remover a mensagem "Error:"
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.