Jquery UI Menu

Date Published: 09/05/2020Published By: JaiSchool

Jquery UI provides a widget (method) to design navbar in Jquery UI. The method is menu().

Documentation for menu in Jquery UI

  • Use UL or OL tag and give id value to select and apply menu() method/widget.
    <div class="menu"></div>
  • List menu items in the LI tag.
    <div class="menu"><li>Home</li></div>
  • To make menu items clickable, its text should be surrounded by an anchor tag. And anchor tag should be in a DIV.
    <div class="menu">
    <li><div>
    <a href="#">Home</a>
    </div></li>
    </div>
  • Finally, Use the nav() method in the UL element by selecting it in the Jquery.
  • Use some CSS for menus and to remove anchor text default design. See the example below.

Example-

<!DOCTYPE html>
<html>
<head>
  <title>Jquery UI Menu</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
  <style>
  	#ui-menu{width:300px;}
  	#ui-menu a{text-decoration:none;font-size:25px;}
  </style>
</head>
<body>

<ul id="ui-menu">
	<li><div><a href="#">Home</a></div></li>
	<li><div><a href="#">HTML</a></div></li>
	<li><div><a href="#">CSS</a></div></li>
	<li><div><a href="#">JAVASCRIPT</a></div></li>
	<li><div><a href="#">BOOTSTRAP</a></div></li>
</ul>

<script>
	$(document).ready(function(){
		$("#ui-menu").menu();
	});
	</script>
</body>
</html>

To make a menu dropdown, just start another UL tag before the ending LI tag. and list dropdown menus the same way. See this example.

<!DOCTYPE html>
<html>
<head>
  <title>Jquery UI Menu</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
  <style>
    #ui-menu{width:300px;}
    #menu-dropdown{width:200px;text-align:center;}
    #ui-menu a{text-decoration:none;font-size:25px;}
  </style>
</head>
<body>

<ul id="ui-menu">
  <li><div><a href="#">Home</a></div></li>
  <li><div><a href="#">HTML</a></div>
      <ul id="menu-dropdown">
        <li><div><a href="#">HTML4</a></div></li>
        <li><div><a href="#">HTML5</a></div></li>
      </ul>
  </li>
  <li><div><a href="#">CSS</a></div></li>
  <li><div><a href="#">JAVASCRIPT</a></div></li>
  <li><div><a href="#">BOOTSTRAP</a></div></li>
</ul>

<script>
  $(document).ready(function(){
    $("#ui-menu").menu();
  });
  </script>
</body>
</html>
OptionsValue
iconsJquery UI icons
disabledtrue and false
positionExample:-
my: "left top", at: "right-30 top+10"

icons Option

When a menu has a drop-down menu. Then you can insert an icon to indicate your users about it. For this, use the icons option. You can use Jquery UI icons in its value.

<!DOCTYPE html>
<html>
<head>
  <title>Jquery UI Menu</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
  <style>
    #ui-menu{width:300px;}
    #menu-dropdown{width:200px;text-align:center;}
    #ui-menu a{text-decoration:none;font-size:25px;}
  </style>
</head>
<body>

<ul id="ui-menu">
  <li><div><a href="#">Home</a></div></li>
  <li><div><a href="#">HTML</a></div>
      <ul id="menu-dropdown">
        <li><div><a href="#">HTML4</a></div></li>
        <li><div><a href="#">HTML5</a></div></li>
      </ul>
  </li>
  <li><div><a href="#">CSS</a></div></li>
  <li><div><a href="#">JAVASCRIPT</a></div></li>
  <li><div><a href="#">BOOTSTRAP</a></div></li>
</ul>

<script>
  $(document).ready(function(){
    $("#ui-menu").menu({
      icons:{submenu:"ui-icon-circle-arrow-e"}
    });
  });
  </script>
</body>
</html>

disabled Option

This option has two values - true and false (default). When you set its value to true then it will disable the menu.

<!DOCTYPE html>
<html>
<head>
  <title>Jquery UI Menu</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
  <style>
    #ui-menu{width:300px;}
    #menu-dropdown{width:200px;text-align:center;}
    #ui-menu a{text-decoration:none;font-size:25px;}
  </style>
</head>
<body>

<ul id="ui-menu">
  <li><div><a href="#">Home</a></div></li>
  <li><div><a href="#">HTML</a></div>
      <ul id="menu-dropdown">
        <li><div><a href="#">HTML4</a></div></li>
        <li><div><a href="#">HTML5</a></div></li>
      </ul>
  </li>
  <li><div><a href="#">CSS</a></div></li>
  <li><div><a href="#">JAVASCRIPT</a></div></li>
  <li><div><a href="#">BOOTSTRAP</a></div></li>
</ul>

<script>
  $(document).ready(function(){
    $("#ui-menu").menu({
      icons:{submenu:"ui-icon-circle-arrow-e"},
      disabled:true,
    });
  });
  </script>
</body>
</html>

position Option

You can define drop-down menu position from the associated parent menu item.

<!DOCTYPE html>
<html>
<head>
  <title>Jquery UI Menu</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
  <style>
    #ui-menu{width:300px;}
    #menu-dropdown{width:200px;text-align:center;}
    #ui-menu a{text-decoration:none;font-size:25px;}
  </style>
</head>
<body>

<ul id="ui-menu">
  <li><div><a href="#">Home</a></div></li>
  <li><div><a href="#">HTML</a></div>
      <ul id="menu-dropdown">
        <li><div><a href="#">HTML4</a></div></li>
        <li><div><a href="#">HTML5</a></div></li>
      </ul>
  </li>
  <li><div><a href="#">CSS</a></div></li>
  <li><div><a href="#">JAVASCRIPT</a></div></li>
  <li><div><a href="#">BOOTSTRAP</a></div></li>
</ul>

<script>
  $(document).ready(function(){
    $("#ui-menu").menu({
      icons:{submenu:"ui-icon-circle-arrow-e"},
      position: { my: "left top", at: "right-30 top+10" }
    });
  });
  </script>
</body>
</html>

Also, learn-