How do you make a 2-tiered menu?

 
0
 

How would I get started?

This site is the perfect example: http://applereviews.com/

This site also has one: http://energycell.co.uk/

Could I just use their js and css and place it on my site?

<link rel="stylesheet" href="http://applereviews.com/wp-content/themes/apple-reviews/style.css" type="text/css" media="screen" /> <!-- jQuery --> <script type="text/javascript" src="http://applereviews.com/wp-content/themes/apple-reviews/js/jquery-1.3.2.min.js"></script> <!-- jQuery Functions --> <script type="text/javascript" src="http://applereviews.com/wp-content/themes/apple-reviews/js/functions.js"></script> <script type="text/javascript" src="http://applereviews.com/wp-content/themes/apple-reviews/js/hoverIntent.js"></script> <script type="text/javascript" src="http://applereviews.com/wp-content/themes/apple-reviews/js/superfish.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("ul.sf-menu").superfish({ pathClass: 'current' }); }); </script> <a name="top"></a> <div class="wrap"> <div id="the-new-menu-cont"> <div class="box"> <div class="box-inner"><div id="new-nav" class="box-bottom-nav-new"> <div class="new-cool-menu"> <ul id="new-menu-ul" class="sf-menu sf-navbar"> <li id="menu-home" class="current"> <ul> <li class="current"><a href="http://applereviews.com/">Home</a></li> <li class=""><a href="http://applereviews.com/about/">About Apple Reviews</a></li> <li><a href="http://applereviews.com/contribute/">Submit Story</a></li> <li><a href="http://applereviews.com/contact/">Anonymous Mailer</a></li> <li class=""><a href="http://applereviews.com/authors">Authors</a></li> <li class=""><a href="http://applereviews.com/contribute">Contribute</a></li> <li class=""><a href="http://applereviews.com/contact/">Contact</a></li> <li><a href="http://feeds2.feedburner.com/applereviewsplus">RSS</a></li> </ul> </li> <li id="menu-reviews" class=""><a href="http://applereviews.com/reviews/">Reviews <img src="http://applereviews.com/wp-content/themes/apple-reviews/images/greenarrow.gif" alt="Reviews" border="0" /><span>Hands on experience</span></a> <ul> <li class=""><a href="http://applereviews.com/reviews/">Latest Reviews</a></li> <li class=""><a href="http://applereviews.com/reviews/product-reviews/">Product Reviews</a></li> <li class=""><a href="http://applereviews.com/reviews/featured-reviews/">Featured Reviews</a></li> </ul> </li> <li id="menu-hardware" class=""><a href="http://applereviews.com/hardware/">Hardware <img src="http://applereviews.com/wp-content/themes/apple-reviews/images/yellowarrow.gif" alt="Hardware" border="0" /><span>Products You Need</span></a> <ul> <li class=""><a href="http://applereviews.com/hardware/apple-hardware/">Apple Hardware</a></li> <li class=""><a href="http://applereviews.com/hardware/accessories/">Accessories</a></li> <li class=""><a href="http://applereviews.com/hardware/new-hardware/">New Hardware</a></li> </ul> </li> <li id="menu-software" class=""><a href="http://applereviews.com/software/">Software <img src="http://applereviews.com/wp-content/themes/apple-reviews/images/orangearrow.gif" alt="Software" border="0" /><span>Products You Want</span></a> <ul> <li class=""><a href="http://applereviews.com/software/">Latest Reviews</a></li> <li class=""><a href="http://applereviews.com/software/software-product-reviews/">Product Reviews</a></li> <li class=""><a href="http://applereviews.com/software/software-featured-reviews/">Featured Reviews</a></li> </ul> </li> <li id="menu-iphone" class=""><a href="http://applereviews.com/iphone">iPhone <img src="http://applereviews.com/wp-content/themes/apple-reviews/images/redarrow.gif" alt="iPhone" border="0" /><span>Apps, Tips & Tricks</span></a> <ul> <li class=""><a href="http://applereviews.com/iphone/iphone-software/">Software</a></li> <li class=""><a href="http://applereviews.com/iphone/iphone-hardware/">Hardware</a></li> <li class=""><a href="http://applereviews.com/iphone/iphone-accessories/">Accessories</a></li> </ul> </li> <li id="menu-buzz" class=""><a href="http://applereviews.com/buzz">Latest Buzz <img src="http://applereviews.com/wp-content/themes/apple-reviews/images/purplearrow.gif" alt="Latest Buzz" border="0" /><span>News and Rumors</span></a> <ul> <li class=""><a href="http://applereviews.com/buzz/">Popular News</a></li> <li class=""><a href="http://applereviews.com/buzz/apple-insider/">Apple Insider</a></li> <li class=""><a href="http://applereviews.com/buzz/mac-rumors/">Mac Rumors</a></li> <li class=""><a href="http://applereviews.com/buzz/tuaw/">TUAW</a></li> <li class=""><a href="http://applereviews.com/buzz/ars-technica/">Ars Technica</a></li> <li class=""><a href="http://applereviews.com/buzz/apple/">Apple</a></li> <li class=""><a href="http://applereviews.com/buzz/apple-reviews/">Apple Reviews</a></li> </ul> </li> <li id="menu-community" ><a href="http://www.twitter.com/applereviews">Twitter <img src="http://applereviews.com/wp-content/themes/apple-reviews/images/bluearrow.gif" alt="Community" border="0" /><span>Follow us to win!</span></a>                                                              

                                

                                </li>

								

								

                            

                            </ul>

                            

						                           



						</div><!-- new-cool-menu -->                            

                        

                        </div></div>

	</div><!-- box -->   			

	

</div><!-- the-new-menu-cont -->    


    

</body>

</html>
 
0
 

They're called dropline menus, and here are some tutorial links:

http://cssmenus.co.uk/dropline.html
http://www.dynamicdrive.com/style/csslibrary/item/jquery_drop_line_menu/
http://www.alistapart.com/articles/hybrid
http://www.cssplay.co.uk/menus/pro_dropline


But I'd still like to know how to accomplish the ones on the sites I listed above. Can I just steal them?

You
This article has been dead for over six months: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: