CSS and jQuery slide out and down animated menu

Find out more about...Home Page

Create an animated slide out and down menu using just three files.

Introduction

  • Learn about CSS transform properties to animate height and width
  • Learn about jQerry methods for manipulatiing CSS properties and showing and hiding content
  • Cretae a fully usable menu system for mobile and PC.
    • An animated menu can improve the user experience and make your site look more Professional. This menu has both normal and image buttons and is good for PC and mobile devices.When closed, a simple "hamburger" button is visible, this will open the menu when tapped or clicked.
      It is also a good way to learn some jQuery techniques for toggling content.

      Demo

      CSS slide out and down menu

      CSS slide out and down menu

      HTML

      The HTML code for the menu is shown below, a checkbox is used to toggle the menu, if JavaScript has been disabled by trhe user. An unordered list is used for the button style menu. An unordered list is also used for the image buttons with the addition of a span element that form the image caption.

      1.  <div id="wrapper">
      2. <!-- divs for the close button and the hamburger icon -->
      3. <div><img id="closeIcon" src="images/cross.png" alt="close"/></div>
      4. <input type="checkbox" id="menuToggle">
      5. <label for="menuToggle" class="menuIcon"><img id="iconGraphic" src="iconWhite.png"/></label>
      6. <!-- normal buttons -->
      7. <nav class="menu">
      8. <ul class="btnMenu">
      9. <li><a href="#" class="active">Home</a></li>
      10. <li><a href="#">Services</a></li>
      11. <li><a href="#">About me</a></li>
      12. </ul>
      13. <!-- image buttons -->
      14. <ul class= "imgBtnMenu">
      15. <li><a href="#"><img src="images/horse.jpg" width="125px"/>
      16. <span class="caption">Landscape photography</span></a>
      17. </li>
      18. <li><a href="#"><img src="images/tram.jpg" width="125px"/>
      19. <span class="caption">Photo restoration</span></a>
      20. </li>
      21. </ul>
      22. </nav>
      23. </div>

      CSS

      The CSS code is shown below. The menu is contained whithin a div that has an ID of "Wrapper", this is given an absolute position so that it can be positioned on the page and the other page content will be below it.
      Inside the "wrapper" div is a div with a class of "menu", this div is collapsed in it's initial state. An overflow of "hidden" and zero height and width acheive this collapsed state.
      A transition propery is used to control the width and height of the menu when it is oppening. The first property in the height setting creates a delay of 0.5 seconds so that the menu expands to the right before dropping down.The second property is the setting for the duration of the transition and the final setting is for the easing function, in this case "ease-in", this gives a slow start to the animation and then it speeds up.

      1. /* menu styles ------------------------------------------------------------------- */
      2.  
      3. /* sets the menu position and width*/
      4. #wrapper{
      5. position: absolute;
      6. top:2.9em;
      7. left: 0.2em;
      8. width: 20em;
      9. }
      10. .menu{
      11. overflow: hidden;
      12. background:#ACE4AD;
      13. border-top: solid 1.5em green;
      14. border-left: solid 1.3em green;
      15. border-right: solid thin green;
      16. border-bottom: solid thin green;
      17. width: 0;
      18. height: 0;
      19. -webkit-transition: width 0.5s ease-in, height 0.5s 0.5s ease-in; /* Safari */
      20. transition: width 0.5s ease-in, height 0.5s 0.5s ease-in;
      21. }
      22.  
      23. nav .btnMenu {
      24. list-style-type: none;
      25. width: 18em;
      26. padding: 0;
      27. }
      28.  
      29. nav .btnMenu li a{
      30. color: white;
      31. border-radius: 5px;
      32. border-bottom: solid 1px white;
      33. padding: 0.5em;
      34. background: green;
      35. margin-left: 0.5em;
      36. display: block;
      37. width: 100%;
      38. text-decoration: none;
      39. -webkit-transition: margin-left 0.3s linear, background 0.5s linear, border-radius 0.5 s linear;
      40. transition: margin-left 0.3s linear, background 0.5s linear, border-radius 0.5s linear ;
      41. }
      42. nav .btnMenu li a:hover{
      43. border-radius: 0px;
      44. background:#3A6898;
      45. margin-left: 0.7em;
      46. }
      47.  
      48. #menuToggle{
      49. display: none;
      50. }
      51. /*toggles the menu's width and height*/
      52. #menuToggle:checked ~ .menu{
      53. width: 20em;
      54. height: 18em;
      55. }
      56.  
      57. /* hamburger styling */
      58. .menuIcon{
      59. position: absolute;
      60. background: green;
      61. padding-left: 1em;
      62. padding-top: 1em;
      63. width: 2em;
      64. height: 2em;
      65. z-index: 10;
      66. }
      67. .menuIcon:hover{
      68. background: blue;
      69. width: 2em;
      70. height: 2em;
      71. }
      72. .btnMenu .active{
      73. width: 97%;
      74. border-left: solid 0.5em white;
      75. }
      76. /* Hamburger graphic ------------------------------------ */
      77. #iconGraphic{
      78. width: 15px
      79. }
      80. #closeIcon{
      81. position: absolute;
      82. width: 40px;
      83. height: 40px;
      84. color:white;
      85. top:0.01em;
      86. left:18.5em;
      87. z-index: 11;
      88. }
      89. /* image button styles --------------------------------------------------------------------- */
      90. .imgBtnMenu{
      91. list-style-type: none;
      92. padding: 0;
      93. margin-left: 1.5em;
      94. }
      95. .imgBtnMenu li{
      96. padding: 0;
      97. margin: 0;
      98. border: solid 5px white;
      99. Height: 110px;
      100. float: left;
      101. box-shadow: 5px 5px 5px #888888;
      102. }
      103. .imgBtnMenu li a{
      104. position: relative;
      105. opacity: 0.7;
      106. filter: alpha(opacity=70); /* For IE8 and earlier */
      107. -webkit-transition: opacity 0.3s linear;
      108. transition: opacity 0.3s linear;
      109. }
      110. .imgBtnMenu li a:hover{
      111. opacity: 1;
      112. filter: alpha(opacity=100); /* For IE8 and earlier */
      113. }
      114. /* Image button caption styling ---------------------------- */
      115. .caption{
      116. width: 100%;
      117. padding-top: 0.2em;
      118. text-align: center;
      119. color: black;
      120. position: absolute;
      121. left: 0;
      122. bottom: 0;
      123. background: white;
      124. }

      Jquery

      The jQuery file only has twenty lines of code and controls the toggling of the menu and close buttons.The enite code is placed in the "document ready" function that loads once the rest of the page has loaded.
      The first thing the code does is hide the close button, this is in a div with an Id of "closeIcon", next a click event handler is attached to the menu icon, this acts as an "open" button. When clicked the open button is hidden and the close icon appears, there is a delay of 1 second to allow time for the menu to open.
      The next action shows the image buttons. Finally we make the cursor's hover state into a pointer and tell the menu to go to the specified height and width using the jQuery .CSS method.

      1. $( document ).ready(function() {
      2. $('#closeIcon').hide();
      3. $(".menuIcon").click( function() {
      4. $('.menuIcon').hide();
      5. $('#closeIcon').delay(1000).show(0);
      6. $('.imgBtnMenu').show();
      7. $('#closeIcon').css("cursor","pointer")
      8. $('.menu').css({'width':'20em', 'height':'18em'
      9. })
      10. });
      11. $("#closeIcon").click( function() {
      12. $('.menuIcon').delay(1000).show(0);
      13. $('#closeIcon').hide();
      14. $('.imgBtnMenu').hide();
      15. $('.menu').css({'width':'0', 'height':'0'
      16. })
      17. });
      18. });

      Conclussion

      Menus are a good way to learn some of the fun things that can be done with just a few lines of jQuery code. CSS tramsforms are useful for many things but can be confusing at first. Starting with a simple technique is the best way to start.

      resources

      Download files

      Today's fruits are: