I am attempting to design a menu that opens when the parent element is clicked and closes when the mouse leaves the previously opened one. It should operate from left to right.
Here is an example:
<ul class="menuFirst">
<li><img src="img/ico1.png"></li>
<ul class="">
<li><img src="img/ico2.png" alt="submodule1"></li>
<li><img src="img/ico2.png" alt="submodule2"></li>
<li><img src="img/ico2.png" alt="submodule3"></li>
</ul>
<li><img src="img/ico1.png"></li>
<ul class="menuSecond">
<li><img src="img/ico2.png" alt="submodule1"></li>
<li><img src="img/ico2.png" alt="submodule2"></li>
<li><img src="img/ico2.png" alt="submodule3"></li>
</ul>
<li><img src="img/ico1.png"></li>
<ul class="menuSecond">
<li><img src="img/ico2.png" alt="submodule1"></li>
<li><img src="img/ico2.png" alt="submodule2"></li>
<li><img src="img/ico2.png" alt="submodule3"></li>
</ul>
</ul>
Here is the corresponding CSS:
ul.menuFirst{
list-style-type: none;
border-top: #AAA solid 3px;
border-right: #AAA solid 3px;
border-bottom: #AAA solid 2px;
position: absolute;
left: 0px;
top: 70px;}
ul.menuFirst li{
background: #DDD;
border-bottom: #AAA solid 1px;
}
ul.menuFirst li img{
margin:5px;
}
ul.menuFirst ul{
display: none;
}
ul.menuFirst ul.menuSecond {
list-style: none;
display: table;
position: absolute;
left: 30px;
}
ul.menuFirst ul.menuSecond li{
display: table-cell;
}
And here is the jQuery implementation:
<script>
$(document).ready(function(){
$("ul.menuFirst li").click(function(){
$(this).next().toggle();
var ypos= $(this).next().position();
alert(ypos.top);
$(this).next().css('top','-=38');
$('ul.menuFirst ul.menuSecond').one('mouseleave',function(){
$(this).css('top', '+=38').toggle();
});
});
});
It currently works for the first element but it has some bugs. When trying to add .animate(), it does not function as intended. I have decided to debug this issue before proceeding with the animation, but I am unsure how to do so. The final result should look like this: