Build a dropdown
menu using a click
event and .toggle()
animation method.
Birdman wants to add a dropdown menu to their home page. Here's what it looks like. Click on the menu icon at the top left to alternate showing and hiding the dropdown menu.
Look at index.html. In the <div class="dropdown">
section, there are two elements: an <img>
element and a <ul class="dropdown-menu">
element. When the <img>
is clicked, we want the <ul class="dropdown-menu">
element to appear.
In app.js, attach an event handler to the <img>
element so that it can respond to a click event.
Inside the click
event handler, toggle
the <ul class="dropdown-menu">
element.
In index.html, add text for more list items in the dropdown menu. We used for Tools, Blog, Careers, About, and Contact. Feel free to use your own.