TaijaQ
6/4/2017 - 1:20 AM

Animated drop down

Animated drop down

animated_drop_down.js
content_copyfile_download
$(function() {
    $("#item").click(function() {
        $("#submenu").slideToggle(500);
    });
});
animated_drop_down.html
content_copyfile_download
<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
    </head>
    <body>
    <div class="menu">
      <div id="item">Dropdown</div>
      <div id="submenu">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>
    </body>
</html>
animated_drop_down.css
content_copyfile_download
#item {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}
#item:hover, #item:focus {
    background-color: #3e8e41;
}
.menu {
    position: relative;
    display: inline-block;
}
#submenu {
    display: none;
    position: absolute;
    background-color: #3e8e41;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
#submenu a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
#submenu a:hover {
    background-color: #4CAF50
}