Solved

Show Sub Menu only when its Parent menu is clicked

Posted on 2013-02-05
8
335 Views
Last Modified: 2013-03-06
I have simple menu like below

	<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>

Open in new window


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
0
Comment
Question by:niceoneishere
8 Comments
 
LVL 30

Expert Comment

by:LZ1
ID: 38856172
We really need to see the CSS as well. But the best thing would be a live link
0
 
LVL 1

Author Comment

by:niceoneishere
ID: 38856242
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

#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;
}

Open in new window

0
 
LVL 30

Expert Comment

by:LZ1
ID: 38856278
0
 
LVL 1

Author Comment

by:niceoneishere
ID: 38856360
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
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 30

Expert Comment

by:LZ1
ID: 38856412
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.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38856577
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&
0
 
LVL 1

Author Comment

by:niceoneishere
ID: 38856927
Thanks for the tip my mistake i changed to css class.
0
 
LVL 6

Accepted Solution

by:
lightspeedvt earned 500 total points
ID: 38881534
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

706 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now