Tree view menu in javascript and css?

Question

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

Dr.Molle · Accepted Answer · 2012-09-28 17:54:30Z

2

That works for you:

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

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

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

});

edited Sep 28, 2012 at 17:54

Dr.Molle

117k16 gold badges200 silver badges206 bronze badges

answered Sep 28, 2012 at 17:49

Renan Cunha

3091 gold badge3 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Dr.Molle Over a year ago

You must edit your css, change #global-nav ul ul li into #global-nav ul ul and remove #global-nav li:hover ul li

Sri Over a year ago

i want the <li><a href='#' class="sidemenu-sub-menu-header">Four</a> to close by default and open it when we click the li. Please help me!

Sri Over a year ago

U r amazing Dr.Molle. Thank you very much indeed.

Dr.Molle Over a year ago

It's Renan Cunha's answer, I've only commented

Sri Over a year ago

Thanks to both of you. I dont forget to thank him first. Thanks a lot guys. One more small doubt. Is it possible to add a plus and minus image to work accordingly?

loQ · Accepted Answer · 2012-10-11 14:23:44Z

2

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

answered Oct 11, 2012 at 14:23

loQ

2,12119 silver badges22 bronze badges

Comments

suresh gopal · Accepted Answer · 2012-09-28 17:48:06Z

0

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

answered Sep 28, 2012 at 17:48

suresh gopal

3,1446 gold badges29 silver badges58 bronze badges

1 Comment

Sri Over a year ago

how to add jquery for html? any example..?

dudewad · Accepted Answer · 2012-09-28 17:48:42Z

0

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

answered Sep 28, 2012 at 17:48

dudewad

4764 silver badges8 bronze badges

1 Comment

dudewad Over a year ago

Why did you downvote this and the other very similar comment? If you read forum rules and guidelines a part of posting here you should be posting constructive posts that show at least a little self-motivation and research. We both pointed you in the right direction- go research how to use onclick or toggle, which is in fact the correct way to solve your problem. Please remove the downvotes, as both answers were correct, though we didn't take 10 minutes out of our days to write a script FOR you.

Collectives™ on Stack Overflow

Tree view menu in javascript and css?

My Css:

4 Answers 4

5 Comments

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

My Css:

4 Answers 4

5 Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related