jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
76 lines (73 loc) • 4.22 kB
HTML
<html lang="en">
<head>
<meta name="keywords" content="jQuery Menu, Main Menu, Context Menu, Vertical Menu, Popup Menu, Menu, jqxMenu" />
<meta name="description" content="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 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" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<script type="text/javascript" src="../../../scripts/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxmenu.js"></script>
</head>
<body>
<div id='content'>
<script type="text/javascript">
$(document).ready(function () {
// Create a jqxMenu
$("#jqxMenu").jqxMenu({ width: '310', height: '30', mode: 'horizontal', showTopLevelArrows: true});
// Set up the open directions.
$("#jqxMenu").jqxMenu('setItemOpenDirection', 'Services', 'left', 'up');
$("#jqxMenu").jqxMenu('setItemOpenDirection', 'ContactUs', 'left', 'down');
$("#jqxMenu").css('visibility', 'visible');
});
</script>
<div id='jqxWidget' style='margin-top: 100px; width: 310px;'>
<div id='jqxMenu' style="visibility: hidden;">
<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>
</div>
</div>
</div>
<div style="position: absolute; bottom: 5px; right: 5px;">
<a href="https://www.jqwidgets.com/" alt="https://www.jqwidgets.com/"><img alt="https://www.jqwidgets.com/" title="https://www.jqwidgets.com/" src="https://www.jqwidgets.com/wp-content/design/i/logo-jqwidgets.png"/></a>
</div>
</body>
</html>