jqwidgets-scripts-custom
Version:
jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.
83 lines (75 loc) • 3.67 kB
HTML
<html lang="en">
<head>
<title id='Description'>Custom Element Menu OpenDirection</title>
<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" />
<meta name="description" content="This is an example of the opening direction of Custom Element Menu." />
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../../../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../../../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script>
JQXElements.settings['MenuSettings'] =
{
mode: 'horizontal', showTopLevelArrows: true
};
window.onload = function() {
var myMenu = document.querySelector('jqx-menu');
myMenu.setItemOpenDirection('Services', 'left', 'up');
myMenu.setItemOpenDirection('ContactUs', 'left', 'down');
};
</script>
</head>
<body>
<div class="example-description">
Custom element Menu 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.
</div>
<div style='margin-top: 100px; width: 310px;'>
<jqx-menu 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>
</div>
</body>
</html>