Problem with script to slide left a <li> item from a menu and making links cliccable
Hi everybody,
what I'm trying to do is to have a vertical menu where one of the list items if triggered (click or mouseover are both fine) moves to the right and then slides down a submenu with other 4 lists items.
I got this working while I was just trying this effect alone thanks to this script:
- <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#gioca").toggle(function(){
//Open menu
$("#gioca").stop().animate({ right: "+=100" }, 1200)
$("#hidden").stop().slideDown("slow");
}, function(){
//Close menu
$("#gioca").stop().animate({ right: "-=100" }, 1200)
$("#hidden").stop().slideUp("slow");
});
});</script>
but now on the real site something goes wrong and I don't get it because on a page where I have only the menu it works. could it be because the menu div is positioned fixed ?
here is my html
- <div id="over">
<div id="logo">logo</div>
<div id="container">
<div id="menu">
<ul>
<li>paintball</li>
<li id="gioca"> gioca
<ul id="hidden">
<li class="submenu">Dove</li>
<li class="submenu">Cosa serve</li>
<li class="submenu">Tariffe</li>
<li class="submenu">Prenota</li>
</ul>
</li>
<li>news</li>
<li>foto</li>
</ul>
</div>
</div>
</div>
</body>
and my css
- div#over { position:absolute; margin: 0 auto; z-index: 100; width:960px; height:auto;}
div#menu {position:fixed; width:800px; margin:350px 0px 100px 20px; height:auto; z-index: 200; padding: 0 20px 0 0;}
div#menu li {
text-align:right;
list-style-type:none;
margin: 10px 0;
padding:4px 10px;
background-color: #000;
border: 1px #333;
width: 240px;
}
li:hover {background-color:#9c3646;
font-weight:bold;}
ul { width:100%; }
ul#hidden { display:hidden ; height:10%; overflow: visible;}
li.submenu {width:50%;}
li a {
font-size:16px;
line-height:20px;
font-family: Arial Black, arial, sans-serif;
text-decoration:none;
color:#fff;}
can you spot the problem??
also I don't know why the links of the submenu don't work. if I click it simply closes the menu. is it because of #?
any help would really be apreciated. and if you know another way to have the same result (<li> sliding to right and submenu appearing) would be ok too.
thanks for your time :)sl