Jquery Menu Bar
After not finding any good jquery menu bar i have created one for my own which for anyone to use and redistribute. In this tutorial we will see how to create menubar like below one.
Download the zip file from here containg example file, CSS and JS files. Extract the zipped folder there will be 4 files in it. Description for each is given below.
- "jquery-1.3.2.min.js" is the standard jquery file containig standard jquery functions.
- "createMenu.js" is the file containing javascript functions using jquery for creating the menu
- "menu.css" is the CSS file used for setting up the decoration of menus. Various coloring states such a hover state for menu can be changed by setting the color specified in this file to some different values
- "jquery_menu_example" is the file containing sample menu code for a "div" tag.
How to create Menu Bar
One can create menu bar in any element by specifying the id. I will now show the step by step process to create the menu bar for your component.
- Create an empty html file in the "jquery_menu" extracted folder given give it a name e.g "menu.html" we will be creating menu in this file only
- Inside the header part give these includes for javascript and css files.
<script src="jquery-1.3.2.min.js" type="text/javascript"></script> <script src="createMenu.js" type="text/javascript"></script> <link rel="stylesheet" href="menu.css"/> You can copy paste the code as it is in the header part of your document. - Now we have included the js and css files it is time to create a new tag. Create a new "div" tag in your document body and give it a id e.g "content".
-
To create menubar on this "div" tag we will write a small jquery.
Copy paste the following code within your document header.
<script> $(document).ready(function(){ createMenu($("#content")); // "content" is the id of div elemement }); </script> - You will see a menu bar created on you div element. Similarly you can create menu bar by supplying the element id within the createMenu function as shown above.
Customizing Menu Bar
For customizing the menu bar the content one has to look into the "createMenu.js" file which is very much self explainatory but i will give intruction for how-to customize it.
- Open the "createMenu.js" file found in the downloaded and unzipped folder.The function which we have to look upon are "createMenu()" and "createMenuName()" and "createLi()"
- Go to the "createMenu()" function. Look through the code below:
/*Creating submenu 1*/ subMenuName = "javascript"; parentDiv = createMenuName(parent,subMenuName); Here "subMenuName" is the name of the menu item which will be displayed on the menu. So if you want your menu to display something else change this variable. - Now look at the following code snippet:
/*element 1 of submenu1*/ newDiv = createLi("javascript submenu1","#"); newDiv.appendTo(parentDiv); Here we are creating the submenu item list for the menu item which will be displayed when we hover on a menu item.Function "createLi()" takes two arguements.- Name of the submenu item to be displayed when we hoven on the menu
- Url for the item when we click it
- Now its using "createLi()" function only that we create all the sub-menu drop-down items list by passing the name,url as arguments.
- For other menu items the procedure is same
- First you create menu-item to be display using "createMenuName()" function
- Then you create sub-menu items drop down list using "createLi()" method
p.s - Menu is customized to add two hierarchy of items if you want to have more than 2 you have to hack into the "createMenu()" and use "createMenuName()" and "createLi()" function for creating more levels of hierarchy.
Any queries are welcome.