Getting Started with the JavaScript Menu

Home >Shield UI Documentation >Menu >JavaScript >Getting Started with the JavaScript Menu

The Menu widget allows you to choose one of many possible options. The underling element from which the widget is initialized can be a UL or DIV element. In order to render the component on a webpage, you need to:
1. Include references to all required scripts. Make sure you include the CSS file for your preferred theme.
2. Add a UL or DIV element to render the widget.
3. Initialize the widget.

<!DOCTYPE html>
<html>
<head>
<title>Shield DropDown</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/light/all.min.css" />
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/shieldui-all.min.js" type="text/javascript"></script>
</head>
<body>

<ul id="menu1">
	<li data-href="#file">
	    <div>File</div>
	    <ul>
		<li><a href="#xxx">Open</a></li>
		<li><a href="#yyy">Save</a></li>
		<li><a href="#zzz">Exit</a></li>
	    </ul>
	</li>
	<li data-role="separator"></li>
	<li>
	    <a href="#edit">Edit</a>
	    <ul>
		<li href="#copy">Copy</li>
		<li data-class="css-class">Paste</li>
		<li>Cut</li>
	    </ul>
	</li>
	<li disabled="disabled">
	    <div>Disabled Item</div>
	    <ul>
		<li>Disabled 1</li>
		<li>Disabled 2</li>
		<li>Disabled 3</li>
	    </ul>
	</li>
	<li data-icon-url="computer.png">
	    <div>Mega Menu</div>
	    <ul>
		<li data-class="customcls">
		    <div style="width:400px;">
			<p><a href="/">Shield UI Ltd.</a></p>
			<p><a href="/">Monsters, Inc.</a></p>
			<p>One paragraph</p>
			<p>Another paragraph</p>
		    </div>
		</li>
	    </ul>
	</li>
	<li data-icon-cls="xxx-icon-cls" data-class="right" data-href="#admin">
	    <div>Admin</div>
	    <ul>
		<li>Login</li>
		<li>Register</li>
		<li>Help</li>
	    </ul>
	</li>
</ul>

<script type="text/javascript">
    $("#menu1").shieldMenu({
        cls: "topmenu",
        events: {
            click: function(e) {
                console.log(e.item);
                console.log(e.element);
            }
        }
    });
</script>

</body>
</html>

To see an example of the control in action, along with all the required code, please refer to the following example.