JQuery UI Menu

The last tutorial explained how to turn an ordinary element to date picker element. This tutorial explains how to convert an html element and its child elements to menu. A menu is basically a set of links or buttons that are tabbed together. A menu groups related html elements. For instance most of the websites have main menu which contains links to Home, About, Services and Contact pages etc. Jquery UI menu function allows developers to convert an ordinary element and its contents to menus. To create menus, simply call menu() function with or without optional parameters on any input element which you want to convert to menu. Take a look at the following example.

<!DOCTYPE html>
<html>
   <head>
      <title>JQuery UI Menu</title>
      <link href="http://code.jquery.com/ui/1.8.24/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
       
      <script>
         $(function() {
           
             $( "#main-menu" ).menu();
         });
      </script>
       
       <style>
         .ui-menu {
            width: 300px;
         }
      </style>
   </head>
   <body>

      <ul id="main-menu">
         <li><a href="#">Home</a></li>
         <li><a href="#">About</a></li>
         <li><a href="#">Services</a>
            <ul>
               <li><a href="#">Web Development</a></li>
               <li><a href="#">Mobile Development</a></li>
               <li><a href="#">.NET Development</a></li>
            </ul>
         </li>
         <li><a href="#">Portfolio</a></li>
         <li><a href="#">Contact</a></li>
      </ul>
   </body>
</html>

Download Code Run Code

The above webpage contains an un-ordered list which contains some li elements. One of the child li element further contains an un-ordered list with li elements. The outer ul list has id “main-menu”. In the script, this element is selected via id and menu() function is called on it. This makes the ul list and its li child a menu. You can click on the list item and if they contain any child, they will pop-up.

Menu with Optional Parameters

You can also pass additional optional parameters to the menu() function to change the behavior and position of the menu. The parameters are passed inside the curly brackets with each parameter separated by a comma. In the following example optional parameters icon is passed to menu function. The icon specifies the icon to use for sub-menu. Take a look at the following example.

<!DOCTYPE html>
<html>
   <head>
      <title>JQuery UI Menu With Optional Parameters</title>
      <link href="http://code.jquery.com/ui/1.8.24/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
       
      <script>
         $(function() {
           
             $( "#main-menu" ).menu({
                  icons: { submenu: "ui-icon-home"},
             });
         });
      </script>
       
       <style>
         .ui-menu {
            width: 300px;
         }
      </style>
   </head>
   <body>

      <ul id="main-menu">
         <li><a href="#">Home</a></li>
         <li><a href="#">About</a></li>
         <li><a href="#">Services</a>
            <ul>
               <li><a href="#">Web Development</a></li>
               <li><a href="#">Mobile Development</a></li>
               <li><a href="#">.NET Development</a></li>
            </ul>
         </li>
         <li><a href="#">Portfolio</a></li>
         <li><a href="#">Contact</a></li>
      </ul>
   </body>
</html>

Download Code Run Code

<<< JQuery UI DatepickerJQuery UI Progressbar >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .