Click here to Skip to main content

Catalog.CodeProject.com


Rate this:   Poor Excellent
Please Sign up or sign in to vote.
Item Details
License: Limited Time Trial
Technologies: Javascript, XHTML, Windows, Mobile, jQuery
Last Updated: 29 Nov 2011

Contact Information
Contact Name:
jqwidgets
Company /
Organisation:
jqwidgets
Email:
info@jqwidgets.com
Email Format:
Html
Address 1:
382 NE 191st St 28935 Miami, FL 33179, USA
City:
Miami
Zip / Post Code:
33179
Country:
United States
Phone:
+1 786 600 1810
URL:
http://jqwidgets.com

jQuery Menu and Context Menu

jqwidgets
Version: 1.2
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

 
 
 

Advertise | Privacy | Mobile
Web02 | 2.8.140421.2 | Last Updated 10 Aug 2007
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Use
Layout: fixed | fluid