menu

Thursday, 9 October 2014

JQuery Collapsing menu with Toggle

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-EN">
<head>
<script src="jquery-1.2.1.min.js" type="text/javascript"></script>
<script src="menu.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JQuery Collapsing menu with Toggle</title>
</head>
<body>
<ul id="menu">
  <li> <a href="#">Weblog Tools</a>
    <ul>
      <li><a href="#">PivotX</a></li>
      <li><a href="#">WordPress</a></li>
      <li><a href="#">Textpattern</a></li>
      <li><a href="#">Typo</a></li>
    </ul>
  </li>
  <li> <a href="#">Programming Languages</a>
    <ul>
      <li class="current"><a href="#">PHP</a></li>
      <li><a href="#">Ruby</a></li>
      <li><a href="#">Python</a></li>
      <li><a href="#">PERL</a></li>
      <li><a href="#">Java</a></li>
      <li><a href="#">C#</a></li>
    </ul>
  </li>
  <li><a href="#">Marco's blog (no submenu)</a></li>
  <li> <a href="#">Cool Stuff</a>
    <ul>
      <li><a href="#">Apple</a></li>
      <li><a href="#">Nikon</a></li>
      <li><a href="#">XBOX360</a></li>
      <li><a href="#">Nintendo</a></li>
    </ul>
  </li>
  <li> <a href="#">Search Engines</a>
    <ul>
      <li><a href="#">Yahoo!</a></li>
      <li><a href="#">Google</a></li>
    </ul>
  </li>
</ul>
</body>
</html>

DOWNLOAD SOURCE CODE

No comments:

Post a Comment