Holla Tech - Learn

Drop-Down Menu
 

Let’s create a simple drop-down menu that will open upon clicking on the menu item.
HTML: 

<div class=“menu”>
  <div id=“item”>Drop-Down</div>
  <div id=“submenu”>
    <a href=“#”>Link 1</a>
    <a href=“#”>Link 2</a>
    <a href=“#”>Link 3</a>
  </div>
</div> 

 

JS: 

$(“#item”).click(function() {
  $(“#submenu”).slideToggle(500);
}); 

 

The code above handles the click event of the id=”item” element and opens/closes the submenu in 500 milliseconds.

NOTE!
Run the code to see it in action. You can also check out the CSS used for styling the items.

BACK NEXT

CLICK ON THE BUTTON BELOW TO GO TO THE jQUERY MAIN COURSE PAGE. 

jQUERY MAIN COURSE PAGE

 


© License: All Rights Reserved 


CONTACT HOLLA TECH – LEARN SUPPORT