Contact • Customer Service

LIDOR SYSTEMS

Advanced User Interface Controls and Components

Home » Support » Articles » jQuery » Menu

Menu Item as Separator in jQuery

Created: 31 July 2014

All items in Menu widget for jQuery can act as normal item showing title, hyperlink, custom content or act as a separator. The menu item object has a property type which determined the behavior of the item.

More Demos
Download
Menu is part of IntegralUI Studio for Web
a suite of UI Components for development of web apps

In order for an item to act and appear as a separator we can set this during design time using HTML5 or though code using javascript. In both cases the result is similar; the only difference is whether we know how our menus will look like during design time or menus are created dynamically from local or remote data source.

At first lets create a simple web page which contains a Menu widget:

$(document).ready(function(){

var $menuBar = $('#menu').menu({

openOnHover: true

});

});

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<link rel="stylesheet" href="css/integralui.menu.css" />

<link rel="stylesheet" href="css/themes/theme-dark.css" />

<script type="text/javascript" src="external/jquery-1.9.1.min.js"></script>

<script type="text/javascript" src="external/jquery.ui.core.min.js"></script>

<script type="text/javascript" src="external/jquery.ui.widget.min.js"></script>

<script type="text/javascript" src="js/jquery.integralui.widget.min.js"></script>

<script type="text/javascript" src="js/jquery.integralui.menu.min.js"></script>

</head>

<body>

<div id="menu" class="widget"></div>

</body>

</html>

<style type="text/css">

.widget

{

width: 600px;

height: 0;

}

</style>

Using HTML5 Attribute to Create a Separator Item

We can create a separator with HTML5 custom attribute, in this case use the data-element attribute and set its value to separator. Here how looks the HTML5 code for the File menu and its submenus:

<div id="menu" class="widget">

<ul>

<li><span>File</span>

<ul>

<li><span class="icons new" data-element="icon"></span><span>New</span>

<ul>

<li><span>Project</span></li>

<li><span>Window</span></li>

</ul>

</li>

<li><span>Open</span></li>

<li><span class="icons save" data-element="icon"></span><span>Save As...</span></li>

<li><span>Save All</span></li>

<li><hr data-element="separator" /></li>

<li><span>Page Setup</span></li>

<li><span class="icons print" data-element="icon"></span><span>Print</span></li>

<li><hr data-element="separator" /></li>

<li><span>Exit</span></li>

</ul>

</li>

</ul>

</div>

<style type="text/css">

.icons

{

background-image: url(../images/icons-business.png);

background-repeat: no-repeat;

display: inline-block;

overflow: hidden;

padding: 0;

margin: 0 1px;

width: 16px;

height: 16px;

}

.empty

{

background-position: 0px 0px;

}

.new

{

background-position: -16px 0;

}

.save

{

background-position: -32px 0;

}

.print

{

background-position: -48px 0;

}

</style>

Using jQuery to Create a Separator Item

In order to make an item act as a separator through code we need to change the type property of the item object, and set its value to separator string.

var item = {

type: "separator"

}

We can create the content of the menu like in demonstration above entirely from code, here is the code for the File menu with its submenus:

var data = [

{

id: 1,

text: "File",

items: [

{

id: 11,

pid: 1,

text: "New",

icon: "<span class='icons new' data-element='icon'></span>",

items: [

{ id: 111, pid: 11, text: "Project" },

{ id: 112, pid: 11, text: "Window" }

]

},

{ id: 12, pid: 1, text: "Open" },

{ id: 13, pid: 1, text: "Save As...", icon: "<span class='icons save' data-element='icon'></span>" },

{ id: 14, pid: 1, text: "Save All" },

{ id: 15, pid: 1, type: "separator" },

{ id: 16, pid: 1, text: "Page Setup" },

{ id: 17, pid: 1, text: "Print", icon: "<span class='icons print' data-element='icon'></span>" },

{ id: 18, pid: 1, type: "separator" },

{ id: 19, pid: 1, text: "Exit" }

]

}

];

 

// Load the data to the menu using the AddItem method

// Because our data is a tree structure, we can cycle only through root items, all child items are added automatically

for (var i = 0; i < data.length; i++)

$menuBar.menu("addItem", data[i]);

You will notice that items that act as separator only have a value set for type property to a "separator" string.

You can change the appearance of separators whatever you like. Using custom CSS3 styles you can modify it and set to match its look to your web application theme. In our case we are using a <hr> as a separator and the appearance is set using this style:

.widget hr

{

background: #ebebeb;

border: 0;

border-bottom: 1px solid #fafafa;

color: #ebebeb;

margin: 0;

height: 1px;

}

Newsletter

Sign-up to our newsletter and you will receive news on upcoming events, latest articles, samples and special offers.
Name: Email: *
*By checking this box, I agree to receive a newsletter from Lidor Systems in accordance with the Privacy Policy. I understand that I can unsubscribe from these communications at any time by clicking on the unsubscribe link in all emails.

Home • Contact • Customer Service

CONTACT

PRODUCTS

SUPPORT

COMPANY

Copyright © 2005-2022 Lidor Systems. All Rights Reserved. • Terms of Use • Privacy