Creating Dropdown Menus With Jquery and CSS

Creating a dropdown menu with css, the menu is the most important thing in a website, a good menu will make it easier for visitors to explore our website, especially when our website turns out to have a page consisting of sub and sub sub pages.

In this tutorial we will try to create a Dropdown menu with CSS, and we will beautify the menu we created with a little help from Jquery.

In previous articles, we have also made sample menus several times, maybe they can be used as other references.

Tips for Creating Horizontal Menus With CSS
Creating Menu Slides With CSS and Jquery
OK, let’s get started.

HTML Structure
Here we need to prepare the HTML structure first, create a file with the name index.html, then write the following code.

Demo Dropdown Menu: Tutorial-Webdesign.com

Actually this menu still works well without Javascript/Jquery, but to make the effect appear slowly we use Jquery.

Effects like that can actually be made with CSS3 Animation, come on, please show your creations!!

styling
To beautify the appearance, write the following css, in the style.css file

jquery
Actually until here the menu appears OK.
To smooth the appearance of the sub menu, we can make it with Javascript / Jquery as below.
We can also replace it with CSS3 Animation if desired.

Code for twd-menu.js.

function mainmenu(){
$(” #nav ul “).css({display: “none”}); // Opera Fix
$(” #nav li”).hover(function(){
$(this).find(‘ul:first’).css({visibility: “visible”,display: “none”}).show(400);
},function(){
$(this).find(‘ul:first’).css({visibility: “hidden”});
});
}

$(document).ready(function(){
mainmenu();
});
Results

Here are the results of the menu that we made, you can change it according to your needs, we have suggestions and input. You can write your comments, or write articles on this blog, by registering first.