navigation menu using JQuery

Fri Jan 11, 2013 1:50 am

develop navigation menu using JQueryUI so fast.
javascript code

<html>
<head>
<title>navigation Menu</title>
 
<!--
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
 Note you can download the JQuery package instead of using Google version. --> 
<script src="jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />	
   <script>
  $(function() {
    $( "#navigationMenu" ).menu();
  });
  </script>
  <style>
  .ui-menu { width: 250px; }
  </style>
</head>
<body>
 
<ul id="navigationMenu">
  <li class="ui-state-disabled"><a href="#">Close</a></li>
  <li><a href="#">Home</a></li>
  <li><a href="#">Lastest Posts</a></li>
 
  <li>
    <a href="#">Programming Languages</a>
    <ul>
      <li ><a href="#">C++</a></li>
      <li><a href="#">Java</a></li>
      <li><a href="#" class="ui-state-disabled">ASP</a></li>
    </ul>
  </li>
  <li><a href="#">Contact Us</a></li>
  <li>
    <a href="#">Related</a>
    <ul>
      <li>
        <a href="#">XXXX</a>
        <ul>
          <li><a href="#">YYY</a></li>
          <li><a href="#">YYY</a></li>
          <li><a href="#">YYY</a></li>
        </ul>
      </li>
      <li>
        <a href="#">ZZZZZ</a>
        <ul>
          <li><a href="#">BBBB</a></li>
          <li><a href="#">BBBB</a></li>
          <li><a href="#">BBBB</a></li>
        </ul>
      </li>
      <li><a href="#">NNNNN</a></li>
    </ul>
  </li>
   
</ul>
 
 
</body>
</html>

navigation menu using JQuery

navigation menu using JQuery

Topic Tags