Basic Dropdown Menu using jQuery
In this article, I will explain to you about the implementation of the basic and stylish drop down menu. While designing the websites most of the user needs the attractive designs and menu styles. As a developer we can’t design the menu. Using jQuery anyone can easily create the stylish drop down menu within 30 minutes.
Introduction:
While designing the websites most of the user needs the attractive designs and menu styles. As a developer we can't design the menu. Using jQuery anyone can easily create the stylish drop down menu within thirty minutes. In this article, I will explain to you about the implementation of basic and stylish dropdown menu.Requirements:
We need the "Style.css" file and the following images,
1) body_bg.gif
2) dropdown_linkbg.gif
3) header_bg.gif
4) subnav_btn.gif
5) topnav_bg.gif
6) topnav_hover.gif
The "Style.css" file contains the basic styles for background color, width and height of the menu, etc., Also need the latest jQuery library file.Implementation Steps:
Step 1:
Create a new page and link the "Styles.css" file to your page,
<link href="Styles.css" type="text/css" rel="Stylesheet" />Step 2:
Link the jQuery library into your page,
<script type="text/javascript" src="jquery-latest.js"></script>Step 3:
Need to initialize the ready function as follows,
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$("ul.subnav").parent().append("");
$("ul.topnav li span").click(function() {
$(this).parent().find("ul.subnav").slideDown('fast').show();
$(this).parent().hover(function() {
}, function() {
$(this).parent().find("ul.subnav").slideUp('slow');
});
}).hover(function() {
$(this).addClass("subhover"); },
function() {
$(this).removeClass("subhover");
});
});
</script>Step 4:
Design your page with the following html elements,
<div style="height: 120px;">
</div>
<ul class="topnav">
<li><a href="#">Home</a></li>
<li><a href="#">Tutorials</a>
<ul class="subnav">
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
</ul>
</li>
<li><a href="#">Resources</a>
<ul class="subnav">
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
</ul>
</li>
<li><a href="#">About Us</a></li>
<li><a href="#">Advertise</a>
<ul class="subnav">
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a>
</li>
</ul>
</li>
<li><a href="#">Submit</a></li>
<li><a href="#">Contact Us</a></li>
</ul>jQuery Method definitions:
$("ul.subnav").parent():
This method finds the parent node of each element which have the tag name ul and class name subnav. So, this method finds the following elements from our designs,
1) 'a href="#"'Tutorials'/a'
2) 'a href="#"'Resources'/a'
3) 'a href="#"'Advertise'/a'
Using this method, first we need to find out the element which has the submenus.
append():
This method appends the specified elements at the end of each object. Here, I append the "span" elements at the end of each object. For more details,
please visit the below link,
http://api.jquery.com/append/
hover():
This method register the events while mouse hover. Here it registers, while hover the founded elements.
slideup() and slidedown():
This method slides the sub menus when the arrow button is clicked. If we pass the argument has either "slow" or "fast". If the argument is "fast" then the submenu animation is normal speed otherwise it displays with slow animation. For more details please visit the below links,
http://api.jquery.com/slideUp/
http://api.jquery.com/slideDown/
The above site gives the complete description about each arguments.
addClass() and removeClass():
This method just adds the class attribute to the specified element. Using this method we can add or remove the class styles dynamically. The above class names are used to highlighting the fade image while mouse hover on each menu.
We can also prepare this menu content dynamically. Just design a div with runat server. Get the menu details from database or user inputs and prepare the html design as like the current page design. After preparing the html content just assign to the div.
Herewith, I attached the complete solution files. Post your comments if you have any trouble to implementing this feature.
Reference: http://www.noupe.com/tutorial/drop-down-menu-jquery-css.html