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.