jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
69 lines (68 loc) • 3.44 kB
HTML
<html ng-app="demoApp" lang="en">
<head>
<meta name="keywords" content="AngularJS Menu, Main Menu, Context Menu, Vertical Menu, Popup Menu, Menu, jqxMenu" />
<meta name="description" content="AngularJS Menu example. This example demonstrates a Menu with custom open direction." />
<title id='Description'>jqxMenu allows you to change the popup's open direction by using the setItemOpenDirection method. The 'Services' item is opened above the menu and the
'Contact Us' item is opened below the menu and horizontally aligned to left.
</title>
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../../scripts/angular.min.js"></script>
<script type="text/javascript" src="../../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxangular.js"></script>
<script type="text/javascript">
var demoApp = angular.module("demoApp", ["jqwidgets"]);
demoApp.controller("demoController", function ($scope) {
$scope.menuSettings = {
width: '310', height: '30', mode: 'horizontal', showTopLevelArrows: true,
created: function (args) {
args.instance.setItemOpenDirection('Services', 'left', 'up');
args.instance.setItemOpenDirection('ContactUs', 'left', 'down');
}
};
});
</script>
</head>
<body ng-controller="demoController">
<jqx-menu style="margin-top: 100px;" jqx-settings="menuSettings">
<ul>
<li style="width: 80px;"><a href="#">About Us</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Our Vision</a></li>
<li><a href="#">The Team</a>
<ul>
<li><a href="#">Brigita</a></li>
<li><a href="#">John</a></li>
<li><a href="#">Michael</a></li>
<li><a href="#">Peter</a></li>
<li><a href="#">Sarah</a></li>
</ul>
</li>
<li><a href="#">Clients</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">FAQs</a></li>
</ul>
</li>
<li id='Services'><a href="#">Services</a>
<ul>
<li><a href="#">Delivery</a></li>
<li><a href="#">Shop Online</a></li>
<li><a href="#">Support</a></li>
</ul>
</li>
<li id='ContactUs'><a href="#">Contact Us</a>
<ul>
<li><a href="#">Enquiry Form</a></li>
<li><a href="#">Map & Driving Directions</a></li>
<li><a href="#">Your Feedback</a></li>
</ul>
</li>
</ul>
</jqx-menu>
</body>
</html>