Trouble with jQuery dropdown - nested lists

catonthecouchproductions
catonthecouchproductions used Ask the Experts™
on
I am trying to work on a jquery dropdown like the image attached. I am working on having the items below the word "Dog" each have a two col dropdown. Its not the CSS I cant get, its the logic of the menu.

I have an example of the XHTML markup below. That is the one for Dogs -> Foods.

Would the jQuery look something like this: (a member here, helped me out and to understanding this, great help.)

http://pastie.org/668214

I guess I am really just having trouble with the selector to make it dynamic among the pattern.

Thank you,

Ryan
<h4 class="top-nav-heading">DOG</h4>
				<ul>
					<li><a href="<% Request.ApplicationPath %>/category/dog/foods/" class="main-heading-main main-menu">Foods</a>
					<ul class="sub-drop grid_2">
						<li class="drop-title">Dog Food</li>
						<li><a href="<% Request.ApplicationPath %>/category/dog/food/all-natural/">All Natural</a></li>
						<li><a href="<% Request.ApplicationPath %>/category/dog/food/canned-dog-food/">Canned Dog Food</a></li>
						<li><a href="<% Request.ApplicationPath %>/category/dog/food/dry-dog-food/">Dry Dog Food</a></li>
						<li><a href="<% Request.ApplicationPath %>/category/dog/food/grain-free/">Grain Free</a></li>
						<li><a href="<% Request.ApplicationPath %>/category/dog/food/organic/">Organic</a></li>
						<li><a href="<% Request.ApplicationPath %>/category/dog/food/overweight/">Overweight</a></li>
						<li><a href="<% Request.ApplicationPath %>/category/dog/food/puppy/">Puppy</a></li>
						<li><a href="<% Request.ApplicationPath %>/category/dog/food/senior/">Senior</a></li>
						<li><a href="<% Request.ApplicationPath %>/category/dog/food/veterinary-diets/">Veterinary Diets</a></li>
						<li><a href="<% Request.ApplicationPath %>/category/dog/food/frozen-and-raw/">Frozen &amp; Raw</a></li>
						<li><a href="#" class="view-more">More...</a></li>
					</ul>
					<ul class="sub-drop grid_2">
						<li><a href="<% Request.ApplicationPath %>/category/dog/brand/">All Natural</a></li>
						<li><a href="<% Request.ApplicationPath %>/category/dog/brand/">Canned Dog Food</a></li>
						<li><a href="<% Request.ApplicationPath %>/category/dog/brand/">Dry Dog Food</a></li>
						<li><a href="<% Request.ApplicationPath %>/category/dog/brand/">Grain Free</a></li>
						<li><a href="<% Request.ApplicationPath %>/category/dog/brand/">Organic</a></li>
						<li><a href="<% Request.ApplicationPath %>/category/dog/brand/">Overweight</a></li>
						<li><a href="<% Request.ApplicationPath %>/category/dog/brand/">Puppy</a></li>
						<li><a href="<% Request.ApplicationPath %>/category/dog/brand/">Senior</a></li>
						<li><a href="<% Request.ApplicationPath %>/category/dog/brand/">Veterinary Diets</a></li>
						<li><a href="<% Request.ApplicationPath %>/category/dog/brand/">Frozen &amp; Raw</a></li>
						<li><a href="<% Request.ApplicationPath %>/category/dog/brand/" class="view-more">Shop By Brand</a></li>
					</ul>
					</li>
					<li><a href="<% Request.ApplicationPath %>/category/dog/toys/" class="main-heading-main">Toys</a></li>
					<li class="last"><a href="<% Request.ApplicationPath %>/category/dog/treats-and-more/" class="main-heading-main">Treats &amp; More</a></li>
					<li class="last arrow"><a href="#" class="drop-down"><img src="images/dropdown-arrow.png" width="15" height="14" alt="Dropdown Arrow" class="main-heading-arrow"  /></a></li>
				</ul>

Open in new window

Screen-shot-2009-10-24-at-3.26.5.png
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
I think i can help.  But I'm not entirely sure.  So you need to have 2 columns display each time a user clicks on a menu item?

if so I can do that:

lets say for dog food you wanted two columns - one for name - the other for price

In CSS set up the look of each giving them both their own class we'll call it "food_name" and "food_price".  Make sure you set display:none for both and position them right where you want them.

in HTML
set up your menu (in list items like you did (if you like)). Make sure you place them each column w/in its own DIV setting the class of each to food_name or food_price.

Also give your dog food iden a class.  for this example we'll call it food_menu

in JQuery
below is the jquery code that will display the two columns, food_name and food_price when someone clicks on the menu item w/ class food_menu:
 $(document).ready(function() {
   $(".food_menu").click(function(){
     $(".food_name").show("fast");
     $(".food_price").show("fast");
   });

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial