Javascript/jQuery Menu

Here’s a working Javascript/jQuery Menu. It’s a horizontal menu with sub-menu items dropping vertically.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>menu demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
  <style>
  .ui-menu { 
      overflow: hidden;
  }
  .ui-menu .ui-menu {
      overflow: visible !important;
  }
  .ui-menu > li { 
      float: left;
      display: block;
      width: auto !important;
  }
  .ui-menu ul li {
      display:block;
      float:none;
  }
  .ui-menu ul li ul {
      left:120px !important;
      width:100%;
  }
  .ui-menu ul li ul li {
      width:auto;
  }
  .ui-menu ul li ul li a {
      float:left;
  }
  .ui-menu > li {
      margin: 5px 5px !important;
      padding: 0 0 !important;
  }
  .ui-menu > li > a { 
      float: left;
      display: block;
      clear: both;
      overflow: hidden;
  }
  .ui-menu .ui-menu-icon { 
      margin-top: 0.3em !important;
  }
  .ui-menu .ui-menu .ui-menu li { 
      float: left;
      display: block;
  }
  </style>
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
 
<ul id="menu">
  <li>
    <div>Home</div>
  </li>
  <li>
    <div>Inventory Management</div>
    <ul id="sub_menu">
      <li>
        <div>Add items</div>
      </li>
      <li>
        <div>Delete items</div>
      </li>
      <li>
        <div>Modify items</div>
      </li>
      <li>
        <div>View items</div>
      </li>
    </ul>
  </li>
  </ul>
 
<script>
$( "#menu" ).menu({position: {at: "left bottom"}});
$( "#menu li" ).hover(function() {
        $(this).find('ul').show();
    },
    function() {
        $(this).find('ul').hide();
});
</script>
</body>
</html>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s