how to: onclick slide an element to left then show a nested hidden div.
Hi guys,
first thanks for your time.
sorry if it's basic stuff but I'm a noob with jquery and javascript.
The situation is: I have a vertical navigation menu with the basics (a <ul> with four <li>) but I need one of these list elements to slide to the left and when it finishes show or slide down a nested <ul> with its own li that is now hidden with display: none.
and when I click again the first list element I wish everything to close back. or alternatively to close with a timeout.
so far I got to this:
- $(document).ready(function(){
$("#gioca").click(function(){
$("#gioca").animate({ left: "+=400" }, 1200)
$("#hidden") .slideToggle("slow");
return false ;
});
});
which makes my list slide and at the same time open the hidden <ul> but when I click it again it closes the hidden <ul> but doesn't slide back. it slides more to the left.
how can I do it?
if it helps my html is:
- <div id="container">
<div id="menu">
<ul>
<li>paintball</li>
<li id="gioca"> gioca
<ul id="hidden">
<li id="dove">Dove</li>
<li id="cosa">Cosa serve</li>
<li id="tariffe">Tariffe</li>
<li id="prenota">Prenota</li>
</ul>
</li>
<li>news</li>
<li>foto</li>
</ul>
</div>
</div>
and my css is:
- div#container { margin: 5% 10%; background-color: #e9e9e9; width: 80%; height: 50%; }
div#menu { margin: 10% 0; width: 100%; height:60%; background-color: #EEEEEE; }
li {
margin: 2% 0;
padding: 2% 0;
background-color: #fafafa;
border: 1px #333;
width: 30%;
}
li:hover {background-color: #1494E6;
font-weight:bold;}
ul#hidden { display: none; }
just exemples of course.
can you help? thank you