Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Pessoal,
Tenho um menu vertical, e gostaria de manter a opção selecionada em destaque depois q ela foi clicada..
Gostaria da ajuda de vcs.. Abaixo segue o código
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style> margin: 0;
padding: 0;
list-style: none;
width: 196px;
border-bottom: 1px solid #ccc;
}ul.left_menu li {
position: relative;
margin: 0px;
list-style: none;
}li ul.left_menu {
position: relative;
top: 0;
display: none;
}ul.left_menu li.mother a {
display: block;
text-decoration: none;
color: #504b4b;
background: url(images/03.png) no-repeat left #eee6e6;
background-position: 5px 5px;
padding: 0 0 0 30px;
border-bottom: 1px #FFFFFF solid;
line-height: 25px;
}ul.left_menu li.submenu a {
display: block;
text-decoration: none;
color: black;
padding: 2px 0 0 20px;
font-size: 11px;
font-size-adjust: inherit;
background: #dad0d0;
line-height: 14px;
border-bottom: 0px;
}/ Fix IE. Hide from IE Mac \/
* html ul.left_menu li {
float: left;
height: 1%;
}* html ul.left_menu li a {
height: 1%;
}/ End /
ul.left_menu li.mother a:hover {
background: url(images/03.png) no-repeat left #7bbcc7;
color: #FFFFFF;
background-position: 5px 5px;
display: block;
}ul.left_menu li.submenu a:hover {
background:#dad0d0;
color: #2657B1;
font-weight: bold;
background-position: 5px 5px;
display: block;
}li:hover ul.left_menu {
display: block;
}li:hover ul.left_menu ul.left_menu,li.over ul.left_menu ul.left_menu {
display: none;
}li:hover ul.left_menu,li li:hover ul.left_menu,li.over ul.left_menu,li li.over ul.left_menu {
display: block;
} / Aqui a magica /
</style>
<script>
over = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" over";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" over\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", over);
</script>
<title>Insert title here</title>
</head>
<body>
<ul id="nav" class="left_menu">
<li class="mother"><a href="#">Categoria 1</a>
<ul class="left_menu">
<li class="submenu"><a href="#">Categoria 1.1</a></li>
</ul>
</li>
<li class="mother"><a href="#">Categoria 2</a>
<ul class="left_menu">
<li class="submenu"><a href="#">Categoria 2.1</a></li>
<li class="submenu"><a href="#">Categoria 2.2</a></li>
<li class="submenu"><a href="#">Categoria 2.3</a></li>
</ul>
</li>
<li class="mother"><a href="#">Categoria 3</a>
<ul class="left_menu">
<li class="submenu"><a href="#">» Categoria 3.1</a></li>
<li class="submenu"><a href="#">» Categoria 3.2</a></li>
<li class="submenu"><a href="#">» Categoria 3.3</a>
<li class="submenu"><a href="#">» Categoria 3.4</a></li>
<li class="submenu"><a href="#">» Categoria 3.5</a></li>
</ul>
</li>
<li class="mother"><a href="#">Categoria 4</a>
<ul class="left_menu">
<li class="submenu"><a href="#">» Categoria 4.1</a></li>
<li class="submenu"><a href="#">» Categoria 4.2</a></li>
<li class="submenu"><a href="#">» Categoria 4.3</a></li>
<li class="submenu"><a href="#">» Categoria 4.4</a></li>
</ul>
</li>
<li class="mother"><a href="#">Categoria 5</a>
</ul>
</body>
</html>entao william,
acontece q no meu caso eu tenho um hover, qdo saio da opcao que selecionei que atrapalha qualquer alteração..
ainda nao consegui enxergar uma solução pra isso.
se você puder, roda ele para você entender o que quero dizer..
obrigado :)
Dá uma olhada nas soluções deste menu aqui:
http://forum.imasters.com.br/index.php?/topic/354140-repente-css-menus/page__view__findpost__p__1345241
Se você fizer 'somente em Javascript', teria que ler a URL, pois vai acontecer um refresh da página qndo clicar em algum link.