CODEWITHSUNDEEP
javascriptjqueryhtmlcssmenu
Athapali
Athapali

Reputation: 1089

horizontal menu submenu

I have a horizontal list menu and another horizontal list sub menu for each menu item. Now when the page loads for the first time, first top menu with its sub menu and other top menus should show up and stay on if I mouse away or until i hover over other top menu item. As i hover over the other menus, their corresponding sub menus should show up.

Can someone show me how to do it using javascript or jquery or css only?

<div id="mytabs1" class="basictab">
    <ul>
        <li class="basictab1" id="li1"><a id="link1" href="http://mysite/Benefits.aspx" rel="sc1" >Benefits</a></li>
        <li class="basictab1" id="li2"><a id="link2" href="http://mysite/BESTPlan.aspx" rel="sc2">BEST Plan</a></li>
        <li class="basictab1" id="li3"><a id="link3" href="http://mysite/Insurance.aspx" rel="sc3">Insurance</a></li>
    </ul>
</div>

<DIV class="tabcontainer">
    <div id="sc1" class="tabcontent">
        <ul>
        <li><a id="link1-1" href="http://test.com">Link 1a</a></li>
        <li><a id="link1-2" href="http://test.com">Link 1b</a></li>
        </ul>
    </div>  
    <div id="sc2" class="tabcontent">
        <ul>
        <li><a id="link2-1" href="http://test.com">Link 2a</a></li>
        <li><a id="link2-2" href="http://test.com">Link 2b</a></li>
        </ul>
    </div>  
    <div id="sc3" class="tabcontent">
        <ul>
        <li><a id="link3-1" href="http://test.com">Link 3a</a></li>
        <li><a id="link3-2" href="http://test.com">Link 3b</a></li>
        </ul>
    </div>  
</DIV>

Upvotes: 0

Views: 2225

Answers (1)

Tivie
Tivie

Reputation: 18923

here's an example to point you in the right direction.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <style>
            ul, li
            {
                display: block;
            }
            .sublinks
            {
                display: none;
            }
        </style>
    </head>
    <body>
        <div id="mytabs1" class="basictab">
            <ul>
                <li class="basictab1" id="li1">
                    <a id="link1" href="http://mysite/Benefits.aspx" rel="sc1" >Benefits</a>
                    <ul class="sublinks">
                        <li><a id="link1-1" href="http://test.com">Link 1a</a></li>
                        <li><a id="link1-2" href="http://test.com">Link 1b</a></li>
                    </ul>
                </li>
                <li class="basictab1" id="li2">
                    <a id="link2" href="http://mysite/BESTPlan.aspx" rel="sc2">BEST Plan</a>
                    <ul class="sublinks">
                        <li><a id="link2-1" href="http://test.com">Link 2a</a></li>
                        <li><a id="link2-2" href="http://test.com">Link 2b</a></li>
                    </ul>
                </li>
                <li class="basictab1" id="li3"><a id="link3" href="http://mysite/Insurance.aspx" rel="sc3">Insurance</a></li>
            </ul>
        </div>
        <script>
            $('.basictab1').hover(function()
            {
                $(this).find('ul').toggle();
            });
        </script>
    </body>
</html>

Upvotes: 2

Related Questions