Dropdown with jQuery and CSS

Posted by admin on May 16, 2010 in CSS, jQuery | 0 comments

Here is a solution for a very simple drop down menu system. All you need is jQuery and these below few lines of JavaScript and CSS.

The features of this menu system are:

  • Unordered list as menu structure
  • Absence of mouse events within html
  • Timeout effect
  • Cross-browser compatible (even IE 6)
  • Multi-level and retains “trail”
  • Easy to adopt styling
  • Minimal JavaScript

How to do it

First thing you do is to include jQuery library (before </head>)

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>

I am using the jQuery library hosted on google codes, but you can download your own copy of jQuery and link it to your page.

Next step is to include the simple drop-down menu plugin. You can either include the code before </head>, or save the code as an external JavaScript fine and include a link to it in your web page.

<script type="text/javascript">
$(function(){

    $("ul.dropdown li").hover(function(){

        $(this).addClass("hover");
        $('ul:first',this).css('visibility', 'visible');

    }, function(){

        $(this).removeClass("hover");
        $('ul:first',this).css('visibility', 'hidden');

    });

    $("ul.dropdown li ul li:has(ul)").find("a:first").append(" &amp;amp;amp;raquo; ");

});
</script>

Note: if you are using as an external file, then you don’t need to enclose the code in <script type="text/javascript"> and </script>.

Here is the HTML markup:

<div id="page-wrap">
        <ul class="dropdown">
        	<li><a href="#">Business News</a>
        		<ul class="sub_menu">
        			 <li><a href="#">Companies</a></li>
        			 <li>
        				<a href="#">Economy</a>
        				<ul>
        					<li><a href="#">International</a></li>
        					<li><a href="#">The Buzz</a></li>
                            <li><a href="#">International</a></li>
        					<li><a href="#">The Buzz</a></li>
                            <li><a href="#">International</a></li>
        					<li><a href="#">The Buzz</a></li>
        				</ul>
        			 </li>
        			 <li><a href="#">Street Sweep</a></li>
        			 <li><a href="#">Corrections</a></li>
                     <li><a href="#">Street Sweep</a></li>
        			 <li><a href="#">Corrections</a></li>
					 <li>
        				<a href="#">Economy</a>
        				<ul>
        					<li><a href="#">International</a></li>
        					<li><a href="#">The Buzz</a></li>
                            <li><a href="#">International</a></li>
        					<li><a href="#">The Buzz</a></li>
                            <li><a href="#">International</a></li>
        					<li><a href="#">The Buzz</a></li>
        				</ul>
        			 </li>
        		</ul>
        	</li>
        	<li><a href="#">Markets</a>
        		<ul class="sub_menu">
        			<li><a href="#">Pre-Market Training</a></li>
        			<li><a href="#">After Hours Training</a></li>
        			<li><a href="#">US Stocks</a></li>
        			 <li>
        				<a href="#">Currencies</a>
        				<ul>
        					<li><a href="#">Euro</a></li>
        					<li><a href="#">US Dollar</a></li>
        					<li><a href="#">British Pound</a></li>
        				</ul>
        			 </li>
        			 <li><a href="#">Pre-Market Training</a></li>
        			<li><a href="#">After Hours Training</a></li>
        			<li><a href="#">US Stocks</a></li>
        			 <li>
        				<a href="#">Currencies</a>
        				<ul>
        					<li><a href="#">Euro</a></li>
        					<li><a href="#">US Dollar</a></li>
        					<li><a href="#">British Pound</a></li>
        				</ul>
        			 </li>
        		</ul>
        	</li>
        	<li><a href="#">Personal Finance</a>
        		<ul class="sub_menu">
        			 <li>
        				<a href="#">Money Magazine</a></li>
        			 <li>
        				<a href="#">Real Estate</a>
        				<ul>
        					<li><a href="#">Jobs</a></li>
        					<li><a href="#">Taxes</a></li>
        					<li><a href="#">Autos</a></li>
        					<li><a href="#">Jobs</a></li>
        					<li><a href="#">Taxes</a></li>
        					<li><a href="#">Autos</a></li>
        				</ul>
        			 </li>
        			 <li>
        				<a href="#">Loan Center</a></li>
        			 <li>
        				<a href="#">Best Places to Live</a>
        				<ul>
        					<li><a href="#">Paris</a></li>
        					<li><a href="#">Sweeden</a></li>
        					<li><a href="#">Ireland</a></li>
        				</ul>
        			 </li>
					 <li>
        				<a href="#">Money Magazine</a></li>
        			 <li>
        				<a href="#">Real Estate</a>
        				<ul>
        					<li><a href="#">Jobs</a></li>
        					<li><a href="#">Taxes</a></li>
        					<li><a href="#">Autos</a></li>
        					<li><a href="#">Jobs</a></li>
        					<li><a href="#">Taxes</a></li>
        					<li><a href="#">Autos</a></li>
        				</ul>
        			 </li>
        			 <li>
        				<a href="#">Loan Center</a></li>
        			 <li>
        				<a href="#">Best Places to Live</a>
        				<ul>
        					<li><a href="#">Paris</a></li>
        					<li><a href="#">Sweeden</a></li>
        					<li><a href="#">Ireland</a></li>
        				</ul>
        			 </li>

        		</ul>
        	</li>
        	<li><a href="#">Technology</a>
        		<ul class="sub_menu">
        			 <li><a href="#">Apple</a></li>
        			 <li><a href="#">Google</a>
						 <ul>
						 	<li><a href="#">Gchat</a></li>
							<li><a href="#">Ad Server</a></li>
							<li><a href="#">Analytics</a></li>
						 </ul>
					 </li>
        			 <li><a href="#">Techmate</a></li>
        			 <li><a href="#">TechTalk</a></li>
        		</ul>
        	</li>
        	<li><a href="#">Preferences</a>
        		<ul class="sub_menu">
        			 <li><a href="#">Login</a></li>
        			 <li><a href="#">Register</a></li>
        			 <li><a href="#">Account</a></li>
        		</ul>
        	</li>
        </ul>
</div>

And here is the CSS:

* 									{ margin: 0; padding: 0; }
#page-wrap							{ width: 100%; margin: 25px auto; }
a									{ text-decoration: none; }
ul									{ list-style: none; }
p                                   { margin: 15px 0; }
ul.dropdown                         { position: relative; }
ul.dropdown li                      { font-weight: bold; float: left; zoom: 1; background: #ccc; }
ul.dropdown a:hover		            { color: #000; }
ul.dropdown a:active                { color: #ffa500; }
ul.dropdown li a                    { display: block; padding: 4px 8px; border-right: 1px solid #333;
	 								  color: #222; }
ul.dropdown li:last-child a         { border-right: none; }
ul.dropdown li.hover,
ul.dropdown li:hover                { background: #F4B737; color: black; position: relative; }
ul.dropdown li.hover a              { color: black; }
ul.dropdown ul 						{ width: 220px; visibility: hidden; position: absolute; top: 100%; left: 0; }
ul.dropdown ul li 					{ font-weight: normal; background: #f6f6f6; color: #000;
									  border-bottom: 1px solid #ccc; float: none; }
ul.dropdown ul li a					{ border-right: none; width: 100%; display: inline-block; }
ul.dropdown ul ul 					{ left: 100%; top: 0; }
ul.dropdown li:hover > ul 			{ visibility: visible; }

That’s it.

View Demo

Add a Comment
no comments