Easiest Drop Down Navigation Menu Using Jquery and CSS3
Final Output:
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:
- CSS Effects: CSS3 Animation Examples and Tutorials
- Awesome Input Type Text Focus Effects Using CSS
- Beautiful Circle Hover Effects Using CSS3 And HTML5
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.
4. UI / UX Training.