Home / Articles / Programming languages / Markup languages / HTML & CSS / How to create animated drop-down menu using only CSS3

How to create animated drop-down menu using only CSS3

How to create animated drop-down menu using only CSS3
 
How to create animated drop-down menu using only CSS3
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


This article describes how to create a simple drop-down menu with simple animation using only CSS3 without JavaScript.

This animated drop-down menu is an improved version of the old drop-down menu. It has almost the same HTML structure and basic CSS styles as the old one.

HTML structure

The current menu consists of one simple div element (with specific id attribute "top-menu") and bulleted multi-level lists inside of this element.

Here is HTML code of such structure:

<div id="top-menu">
  <ul>
    <li>
      <ul>
        <li><a href="#">Ruby</a></li>
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li>
          <ul>
            <li><a href="#">CakePHP</a></li>
            <li><a href="#">Symfony</a></li>
            <li><a href="#">Zend</a></li>
            <li><a href="#">CodeIgniter</a></li>
          </ul>
          <a href="#">PHP</a>
        </li>
        <li><a href="#">JavaScript</a></li>
        <li><a href="#">C++</a></li>
      </ul>
      <a href="#">Languages</a>
    </li>
    <li>
      <ul>
        <li><a href="#">Chrome</a></li>
        <li>
          <ul>
            <li><a href="#">Mobile</a></li>
            <li><a href="#">Desktop</a></li>
          </ul>
          <a href="#">Opera</a>
        </li>
        <li><a href="#">IE</a></li>
        <li><a href="#">Firefox</a></li>
        <li><a href="#">Safari</a></li>
      </ul>
      <a href="#">Browsers</a>
   </li>
   <li>
     <ul>
       <li><a href="#">Windows</a></li>
       <li><a href="#">Linux</a></li>
       <li><a href="#">FreeBSD</a></li>
       <li><a href="#">Mac OS</a></li>
     </ul>
     <a href="#">Operation systems</a>
   </li>
   <li><a href="#">Others</a></li>
  </ul>
</div>

CSS styles

For the current menu, CSS styles are divided into three logic groups:

  1. Basic CSS styles. They are called the "engine" of the animated drop-down menu. These styles are basic to make it work.
  2. CSS styles for design. As can be seen from the name, these styles are responsible only for design of the animated drop-down menu.
  3. CSS styles for animation. Similarly, the name tells us that these styles build animation for the menu.

Basic CSS styles

There is no need to explain what they do, because they work almost in the same way as the styles for old drop-down menu described in the previous article: Simple drop-down menu using only CSS.

CSS styles:

#top-menu ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

#top-menu > ul > li {
  float: left;
}

#top-menu > ul > li > ul {
  top: 100%;
  left: 0;
}

#top-menu li {
  position: relative;
}

#top-menu a {
  display: block;
  white-space: nowrap;
}

#top-menu ul li li ul {
  top: 0;
  left: 100%;
}

#top-menu ul ul {
  visibility: hidden;
  position: absolute;
}

#top-menu li:hover > ul {
  visibility: visible;
}

Live demo

CSS styles for design

The menu design uses two new modern features of CSS: blocks with rounded corners and RGBA for semi-transparent background colors.

The styles in the current group were very cleverly developed. As can be seen from HTML code above, there are no additional CSS classes for bulleted lists which have some bulleted lists inside themselves (sub-lists) to build sub-menus. In majority of traditional menus, such CSS classes show that some menu items have sub-menus and mark them with some signs which indicate to the user (website visitor) that these menu items can be extended with sub-menus if the user hovers over them with cursor. The menu in this article does this automatically by using only CSS styles. It marks such menu items with arrows.

CSS styles:

#top-menu {
  padding: 0 5px;
}

#top-menu,
#top-menu > ul {
  background-color: #9DA4AD;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

#top-menu:after {
  content: "";
  clear: both;
  display: block;
}

#top-menu a {
  text-decoration: none;
  color: #FFFFFF;
  padding: 5px 10px 5px 10px;
  line-height: 1.2;
}

#top-menu > ul > li > a {
  padding: 5px 10px;
  margin: 2px 0;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

#top-menu > ul > li > ul + a {
  padding-bottom: 7px;
  margin-bottom: 0;
}

#top-menu > ul > li > ul + a:after {
  content: " \25bc";
}

#top-menu > ul > li:hover > a {
  background-color: #4672B3;
}

#top-menu > ul > li:hover > ul + a {
  -webkit-border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;
}

#top-menu > ul > li > ul {
  min-width: 100%;
  background-color: rgb(70, 114, 179);
  background-color: rgba(70, 114, 179, 0.8);
}

#top-menu > ul > li li > ul + a:after {
  content: " \25b6";
}

#top-menu > ul > li > ul > li:last-child,
#top-menu > ul > li > ul {
  -webkit-border-radius: 0 0 5px 5px;
  -moz-border-radius: 0 0 5px 5px;
  border-radius: 0 0 5px 5px;
}

#top-menu ul li li:hover,
#top-menu ul li li ul,
#top-menu ul li li ul li:hover {
  background-color: rgb(124, 147, 178);
  background-color: rgba(124, 147, 178, 0.8);
}

Live demo

CSS styles for animation

This is the last group and it has less CSS styles than previous ones. It builds some simple animation for the appearing sub-menus.

CSS styles:

#top-menu > ul > li > ul,
#top-menu ul li li ul {
  -webkit-transition: all 300ms;
  -moz-transition: all 300ms;
  -o-transition: all 300ms;
  transition: all 300ms;
}

#top-menu > ul > li > ul {
  top: 400%;
  opacity: 0;
}

#top-menu > ul > li:hover > ul {
  top: 100%;
  opacity: 1;
}

#top-menu ul li ul li ul {
  left: 400%;
  opacity: 0;
}

#top-menu ul li ul li:hover ul {
  left: 100%;
  opacity: 1;
}

Live demo

Conclusion

The animated drop-down menu in this article was developed to be as simple as possible. As was mentioned above, it shows arrows for menu items which have sub-menus, and does this automatically which makes it easy to use.

Also, this menu has one very convenient feature: it doesn't have fixed widths, heights and font sizes which makes it simple to change its font size to anyone and it won't ruin the design of the menu.

Here are CSS styles which change the font size of the whole menu without the need to edit the previous styles of the menu:

#top-menu a {
  font-size: 22px;
}

Live demo

The following archive contains all the examples above:


 

Read also

Animation in CSS3

Animation in CSS3

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation