Easiest Drop Down Menu Using Jquery and CSS3



Easiest Drop Down Navigation Menu Using Jquery and CSS3

Final Output:

Easiest Drop Down Menu Using Jquery and CSS3

 

Hey Friends. Today we are going to learn how to make a creative and easiest drop down menu using jquery and css3. Creating a drop down menu is sometimes very difficult. But I will show you how to create a very easy to use dropdown menu.

Step 1:

Create the index.html file to design your page.


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<div id="head">
<div class="wrap">
<h1><a href="http://www.trycatchclasses.com/">TryCatch Classes - Training Institute in Mumbai</a></h1>
</div>
</div>
<div class="wrap">
<ul id="nav">
 	<li><a href="http://www.trycatchclasses.com/">Home</a></li>
 	<li><a href="#">About TryCatch Classes</a>
<ul>
 	<li><a href="http://www.trycatchclasses.com/contact-us/">Contact US</a></li>
 	<li><a href="http://www.trycatchclasses.com/tutorials/">Projects</a></li>
 	<li><a href="http://www.trycatchclasses.com/">About</a></li>
 	<li><a href="http://www.trycatchclasses.com/contact-us/">Get in Touch</a></li>
 	<li><a href="http://www.trycatchclasses.com/tutorials/">Notes</a></li>
</ul>
</li>
 	<li><a href="#">Tutorials</a>
<ul>
 	<li><a href="http://www.trycatchclasses.com/courses/php-classes-mumbai-php-mysql-training/">PHP Course</a></li>
 	<li><a href="http://www.trycatchclasses.com/courses/codeigniter-training-in-mumbai/">Codeigniter</a></li>
 	<li><a href="http://www.trycatchclasses.com/courses/wordpress-training-mumbai-wordpress-course-in-mumbai/">Wordpress Course</a></li>
 	<li><a href="http://www.trycatchclasses.com/courses/angularjs-training-in-mumbai-angular-training-course-mumbai/">AngularJS</a></li>
 	<li><a href="http://www.trycatchclasses.com/courses/magento-course-in-mumbai-magento-training-in-mumbai/">MAGENTO Course</a></li>
</ul>
</li>
 	<li><a href="#">Menu 1</a>
<ul>
 	<li><a href="#">Sub-menu 1</a></li>
 	<li><a href="#">Sub-menu 2</a></li>
 	<li><a href="#">Sub-menu 3</a></li>
 	<li><a href="#">Sub-menu 4</a></li>
</ul>
</li>
 	<li><a href="#">Menu 2</a>
<ul>
 	<li><a href="http://www.trycatchclasses.com/courses/html-training-in-mumbai/">Website Design</a></li>
 	<li><a href="http://www.trycatchclasses.com/courses/android-training-in-mumbai-android-training-course-mumbai/">Android</a></li>
 	<li><a href="http://www.trycatchclasses.com/courses/ios-training-course-in-mumbai/">IOS</a></li>
 	<li><a href="http://www.trycatchclasses.com/courses/selenium-training-institute-in-mumbai-trycatch-classes/">Selenium</a></li>
</ul>
</li>
 	<li><a href="#">Categories</a>
<ul>
 	<li><a href="http://www.trycatchclasses.com/courses/php-classes-mumbai-php-mysql-training/">PHP OOPS</a></li>
 	<li><a href="#">NodeJS</a></li>
 	<li><a href="#">AngularJS</a></li>
 	<li><a href="#">Wordpress</a></li>
 	<li><a href="#">jQuery</a></li>
</ul>
</li>
</ul>
</div>
<div id="content" align="center">
<h3><a href="http://www.trycatchclasses.com/easiest-drop-down-menu-using-jquery-and-css3/">Easiest Drop Down Menu Using Jquery and CSS3</a></h3>
</div>
<script type="text/javascript">
$(document).ready(function() 
{
	$('#nav li').hover(function() 
	{
		$('ul', this).slideDown(50);
		$(this).children('a:first').addClass("hov");
	}, function() 
	{
		$('ul', this).slideUp(50);
		$(this).children('a:first').removeClass("hov");	
	});
});
</script>

<!-- analytics -->
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-55983115-2', 'auto');
  ga('send', 'pageview');

</script>
<!-- alalytics -->

 

Step 2:

Create a style.css file to write the css code for the page.

* {
 margin: 0;
 padding: 0;
}
body {
 font-family: "Comic Sans MS", cursive;
 font-size: 15px;
 color: #232323;
}

#head {
 background: #f9f9f9;
 height: 100px;
 padding-top: 15px;
 border-bottom: 1px solid #d5dce8;
}
.wrap {
 width: 800px;
 margin: 0 auto;
}
/* nav menu */
#nav {
 margin: 0;
 padding: 0;
 list-style: none;
 border-left: 1px solid #d5dce8;
 border-right: 1px solid #d5dce8;
 border-bottom: 1px solid #d5dce8;
 border-bottom-left-radius: 4px;
 -moz-border-radius-bottomleft: 4px;
 -webkit-border-bottom-left-radius: 4px;
 border-bottom-right-radius: 4px;
 -moz-border-radius-bottomright: 4px;
 -webkit-border-bottom-right-radius: 4px;
 height: 50px;
 padding-left: 15px;
 padding-right: 15px;
 background: #f9f9f9;
}
#nav li {
 float: left;
 display: block;
 background: none;
 position: relative;
 z-index: 999;
 margin: 0 1px;
}
#nav li a {
 display: block;
 padding: 0;
 font-weight: 700;
 line-height: 50px;
 text-decoration: none;
 color: #818ba3;
 zoom: 1;
 border-left: 1px solid transparent;
 border-right: 1px solid transparent;
 padding: 0px 12px;
}
#nav li a:hover, #nav li a.hov {
 background-color: #fff;
 border-left: 1px solid #d5dce8;
 border-right: 1px solid #d5dce8;
 color: #576482;
}
/* subnav */
#nav ul {
 position: absolute;
 left: 1px;
 display: none;
 margin: 0;
 padding: 0;
 list-style: none;
 -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 -o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 padding-bottom: 3px;
}
#nav ul li {
 width: 180px;
 float: left;
 border-top: 1px solid #fff;
 text-align: left;
}
#nav ul li:hover {
 border-left: 0px solid transparent;
 border-right: 0px solid transparent;
}
#nav ul a {
 display: block;
 height: 20px;
 line-height: 20px;
 padding: 8px 5px;
 color: #666;
 border-bottom: 1px solid transparent;
 text-transform:  uppercase;
 color: #797979;
 font-weight: normal;
}
#nav ul a:hover {
 text-decoration: none;
 border-right-color: transparent;
 border-left-color: transparent;
 background: transparent;
 color: #4e4e4e;
}

That’s it. Finally our code is over in just 2 easy steps. Now hit the url and run your code to get the ‘Easiest Drop Down Menu Using Jquery and CSS3’.

You may want to take a look at the following related posts:

 

Also for more awesome tutorials, please don’t forget to like our facebook page TryCatch Classes.

 

Bonus: We also give training on following topics:

1. Web Designing Training in Mumbai.

2. Bootstrap Training Course in Mumbai.

3. Python Training in Mumbai.

4. UI / UX Training.

5. IOS Training Institute in Mumbai.