Menu is part of IntegralUI Studio for Web
a suite of UI Components for development of web apps
a suite of UI Components for development of web apps
Advanced User Interface Controls and Components
Created: 05 September 2014
Whenever a menu item is added, removed or a submenu is shown or hidden, a corresponding event is fired. Here is a list of available events supported in Menu widget. By creating handlers for these events, we can customize the behavior of the menu.
Each menu item can display a hyperlink, which by default when clicked can open a new page. In cases when a menu item doesn’t contain a hyperlink, in order to process clicks we need to handle the itemclick event.
$(document).ready(function(){
var $menuBar = $('#menu').menu();
$menu.on({
"itemclick": function(e){
alert("item " + e.object.text + " is clicked");
}
});
});
<!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">
<ul>
<li><span>MenuItem1</span></li>
<li><span>MenuItem2</span>
<ul>
<li><span>MenuItem21</span></li>
<li><span>MenuItem22</span></li>
<li><span>MenuItem23</span>
<ul>
<li><span>MenuItem231</span></li>
<li ><span>MenuItem232</span>
<ul>
<li><span>MenuItem2321</span></li>
<li><span>MenuItem2322</span></li>
</ul>
</li>
<li><span>MenuItem233</span></li>
</ul>
</li>
<li><span>MenuItem24</span></li>
</ul>
</li>
<li ><span>MenuItem3</span>
<ul>
<li><span>MenuItem31</span></li>
<li><span>MenuItem32</span></li>
<li><span>MenuItem33</span></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
<style type="text/css">
.widget
{
width: 600px;
height: 0;
}
</style>
In our example menu item contains a plain text, which when clicked a pop-up message will appear stating which menu is clicked. We can modify this so even menu item doesn’t contain a hyperlink, we can still open a page and make the item with only plain text, still act as a hyperlink.
Be default, each menu item will open and show its submenus only when it is clicked. If we set the openOnHover property value to true, when mouse cursor is placed over their parent menu, all submenus can now open.
Demo: Menus that Open on Click or on Hover
This process is accompanied with firing of open event. Similarly when menu or submenu is closed, the close event is fired. You can handle these events in your code and add a specific action if required. To simplify our example in both cases, when menus are opened and closed, the console window will display a message stating the menu item for which these events are fired.
$menu
.on({
"close": function(e){
console.log("close event was fired for menu " + e.object.text);
},
"open": function(e){
console.log("open event was fired for menu " + e.object.text);
}
});
Above demonstration shows when and in what order a specific event is fired. Only events related with add/remove operations are excluded.