jQuery – Simple Dropdown Menu

I found a excellent article about creating a drop down menu using jQuery written by Abhishek Bhardwaj. For simplicity, i merge the .js file and the .html into one file.

<!--
  Source article: TW TutorialsWalks - Add JQuery Dropdown effects to Sidebar "sub-links"
  Source link: http://tutorialswalk.info/development/jquery-dropdown-effects-to-sidebar-sub-links/comment-page-1
-->
<html>
  <head>
    <title>Adding JQuery dropdown effect to the sidebar sublibnks | TutorialsWalk | PHP Tutorial</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        $("li.subnav").hide();
        $("li.topnav").hover(
          function() {$("li.subnav").slideDown();},
          function() {$("li.subnav").slideUp();}
        );
      });
    </script>
  </head>
  <body>
    <div id="sidebar">
      <div class="inside">
        <ul id="navigation">
          <li><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li class="topnav"><a href="#">Sub-Links</a>
             <ul>
               <li class="subnav"><a href="#">Sub-Link 1</a></li>
               <li class="subnav"><a href="#">Sub-Link 2</a></li>
               <li class="subnav"><a href="#">Sub-Link 3</a></li>
               <li class="subnav"><a href="#">Sub-Link 4</a></li>
             </ul>
          </li>
          <li><a href="#">Link 4</a></li>
          <li><a href="#">Link 5</a></li>
        </ul>
      </div>
    </div>
  </body>
</html>

 

Simple and concise. Thanks Abhishek Bhardwaj.

Done =)

Reference: TW TutorialsWalks – Add JQuery Dropdown effects to Sidebar “sub-links”

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.