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
    <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() {
          function() {$("li.subnav").slideDown();},
          function() {$("li.subnav").slideUp();}
    <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>
               <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>
          <li><a href="#">Link 4</a></li>
          <li><a href="#">Link 5</a></li>


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.