probably you have already heard thousands of questions like this, but
I need help, as no plugins I've found doest what I need to do...
I have a tabbed navigation menu, with two levels, that when the mouse
pass over the first level tabs, it show the second level for this tab,
but what I want is if the user don't click on any menu item (first or
second level), when the mouse goes out the menu it returns to the
original state (last clicked option)... The current problem I have is
with the with this specific feature, on mouse out...
Above is the file in question..
Probably it's a stupid thing I'm asking, but JS isn't my strongest
language al all...
Best Regards,
Bruno B B Magalhães
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/
html;charset=iso-8859-1" />
<title></title>
<style type="text/css" media="screen"><!--
body { font-size: 11px; font-family: Verdana, Arial, Helvetica,
sans-serif; line-height: 11px; background-image: url('images/
menu.gif'); background-repeat: repeat-x; margin: 0; padding: 0; }
.navigation { }
.navigation .menu { position: absolute; top: 33px; left: 10px;
right: 200px; }
.navigation .menu ul { float: left; margin: 0; padding: 0; list-
style-type: none; }
.navigation .menu ul li { float: left; margin: 0; padding: 0; list-
style-type: none; display: block; }
.navigation .menu ul li a { color: #D9D9D9; text-decoration: none;
margin-right: 1px; padding: 5px 10px; }
.navigation .menu ul li a:hover { color: #333333; background-color:
#D9D9D9; text-decoration: none; padding: 5px 10px; }
.navigation .menu ul li ul { position: absolute; top: 25px; left:
0; display: none; margin: 0; padding: 0; list-style-type: none; }
.navigation .menu ul li ul li { float: left; margin: 0; padding: 0;
list-style-type: none; display: block; }
.navigation .menu ul li ul li a { color: #333333; background-color:
transparent; text-decoration: none; margin-right: 1px; padding: 5px
10px; }
.navigation .menu ul li ul li a:hover { background-color: #E6E6E6;
text-decoration: none; padding: 5px 10px; }
.navigation .menu ul li.active { float: left; margin: 0; padding:
0; list-style-type: none; display: block; }
.navigation .menu ul li.active a { color: #333333; text-decoration:
none; background-color: #D9D9D9; padding: 5px 10px; }
.navigation .menu ul li.active a:hover { color: #333333; background-
color: #D9D9D9; text-decoration: none; padding: 5px 10px; }
.navigation .menu ul li.active ul { position: absolute; top: 25px;
left: 0; display: block; margin: 0; padding: 0; list-style-type:
none; }
.navigation .menu ul li.active ul li { float: left; margin: 0;
padding: 0; list-style-type: none; display: block; }
.navigation .menu ul li.active ul li a { color: #333333; background-
color: transparent; text-decoration: none; margin-right: 1px; padding:
5px 10px; }
.navigation .menu ul li.active ul li a:hover { background-color:
#E6E6E6; text-decoration: none; padding: 5px 10px; }
.navigation .menu ul li ul li.active { float: left; margin: 0;
padding: 0; list-style-type: none; display: block; }
.navigation .menu ul li ul li.active a { text-decoration: none;
background-color: white; padding: 5px 10px; }
.navigation .menu ul li ul li.active a:hover { background-color:
#E6E6E6; text-decoration: none; padding: 5px 10px; }
.navigation .logotipo { position: absolute; top: 15px; right:
10px; }
.navigation .informacoes { color: #333333; position: absolute; top:
58px; right: 10px; }
.navigation .informacoes a { color: #333333; text-decoration:
none; }
.navigation .informacoes a:hover { color: #333333; text-decoration:
underline; }
--></style>
<script type="text/javascript" src="javascripts/jquery.js"></script>
<script type="text/javascript">
<!--
var active = null;
$(document).ready(function(){
$('.menu > ul > li').mouseover(function() {
$('.menu > ul > li').each(function(i, a) {
$(a).removeClass('active');
});
$('.menu > ul > li > ul').each(function(i, a) {
$(a).hide();
});
$(this).addClass('active');
$(this).children('ul').show();
});
$('.menu > ul > li > ul').mouseout(function() {
$('.menu > ul > li').each(function(i, a) {
$(a).removeClass('active');
});
$('.menu > ul > li > ul').each(function(i, a) {
$(a).hide();
});
if($(active).children('ul').size()) {
$(active).addClass('active');
$(active).children('ul').show();
} else {
$(active).parent('li').addClass('active');
$(active).parent('ul').show();
$(active).addClass('active');
}
});
$('.menu > ul > li').click(function() {
$(this).addClass('active');
$(this).children('ul').show();
active = this;
});
$('.menu > ul > li > ul > li').click(function() {
$('.menu > ul > li > ul > li').each(function(i, a) {
$(a).removeClass('active');
});
$(this).parent('li').addClass('active');
$(this).addClass('active');
active = this;
});
});
-->
</script>
</head>
<body>
<div class="navigation">
<div class="menu">
<ul>
<li class="">
<a href="#">Resumo</a>
</li>
<li class="">
<a href="#">Cadastros</a>
<ul>
<li class=""><a href="#">Indivíduos</a></li>
<li class=""><a href="#">Organizações</a></li>
</ul>
</li>
<li class=""><a href="#">Administrativo</a>
<ul>
<li class=""><a href="#">Contas a pagar</a></li>
<li class=""><a href="#">Contas a receber</a></li>
<li class=""><a href="#">Relatórios</a></li>
</ul>
</li>
<li class=""><a href="#">Sistema</a>
<ul>
<li class=""><a href="#">Usuários</a></li>
<li class=""><a href="#">Grupos</a></li>
<li class=""><a href="#">Configurações</a></li>
</ul>
</li>
</ul>
</div>
<div class="logotipo"><img src="images/logo.gif" alt=""
border="0"></div>
<div class="informacoes">BUser [<a href="#" target="operacao">sair</
a>]</div>
</div>
</body>
</html>
No comments:
Post a Comment