1.11M Members

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: