Codeconvey
  • Home
  • Tutorials
    • CSS Slideshow
    • CSS Navigation
    • Modal & Popup
    • Hover Effects
    • HTML Forms
    • Layout
  • CSS Animation
  • How To
  • Resources
No Result
View All Result
Codeconvey
No Result
View All Result

Animated CSS Slide Up and Slide Down Menu

Ashfaq Ahmed by Ashfaq Ahmed
December 18, 2019
in CSS Navigation
0
Animated CSS Slide Up and Slide Down Menu
0
SHARES
0
VIEWS
Share on FacebookShare on Twitter

This tutorial is about creating a smooth and animated slide up and down the menu with the help of CSS and JavaScript. You can use this sliding box to show some quick information.

The sliding menu will work as toggle function of jQuery. It will perform two different functions with the same button. It will Slide Down and Up while clicking. We are also going to build some nice looking animated menu inside the toggle.

This slide down panel included an excellent animated menu. We make these menus with CSS @keyframes animation with nice hover effect. I will guide you how I did that.

It isn’t purely CSS but we added a bit of JavaScript to handle toggle panel function. So this is our JavaScript slide down menu. If you need pure CSS solution then you can refer our previous CSS3 tutorial about creating CSS Transition Slide Down effect.

Let’s go ahead and start building.

Build an Animated CSS Slide Up and Slide Down Menu

Our HTML markup if so easy to understand. We don’t need to write much of HTML code. We try to keep it as simple as possible. First of all, We need to define the main div that holds all the other HTML code. Here we define SlideDownMenu

The next step to define our menus and we follow the standard process by defining ul, li, and anchor link elements. We keep our navigation menu separately by define nav HTML element.

<div class="SlideDownMenu">
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Downloads</a></li>
      <li><a href="#">More</a></li>
      <li><a href="#">Nice staff</a></li>
    </ul>
  </nav>
</div>

After finishing with Navigation, we go ahead building with our toggle button. We will define one main div (MenuTab) for the button which included one child div class name NavTab along with anchor link for a button.

<div class="SlideDownMenu">
    <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Downloads</a></li>
      <li><a href="#">More</a></li>
      <li><a href="#">Nice staff</a></li>
    </ul>
    </nav>
    <div class="MenuTab">
        <div class="NavTab">
          <a href="#"></a>
        </div>
    </div>
</div>

The CSS Styles

Let’s do some styling for the main container and nav. We do position fixed for the container so that it should come down when to scroll down the page. We added some border-top here so it will be visible to the user for understanding it.

The nav HTML element will display none with some background color. We handle this display one into display block by using of jquery toggle function.

  
.SlideDownMenu {
  border-top: 8px solid #8657DB;
  position: fixed;
  top: 0;
  width: 100%;
}
.SlideDownMenu nav {
  background-color: #8657DB;
  display: none;
  height: 100px;
  top: 0;
}

Toggle Button Style

To style the toggle button, first, we need to apply some basic styles like set to float right, some background color, width, and height. Then we will style the buttons by using :before property of CSS.

  
/*Menu Tap*/
.MenuTab {
  float: right;
  margin: 0 40px 0 0;
  width: 40px;
}
/*Nav Tap*/
.NavTab {
    background-color: #8657db;
    border-radius: 0 0 5px 5px;
    height: 40px;
    text-align: center;
    width: 60px;
}
/*Border*/
.NavTab a {
  position: relative;
  padding-left: 25px;
}

.NavTab a:before {
  content: "";
  position: absolute;
  top: 16px;
  left: 0;
  width: 25px;
  height: 0.125em;
  border-top: 0.5em double #333;
  border-bottom: 0.2em solid #333;
}

Animated The Menus

Here is a complete set of CSS for the CSS Slide Down Menu. You can see we used CSS keyframes for a better result. We also used :after element for getting nice looking hover effect.

.SlideDownMenu ul {
    list-style: outside none none;
    margin: 0;
    padding: 22px 0;
    text-align: center;
}
.SlideDownMenu ul li {
  display: inline-block;
}
.SlideDownMenu ul li a {
  position:relative;
  z-index: 1;
  display: block;
  padding: 12px 20px;
  text-decoration: none;
  color: #000;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 10px;
}
.SlideDownMenu ul li a:hover {
  color: #fff;
}
.SlideDownMenu ul li a:after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 1px;
  content: '.';
  color: transparent;
  background: #8e44ad;
  border-radius:5px;
  visibility: none;
  opacity: 0;
  z-index: -1;
  transition: all .5s;
}
.SlideDownMenu ul li a:hover:after {
  opacity: 1;
  visibility: visible;
  height: 100%;
}
/* Keyframes */
@-webkit-keyframes fill {
  0% {
    width: 0%;
    height: 1px;
  }
  50% {
    width: 100%;
    height: 1px;
  }
  100% {
    width: 100%;
    height: 100%;
    background: #333;
  }
}
/* Keyframes */
@-webkit-keyframes circle {
  0% {
    width: 1px;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    height: 1px;
    z-index: -1;
    background: #eee;
    border-radius: 100%;
  }
  100% {
    background: #aaa;
    height: 5000%;
    width: 5000%;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 0;
  }
}

The JavaScript

The JavaScript for CSS Slide Down Menu is so simple. We just used the slideToggle function with fast animation speed. This animation speed can either be slow.

$(function(){
  $('.SlideDownMenu').on('click', '.MenuTab', function () {
    $('nav').slideToggle('fast');
    return false;
  });
});

How you find this menu Tutorial? Let me know if you find something more good looking and better one in below comment section. I will try to come up with some more solution soon.

Demo Download
Previous Post

Simple CSS Tooltip with Arrow Position To the Bottom

Next Post

Advanced CSS Multi Level Dropdown Menu

Next Post
Advanced CSS Multi Level Dropdown Menu

Advanced CSS Multi Level Dropdown Menu

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Subscribe More Tutorials

Subscribe to our mailing list to receives monthly updates direct to your inbox!

You might also like

CSS Flip Animation on Hover – Flipping Card

CSS Flip Animation on Hover – Flipping Card

January 7, 2020
CSS Percentage Circle

Pure CSS Percentage Circle With Animation

January 21, 2023
CSS Glow Button Hover Effect

Pure CSS Button Shine/Glow Effect on Hover

December 23, 2019
Easy to Apply CSS Image Hover Transition Effects

CSS Image Hover Transition Effects

December 5, 2019
Codeconvey

© 2023 Codeconvey.com - All rights reserved.

Navigate Site

  • Home
  • About Us
  • Contact us
  • License
  • Disclaimer
  • DMCA
  • Terms & Conditions

Follow Us

No Result
View All Result
  • Home
  • CSS Animation
  • CSS Navigation
  • HTML Forms
  • Hover Effects
  • CSS Slideshow
  • Layout
  • Modal & Popup
  • How To
  • Resources

© 2023 Codeconvey.com - All rights reserved.