I have created simple menu using CSS and jQuery. This is very simple than that you normaly imagine. I have completed the menu by using few lines of jQuery codes and normal normal few CSS classes. You can change the style and colour of menu as per your need. To implement this idea you can you following steps.
1. Step 1
First of all we have to create style.css file with following CSS classes.
.clear { clear:both; } .navigationHolder { width:100%; background:#000; } .navigationHolder ul { } .navigationHolder ul li { list-style:none; float:left; width:100px;; text-align:left; } .navigationHolder ul li a { display:block; margin:1px 10px 1px 10px; font:Arial, Helvetica, sans-serif;font-size:14px; text-decoration:none;color:#fff;font-weight:bold; padding:5px; } .navigationHolder ul li a:hover { text-decoration:none; color:#fff!important; background:#2f5c9a; -moz-border-radius: 4px 4px 4px 4px; -webkit-border-radius: 4px 4px 4px 4px; -khtml-border-radius: 4px 4px 4px 4px; border-radius: 4px 4px 4px 4px;} .navigationHolder ul li a:hover,.active { text-decoration:none; color:#fff!important; background:#A50000; -moz-border-radius: 4px 4px 4px 4px; -webkit-border-radius: 4px 4px 4px 4px; -khtml-border-radius: 4px 4px 4px 4px; border-radius: 4px 4px 4px 4px; } .navigationHolder ul li ul { padding:10px 0 0 0; background:#000; width:170px; display:none; position:absolute; z-index:10000; -moz-border-radius: 0 0 10px 10px; -webkit-border-radius: 0 0 10px 10px; -khtml-border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px; opacity: 0.9; filter: alpha(opacity = 90); } .navigationHolder ul li ul li { margin:0; padding:0; float:none; text-align:left; } .navigationHolder ul li ul li a { display:block; font:Arial, Helvetica, sans-serif; font-size:14px; text-decoration:none; color:#fff; font-weight:bold; padding:5px; width:140px; border-bottom:1px solid #ccc; } .navigationHolder ul li ul li a:hover { text-decoration:none; color:#fff!important; background:#A50000; -moz-border-radius: 4px 4px 4px 4px; -webkit-border-radius: 4px 4px 4px 4px; -khtml-border-radius: 4px 4px 4px 4px; border-radius: 4px 4px 4px 4px; } .navigationHolder ul li ul li:last-child a { border-bottom:0px solid #fff; } |
2. Step 2
In secound step we have to create JS ‘menu.js’ file with following piece of code.
$(document).ready(function(){ $(".navigationHolder>ul>li").mouseenter(function(){ $(this).find('ul').slideDown(500); }).mouseleave(function(){ $(this).find('ul').slideUp(500); }) }) |
3. Step 3
In third step we have to create HTML file with following piece of code.
<html> <head> <title>jQuery Menu </title> <link href="style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"> </script> <script language="javascript" type="application/javascript" src="menu.js"></script> </head> <body> <div> <ul> <li><a href="#">Menu1</a> <ul> <li><a href="#">Sub Menu1</a></li> <li><a href="#">Sub Menu2</a></li> <li><a href="#">Sub Menu3</a></li> <li><a href="#">Sub Menu4</a></li> </ul> </li> <li><a href="#">Menu2</a> <ul> <li><a href="#">Sub Menu1</a></li> <li><a href="#">Sub Menu2</a></li> <li><a href="#">Sub Menu3</a></li> <li><a href="#">Sub Menu4</a></li> </ul> </li> <li><a href="#">Menu3</a> <ul> <li><a href="#">Sub Menu1</a></li> <li><a href="#">Sub Menu2</a></li> <li><a href="#">Sub Menu3</a></li> <li><a href="#">Sub Menu4</a></li> </ul> </li> </ul> <div></div> </div> </body> </html> |
