Catalog.CodeProject.com

The jqxMenu widget makes it easy to add menus to your website or web application. With the jqxMenu you can create website menus, customized context menus, or application-style menu bars with just a small amount of scripting.
 

Features

 
- Horizontal, Vertical and Context Menu modes.
- Configurable Show and Hide animations.
- Configurable Sub Menu Open behavior - hover to open or click to open.
- Easy CSS Styling.
 

HTML

 
The markup of your Menu container needs only UL and LI elements.
 

<div id='jqxMenu'>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Solutions</a>
            <ul style='width: 250px;'>
                <li><a href="#">Education</a></li>
                <li><a href="#">Financial services</a></li>
                <li type='separator'></li>
                <li>Software Solutions
                    <ul style='width: 220px;'>
                        <li><a href="#">Consumer photo and video</a></li>
                    </ul>
                </li>
                <li><a href="#">All industries and solutions</a></li>
            </ul>
        </li>
        <li><a href="#">Products</a>
            <ul>
                <li><a href="#">PC products</a></li>
                <li><a href="#">Mobile products</a></li>
                <li><a href="#">All products</a></li>
            </ul>
        </li>            
    </ul>
</div> 

 

jQuery

 
The configuration includes setting the widget's width and height.
 
$("#jqxMenu").jqxMenu({ width: '300px', height: '30px'});
 
If you want to use the Menu as Context Menu(Popup Menu), you need to use the following configuration:
 
$("#jqxMenu").jqxMenu({ width: '300px', height: '150px', mode: 'popup'});
 
The Menu can be also displayed with Vertical Orientation. To achieve this, use the configuration below:
 
$("#jqxMenu").jqxMenu({ width: '300px', height: '150px', mode: 'vertical'});
 

Demo and Documentation

 
http://jqwidgets.com/jquery-widgets-demo