CODEWITHSUNDEEP
javascriptjqueryhtmlcssajax
Sri
Sri

Reputation: 2273

Tree view menu in javascript and css?

I almost done the css to make a tree view menu. But the problem is the tree would only work with the mouseover. I want to open and close the tree by clicking the link.

My Html is:

<div id="global-nav">
        <ul>
            <li><a href="#">One</a></li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li>
            <li><a href='#' class="sidemenu-sub-menu-header">Four</a>
            <ul>
                <li><a href="#">1.2 One</a></li>
                <li><a href="#">1.2 two</a></li>
            </ul></li>
        </ul>
</div>

My Css:

.sidemenu-sub-menu-header { font-weight: bold; color: black;}


#global-nav {font-size: 17px; }
#global-nav ul li{padding: 2px 10px 2px 10px;}
#global-nav ul ul li{ display: none;}
#global-nav li:hover ul li { display: block; }

I am just need a small script to open the menu and close the menu like a toggle bar. Thanks

Upvotes: 0

Views: 4705

Answers (4)

loQ
loQ

Reputation: 2136

You can use this jquery plugin to easily achieve what you want http://bassistance.de/jquery-plugins/jquery-plugin-treeview/

Demo http://jquery.bassistance.de/treeview/demo/prerendered.html

Upvotes: 2

Renan Cunha
Renan Cunha

Reputation: 199

That works for you:

$('#global-nav li a').click(function(){

   var nextUl = $(this).next('ul');

   if(nextUl[0] != undefined){
     nextUl.toggle(); //Alternate the visibility
   };

});

Upvotes: 2

dudewad
dudewad

Reputation: 476

Look into javascript's handy and (seemingly) widely used onclick function...!

Upvotes: 0

suresh gopal
suresh gopal

Reputation: 3156

CSS Unable to respond click. Better you use Jquery toggle function.

Upvotes: 0

Related Questions