Ir para conteúdo
Fórum Script Brasil
  • 0

Menu


Paulo Alberto

Pergunta

Olá, estou fazendo um menu vertical e queria dar o efeito no HOME, deixando o hover já acionado sem precisar do mouse..

efeito parecido com esse abaixo.

Menu

segue o codigo que fiz.



<div id="menu">
<table border="0" width="100%" height="100%">

<tr>
<td><a href="#"><i>Home</a></td>
<td><a href="#"><i>Cursos</a></td>
<td><a href="#"><i>Contato</a></td></tr>
<tr>
<td><a href="#"><i>Cursos</a></td>
<td><a href="#"><i>Parceiros</a></td>
<td><a href="#"><i>Localização</a></td></tr>
<tr>
<td><a href="#"><i>A Empresa</a></td>
<td><a href="#"><i>Estágio</a></td>
<td><a href="#"><i>Fotos</a></td></tr>
</ul>

</table>
</div>

[/codebox]

CSS abaixo.

[codebox]

#menu table {
padding:2px;
margin:2px;
float: left;
width: 100%;
text-decoration: none;
font:16px;
}
#menu table a {

text-decoration: none;
padding: 2px 10px;
float:left;
font-family: Arial, Verdana, Geneva, sans-serif;
font-size: 16px;
color: #002C2D;

}


#menu table a:hover {
background-color:#002C2D;
color: #FFFFFF;
border-bottom:3px solid #6D6D6D;
}

Se alguém puder me ajudar agradeço. abç

Editado por Paulo Alberto
Link para o comentário
Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

  • 0

Olá Paulo Alberto. Fiz o menu e acredito ter ficado da forma que você pediu. Caso não esteja, pode avisar que conserto aqui.

dc8c40f7.png

Código Html

<div id="menu">
<ul class="menu">

  <li><a href="#" class="linkdapagina">Home</a></li>
  <li><a href="#">Sobre</a></li>
  <li><a href="#">Contato</a>
         <ul>
                  <li><a href="#">link1</a></li>
                  <li><a href="#">link2</a></li>
                  <li><a href="#">link3</a></li>
                  <li><a href="#">link4</a></li>                    

       </ul>
</li>
</ul>
</div>
Código Css
*{margin:0; padding:0;}

#menu{background:#CCC;}
.menu{list-style:none; margin:20px 0 0 350px; border:1px solid #c0c0c0; float:left; }
.menu li{position:relative; float:left; border-right:1px solid #c0c0c0; }
.menu li a{font-size:1.3em;  color:#333; text-decoration:none; padding:5px 10px; display:block;}
.menu li a:hover{background:#CCC; color:#fff; -moz-box-shadow:0 3px 10px 0 #CCC; -webkit-box-shadow:0 3px 10px 0 #ccc; text-shadow:0px 0px 5px #fff; }

.menu li   ul{position:absolute; top:23px; left:-20px; background-color:#fff; display:none; list-style:none; margin-top:12px;}
.menu li:hover ul, .menu li.over ul{display:block;}
.menu li ul li{border:1px solid #c0c0c0; display:block; width:110px;}
li.border0{border:0;}
.linkdapagina{background:#CCC;}

Explicação: Para fazer o "home" ficar marcado eu adicionei uma classe ao link, como você pode ver nesse trecho do código Html(<a href="#" class="linkdapagina">Home</a>) .

Se você quiser que esse efeito também fique marcado ao acessarem as outras páginas, nas próximas páginas que você fizer, basta mudar a classe do link de lugar.

Editado por Adler Liefde
Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,5k
×
×
  • Criar Novo...