Results 1 to 1 of 1

Thread: How to make Drop Down Navigation with simple JQUERY

  1. #1

    How to make Drop Down Navigation with simple JQUERY

    It is a simple drop down navigation menu, It shows the vertical sub categories when you'll place the mouse on any category . It also has a focus or click effect. So lets start.
    Click image for larger version. 

Name:	Drop Down Navigation with simple JQUERY.jpg 
Views:	167 
Size:	10.5 KB 
ID:	1346
    It is very simple, just follow these steps
    Paste The Following Code In <head> tag

    HTML Code:
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js">
    </script>
    <script type="text/javascript">
      $(function() {
        //We initially hide the all dropdown menus
        $('#dropdown_nav li').find('.sub_nav').hide();
    
        //When hovering over the main nav link we find the dropdown menu to the corresponding link.
        $('#dropdown_nav li').hover(function() {
          //Find a child of 'this' with a class of .sub_nav and make the beauty fadeIn.
          $(this).find('.sub_nav').fadeIn(100);
        }
                                    , function() {
                                      //Do the same again, only fadeOut this time.
                                      $(this).find('.sub_nav').fadeOut(50);
                                    }
                                   );
      }
       );
    </script>
    <style>
      #dropdown_nav a {
     font-family:Arial, Sans-Serif;
            font-size:15px;
            font-weight:bold;
            color:#525252;
            text-decoration:none;
          }
          #dropdown_nav {
            width:960px;
            padding:0px;
            display:inline-block;
            list-style:none;
            -moz-box-shadow:inset 0px 0px 1px #fff;
            -webkit-box-shadow:inset 0px 0px 1px #fff;
            border:1px solid #ccc;
            -moz-border-radius:5px;
            -webkit-border-radius:5px;
            background:#e2e2e2;
            background:-moz-linear-gradient(#f3f3f3, #e2e2e2);
            background:-webkit-gradient(linear, 0 0, 0 100%, from(#f3f3f3), to(#e2e2e2));
          }
      
          #dropdown_nav li {
      padding:10px 0px 10px 0px;
      float:left;
      position:relative;
      display:inline-block;
          }
      
          #dropdown_nav li a {
            padding:10px 15px 10px 15px;
            text-shadow:-1px 1px 0px #f6f6f6;
            -moz-box-shadow:inset 0px 0px 1px #fff;
            -webkit-box-shadow:inset 0px 0px 1px #fff;
            border-right:1px solid #ccc;
          }
          #dropdown_nav li a:hover {
            background:#f9f9f9;
            background:-moz-linear-gradient(#f9f9f9, #e8e8e8);
            background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9f9f9), to(#e8e8e8));
          }
          #dropdown_nav li a:active {
            background:#e2e2e2;
            background:-moz-linear-gradient(#e2e2e2, #f3f3f3);
            background:-webkit-gradient(linear, 0 0, 0 100%, from(#e2e2e2), to(#f3f3f3));
          }
      
          #dropdown_nav li a.first {
            -moz-border-radius:5px 0px 0px 5px;
            -webkit-border-radius:5px 0px 0px 5px;
          }
          /*#dropdown_nav li a.last {
          -moz-border-radius:0px 5px 5px 0px;
          -webkit-border-radius:0px 5px 5px 0px;
        }
          */
      
          /* Sub-Nav styling */
          #dropdown_nav .sub_nav {
            width:160px;
            padding:0px;
            position:absolute;
            top:38px;
            left:0px;
            border:1px solid #ccc;
            background:#e2e2e2;
          }
      
          #dropdown_nav .sub_nav li {
            width:160px;
            padding:0px;
          }
      
          #dropdown_nav .sub_nav li a {
            display:block;
            border-bottom:1px solid #ccc;
            background:-moz-linear-gradient(#f3f3f3, #e2e2e2);
            background:-webkit-gradient(linear, 0 0, 0 100%, from(#f3f3f3), to(#e2e2e2));
          }
          #dropdown_nav .sub_nav li a:hover {
            background:#f9f9f9;
            background:-moz-linear-gradient(#f9f9f9, #e8e8e8);
            background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9f9f9), to(#e8e8e8));
          }
          #dropdown_nav .sub_nav li a:active {
            background:#e2e2e2;
            background:-moz-linear-gradient(#e2e2e2, #f3f3f3);
            background:-webkit-gradient(linear, 0 0, 0 100%, from(#e2e2e2), to(#f3f3f3));
          }
    </style>
    following code in body tag
    HTML Code:
    <!-- Navigation Start -->
    <ul id="dropdown_nav">
      <li><a class="first" href="http://www.adminspoint.com/">Home</a></li>
      <li><a href="#">Tutorials</a>
       <ul class="sub_nav">
        <li><a href="#"> #1</a></li>
        <li><a href="#"> #2</a></li>
        <li><a href="#"> #3</a></li>
        <li><a href="#">#4</a></li>
        <li><a href="#"> #5</a></li>
        <li><a href="#">#6</a></li>
        <li><a href="#">#7</a></li>
       </ul>
      </li>
      <li><a href="#">Artciles</a>
       <ul class="sub_nav">
        <li><a href="#">Announcements #1</a></li>
        <li><a href="#">Announcements #2</a></li>
        <li><a href="#">Announcements #3</a></li>
        <li><a href="#">Announcements #4</a></li>
       </ul>
      </li>
      <li><a href="#">Freebies</a>
      </li>
      <li><a class="last" href="#">Other Stuff</a>
       <ul class="sub_nav">
        <li><a href="#">Other Stuff #1</a></li>
        <li><a href="#">Other Stuff #2</a></li>
        <li><a href="#">Other Stuff #3</a></li>
        <li><a href="#">Other Stuff #4</a></li>
       </ul>
      </li>
     </ul>
    Attached Files Attached Files

Similar Threads

  1. We just have one life , Keep it Simple.
    By A Khan in forum Random Talk
    Replies: 0
    Last Post: 11-21-2013, 04:55 PM
  2. Replies: 0
    Last Post: 11-05-2013, 05:16 AM
  3. How to make Simple SSH Web Proxy (Tutorial)
    By Lienia henna in forum Server Administration
    Replies: 0
    Last Post: 11-01-2013, 05:08 PM
  4. Replies: 0
    Last Post: 10-14-2010, 04:14 PM
  5. Creating a simple feedback form using PHP
    By Madiha Fatima in forum PHP
    Replies: 0
    Last Post: 10-05-2010, 12:20 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •