Paulo Alberto Postado Julho 27, 2012 Denunciar Share Postado Julho 27, 2012 (editado) 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. Menusegue 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 Julho 27, 2012 por Paulo Alberto Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 Nitinha Postado Agosto 3, 2012 Denunciar Share Postado Agosto 3, 2012 Dá uma olhada no código dele com o firebug que você vai ter sua resposta, só uma dica, para menus é usado listas e não tabelas. Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 Adler Liefde Postado Agosto 6, 2012 Denunciar Share Postado Agosto 6, 2012 (editado) Olá Paulo Alberto. Fiz o menu e acredito ter ficado da forma que você pediu. Caso não esteja, pode avisar que conserto aqui. 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 Agosto 6, 2012 por Adler Liefde Citar Link para o comentário Compartilhar em outros sites More sharing options...
Pergunta
Paulo Alberto
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.
CSS abaixo.
#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 AlbertoLink para o comentário
Compartilhar em outros sites
2 respostass a esta questão
Posts Recomendados
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.