Jquery Menu Request

Question

I want a jquery menu like this link

the menu in link is in Flash format

Flash Menu

when i hover on parent menu with mouse all sub menus will open

---

I think now this is the correct answer

<div class="hoverMenuItem" id="item1">
    Menu Item</div>
<div class="hoverMenuItem" id="item2">
    Menu Item</div>
<div class="hoverMenu" style="display: none; position: absolute;">
    <!--menu laid out-->
</div>
<div class="hoverMenu" style="display: none; position: absolute;">
    <!--menu laid out-->
</div>

    <script type="text/javascript">
    $(document).ready(function () {
        $('.hoverMenuItem').mouseover(function () {
            //var id = $(this).attr("id");
            //var itemNum = id.substring(4);
            //$('#menu' + itemNum).slideDown(250);
            $('.hoverMenu').slideDown(250);
        });
        $('.hoverMenuItem').mouseout(function () {
            //var id = $(this).attr("id");
            //var itemNum = id.substring(4);
            //$('#menu' + itemNum).slideUp(250);
            $('.hoverMenu').slideUp(250);
        });
    });
</script>

but there is a problem

in this way how can we Determine childs for each parent ?

Answer 1

Alright, here's a final answer (Sorry it took so long).

http://jsfiddle.net/htBPp/6/

I redesigned my approach, and used the .hover function on the wrapper div (menuSection). This worked perfectly. So, there you are.

/* Old stuff, preserved for posterity

EDIT- This is the new approach.

This is where I'm at so far- it's pretty close. If you go back up to the menu items, it'll hide and then show the menu... you'll have to get clever to solve that.

http://jsfiddle.net/htBPp/4/

EDIT- This is my first shot at the answer.

<div class="hoverMenuItem" id="item1">Menu Item</div>
<div class="hoverMenu" id="menu1" style="display:none; position:absolute;"><!--menu laid out--></div>

<script type="text/javascript">
    $('.hoverMenuItem').mouseover(function(){
         var id=$(this).attr("id");
         var itemNum=id.substring(3);
         $('#menu'+itemNum).slideDown(250);
    });
    $('.hoverMenuItem').mouseout(function(){
         var id=$(this).attr("id");
         var itemNum=id.substring(3);
         $('#menu'+itemNum).slideUp(250);
    });
</script>

Something very similar to this will pretty much do it. You will have to figure out how to avoid triggering the mouseout event when you go onto the menu, though (probably add the menu as a child element of the menu item).

EDIT: So, starting from there, this is a quick and dirty fiddle.

http://jsfiddle.net/htBPp/

Inside the menu, you can setup the layout however you want and line it up with the items above.

*/