#jqxmenu

jqxMenu is a jQuery plugin that let’s you add a beautiful Menu to your web site. In this post, we will expore how to set up a menu from an existing UL.

Let’s start with a simple ‘DIV’ element with ‘UL’ as a child element.

<div id='jqxMenu'> <ul> <li><a href="#">Home</a></li> <li>About Us <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>Services <ul> <li><a href="#">Product Development</a></li> <li><a href="#">Delivery</a></li> <li><a href="#">Shop Online</a></li> <li><a href="#">Support</a></li> <li><a href="#">Training & Consulting</a></li> </ul> </li> <li>Products <ul> <li><a href="#">New</a> <ul> <li><a href="#">Corporate Use</a></li> <li><a href="#">Private Use</a></li> </ul> </li> <li><a href="#">Used</a> <ul> <li><a href="#">Corporate Use</a></li> <li><a href="#">Private Use</a></li> </ul> </li> <li><a href="#">Featured</a></li> <li><a href="#">Top Rated</a></li> <li><a href="#">Prices</a></li> </ul> </li> <li><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>

The next step is to include the required javascript files and CSS styles. We will use the ‘Summer’ visual style, so we need to include the jqx.summer.css file after jqx.base.css.

<link rel="stylesheet" href="styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="styles/jqx.summer.css" type="text/css" /> <script type="text/javascript" src="jquery-1.6.2.min.js"></script> <script type="text/javascript" src="jqxcore.js"></script> <script type="text/javascript" src="jqxmenu.js"></script>

Now, let’s render the Menu using this script:

$("#jqxMenu").jqxMenu({ width: '600', height: '30px', theme: 'summer' });