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.
- "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
- 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.
- 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:
- Now look at the following code snippet:
- 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.