Click here to Skip to main content
12,634,171 members (25,695 online)
Click here to Skip to main content
Add your own
alternative version


6 bookmarked

jQuery Menu with Separator Items

, 16 Jan 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
In this post we will see how to add separator menu items to a Menu widget for jQuery.

In this post we will show you how to add separator menu items to our Menu widget for jQuery, called jqxMenu.

Add references to the javascript and css files in your web page.

<link rel="stylesheet" href="styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="styles/jqx.darkblue.css" type="text/css" />
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jqxcore.js"></script>
<script type="text/javascript" src="jqxmenu.js"></script>

Add the HTML code to the document’s body. In order to use the Menu widget, you need to add a DIV element with UL and LI tags defining the Menu’s structure. To add a separator item to the jQuery Menu, you need to set the ‘type’ attribute of a LI tag to ‘separator’. jqxMenu will detect that the menu item should be displayed as a separator during its initialization.

For example:

<div id='jqxMenu'>
        <li><a href="#Home">Home</a></li>
            <ul style='width: 250px;'>
                <li><a href="#Education">Education</a></li>
                <li><a href="#Financial">Financial services</a></li>
                <li><a href="#Government">Government</a></li>
                <li><a href="#Manufacturing">Manufacturing</a></li>
                <li type='separator'></li>
                <li>Software Solutions
                    <ul style='width: 220px;'>
                        <li><a href="#ConsumerPhoto">Consumer photo and video</a></li>
                        <li><a href="#Mobile">Mobile</a></li>
                        <li><a href="#RIA">Rich Internet applications</a></li>
                        <li><a href="#TechnicalCommunication">Technical communication</a></li>
                        <li><a href="#Training">Training and eLearning</a></li>
                        <li><a href="#WebConferencing">Web conferencing</a></li>
                <li><a href="#">All industries and solutions</a></li>

To initialize the Menu, select the ‘jqxMenu’ div tag and call the jqxMenu constructor.

$("#jqxMenu").jqxMenu({ width: '600', height: '30px', theme: 'darkblue'});


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

United States United States
jQWidgets specializes in the development of platform independent and cross-browser compatible presentation layer components for building modern web-based applications for PC, Touch and Mobile. Our product provides developers with the essential set of User Interface widgets needed to streamline their development and reduce project costs.
Our goal is to help our customers deliver better web-based applications that can be accessed through any device and are pleasure to use.
Group type: Organisation

13 members

You may also be interested in...

Comments and Discussions

QuestionListing does not work as shown Pin
Jan Zumwalt23-Jan-12 15:32
memberJan Zumwalt23-Jan-12 15:32 
AnswerRe: Listing does not work as shown Pin
jqwidgets5-Feb-12 18:08
groupjqwidgets5-Feb-12 18:08 
Hi Jan,

- Did you add references to all required .js and .css files?
- Did you add the 'separator' attribute to a LI tag?

Looking forward to your reply.
GeneralRe: Listing does not work as shown Pin
AgileWare6-Mar-12 8:38
memberAgileWare6-Mar-12 8:38 
GeneralRe: Listing does not work as shown Pin
AgileWare6-Mar-12 8:41
memberAgileWare6-Mar-12 8:41 
GeneralMy vote of 2 Pin
dinesh100817-Jan-12 19:08
memberdinesh100817-Jan-12 19:08 
GeneralRe: My vote of 2 Pin
jqwidgets18-Jan-12 0:42
groupjqwidgets18-Jan-12 0:42 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.161208.2 | Last Updated 16 Jan 2012
Article Copyright 2012 by jqwidgets
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid