Blogs

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 &amp; 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 &amp; 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' });  

Here is how the Menu looks after rendering. if you have any questions, please feel free to contact us at support@jqwidgets.com