Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
salve pessoal...
fiz um menu pro meu site com sub-menu, mas gostaria que quando tivesse em algum item do sub-menu o menu ficasse marcado indicando onde estou, e tambem um efeito de slide fade ou coisa parecida, alguem sabe onde posso encontrar algo do tipo, ou alguma dica?
meu css esta assim:
#menu {
border: 1px solid #c7c7c7;
font: 12px Arial;
height: 50px;
text-transform: uppercase;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, rgb(235,
235, 235) ), color-stop(0.5, rgb(250, 250, 250) ) ); / Chrome /
-webkit-box-shadow: 0 2px 7px #999;
box-shadow: 0 2px 7px #999;
background-image: -moz-linear-gradient(center bottom, rgb(235, 235, 235)
50%, rgb(250, 250, 250) 50% ); / FF /
-moz-box-shadow: 0 2px 7px #999;
}
ul#nav {
letter-spacing: 1px;
margin-left: 0px;
}
ul#nav li {
float: left;
position: relative;
}
ul#nav li a {
color: #3a3a3a;
cursor: pointer;
display: block;
float: left;
height: 51px;
line-height: 50px;
padding: 0 20px;
text-decoration: none;
}
ul#nav li a:hover {
background: #989898;
color: #fff;
}
ul#nav li ul {
display: none;
left: 0;
position: absolute;
top: 51px;
z-index: 1;
}
ul#nav li:hover ul {
display: block;
}
ul#nav li ul a {
background: #989898;
color: #3a3a3a;
width: 88px; -webkit-box-shadow: 0 2px 7px #999;
box-shadow: 0 2px 7px #999;
background-image: -moz-linear-gradient(center bottom, rgb(235, 235, 235)
50%, rgb(250, 250, 250) 50% ); /* FF */
-moz-box-shadow: 0 2px 7px #999;
}
ul#nav li ul a:hover {
color: #fff;
}muito bom, obrigada pela ajuda, mas o efeito não consegui fazer funcionar...
Troque:
nav ul li a:hover {
/Efeitos/
}
por
nav ul li:hover > a {
nav ul li:hover {
/efeitos do menu que contém o submenu atual/
}
Sobre o slide, você pode usar Javascript, com JQuery você consegue isto bem rápido:
Aqui uma Demo que fiz rapidamente, você pode melhorar e muito: http://jsfiddle.net/JCMais/zrv37/3/embedded/result/
Cumprimentos. ;)