If we have many sub categories and variations in our website or blog we need to arrange then in such an order so that it is easy to access for the visitor and have a clear idea about where he needs to go in the website. So to arrange them in an order we use menus bars. If we have many sub categories then we use dropdown menu plugins so that to make our website look clean, neat and easy to access. Basically, it takes long lines of code to implement a dropdown plugin, but using jQuery it becomes very easy with reduced code and more effective functionality. We will now discuss different jQuery plugins available and being used the most along with its code and demo.
1. jQuery Drop Line Tabs:
In this dropdown menu a nested UL list is turned into a menu of horizontal drop line tabs. We use 2 transparent background image, where the top level tabs are rounded on each side. When the mouse rolls over the parent LI, then the each sub ULs will appear as a single row of links of that drop down. To give each link within the sub ULs with rounded edges, this plugin makes use of the “border-radius” property that manages to sneak in a little CSS3 when the mouse hovers over them.
Check out its demo and code here
2. Creating an Outlook Navigation dropdown Bar using the ListView and Accordion Controls
To create multiple panes and display them at a time we have got a jQuery plugin called Accordion which is a web control. This plugin is designed using listview and accordion controls. It is included with several CollapsiblePanels where we can only expand one panel at a time. Here this Accordion is implemented as a web control which is contained with AccordionPane web controls.
Know more about this plugin here
3. Reinventing a Drop Down with CSS and jQuery:
For designers and even for users Select element of standard HTML is pretty much annoying. It is messy to use. Its main problem is that it cannot be enhanced or styled in Internet Explorer. It just contains simple text but nothing else. Here we get the need to think about reinventing of Drop Down element. This is done using CSS and jQuery. This is easily designed and implemented. We can use different colors, borders and hover effects to enhance the functionalities, features and look of the dropdown menu.
Check out its implementation here and follow the steps to use it in your website
4. FormBox – A jQuery & CSS3 Drop-Down Menu With Integrated Forms:
This dropdown plugin as its name suggests is used for forms for registering or logging etc. resetting a password, logging in and registering are some of its common functions. In some cases we still provide users the same old experience. i.e., for example a separate page for signing-up, another page for logging in,and yet again another page to check and retain your details if you’ve forgotten what your login details were. You will get the simple forms when you hover mouse on each tab where you can fill in details directly without opening a different page.
Enjoy the code and demo here