Tammu
asked on
Show Sub Menu only when its Parent menu is clicked
I have simple menu like below
as you can see for parent category 2 and parent category 5 there are sub menus. I would like to show that sub menu only when the parent category is clicked or one of the sub menu is clicked
So for example If I click on Parent Category 5 or its sub categories I want to show the sub menu of parent category 5. and hide the rest of the sub menus for other parent categories basically like expanded tree
Is this possible using Pure CSS or even jQuery.
Thanks
<div class="menuitems" id="scats13">
<ul id="springMenu13" class="springMenu">
<li id="li-55"><a id="a55" href="/browse/cats.aspx?cid=55&bid=2" class="text">Parent Category 1</a></li>
<li id="li-56"><a id="a56" href="/browse/cats.aspx?cid=56&bid=2" class="text">Parent Category 2</a>
<ul id="sub-menu">
<li id="li79"><a id="a79" href="/browse/cats.aspx?cid=79&bid=2" class="text">Child Category</a></li>
</ul>
</li>
<li id="li-60"><a id="a60" href="/browse/cats.aspx?cid=60&bid=2" class="text">Parent Category 3</a></li>
<li id="li-61"><a id="a61" href="/browse/cats.aspx?cid=61&bid=2" class="text">Parent Category 4</a></li>
<li id="li-76"><a id="a76" href="/browse/cats.aspx?cid=76&bid=2">Parent Category 5</a>
<ul id="sub-menu">
<li id="li80"><a id="a80" href="/browse/cats.aspx?cid=80&bid=2" class="text">Child Category 1</a></li>
<li id="li81"><a id="a81" href="/browse/cats.aspx?cid=81&bid=2" class="text">Child Category 2</a></li>
<li id="li82"><a id="a82" href="/browse/cats.aspx?cid=82&bid=2" class="text">Child Category 3</a></li>
<li id="li83"><a id="a83" href="/browse/cats.aspx?cid=83&bid=2" class="text">Child Category 4</a></li>
</ul>
</li>
<li id="li-72s"><a id="as72" href="/browse/cats.aspx?cid=72&bid=5" class="text">Parent Category 6</a></li>
</ul>
</div>
as you can see for parent category 2 and parent category 5 there are sub menus. I would like to show that sub menu only when the parent category is clicked or one of the sub menu is clicked
So for example If I click on Parent Category 5 or its sub categories I want to show the sub menu of parent category 5. and hide the rest of the sub menus for other parent categories basically like expanded tree
Is this possible using Pure CSS or even jQuery.
Thanks
We really need to see the CSS as well. But the best thing would be a live link
ASKER
Thanks for replying, I can't show you a live link as its on my localhost, sorry.
but here is the CSS for the menu
but here is the CSS for the menu
#springMenu13
{
padding: 0;
margin:0;
}
#springMenu13 li
{
list-style:none;
margin-bottom: 2px;
margin-top: 0;
padding-left: 6px;
padding-right: 2px;
width: 100%;
}
#springMenu13 ul#sub-menu
{
display:block;
padding-left:12px;
}
So like a directory tree?
Like this? http://www.htmldrive.net/items/show/104/jQuery-simple-Tree-Menu.html
Like this? http://www.htmldrive.net/items/show/104/jQuery-simple-Tree-Menu.html
ASKER
Very similar but for example in the demo link you have sent, when images is clicked, only its submenu should be displayed and other sub menus closed.
Thanks
Thanks
We'd have to see what code your working with in order to do all that. That demo above isn't bad. It can probably be configured to do what you want.
First let's fix the error... you have the id "sub-menu" on more than one element. An id must be unique. It can only be applied to one element in a page. To apply the same CSS rules to more than one element you must use a class.
Cd&
Cd&
ASKER
Thanks for the tip my mistake i changed to css class.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.