menu with css3 submenu animations

In this example below you will see how to do a menu with css3 submenu animations with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by ind88, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ind88 ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>menu with css3 submenu animations</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="primary_menu">
  <ul id="menu-primary-menu" class="menu">
    <li id="menu-item-8" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-6 current_page_item menu-item-8"><a href="#">Home</a></li>
    <li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-29"><a href="#">Portfolio</a>
      <ul class="sub-menu">
        <li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32"><a href="#">Webdesign</a></li>
        <li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31"><a href="#">Grafisch</a></li>
        <li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-30"><a href="#">Marketing</a>
          <ul class="sub-menu">
            <li id="menu-item-13" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-13"><a href="#">Marketing facts</a></li>
            <li id="menu-item-14" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14"><a href="#">SEO</a></li>
            <li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34"><a href="#">SEA</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33"><a href="#">About</a></li>
    <li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><a href="#">Contact</a></li>
  </ul>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/ind88/menu-with-css3-submenu-animations-yXLOXQ */
body{font-family:arial; text-align:center; margin:30px auto;}
ul{margin:0; padding:0; list-style-type:none; text-align:left;}
.primary_menu {display:inline-block; background:#eee;}
.primary_menu > ul li:hover > ul { opacity: 1; visibility: visible; -webkit-transform: perspective(200px) translateZ(0px) translateY(0px) rotateX(0deg); -moz-transform: perspective(200px) translateZ(0px) translateY(0px) rotateX(0deg); -ms-transform: perspective(200px) translateZ(0px) translateY(0px) rotateX(0deg); -o-transform: perspective(200px) translateZ(0px) translateY(0px) rotateX(0deg); transform: perspective(200px) translateZ(0px) translateY(0px) rotateX(0deg); }
.primary_menu > ul > li { display: inline-block; position: relative; }
.primary_menu > ul > li > a { display: block; white-space: nowrap; margin: 0; padding: 0 20px; font-size: 16px; color: #fff; color: #ff5a00; line-height: 40px; text-decoration: none; border-bottom: 2px solid transparent; -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -ms-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; }
.primary_menu > ul > li > a:hover { color: black; border-bottom-color: #ff5a00; }
.primary_menu > ul > li.menu-item-has-children > a { padding-right: 36px; position: relative; }
.primary_menu > ul > li.menu-item-has-children > a:after { content: ''; position: absolute; width: 6px; height: 6px; border-top: 2px solid #ff5a00; border-right: 2px solid #ff5a00; top: 50%; right: 18px; margin-top: -5px; -moz-transform: rotate(135deg); -webkit-transform: rotate(135deg); -o-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -ms-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; }
.primary_menu > ul > li.menu-item-has-children > a:hover:after { border-color: black; }
.primary_menu > ul > li.current-menu-item > a, .primary_menu > ul > li.current_page_item > a, .primary_menu > ul > li.current-menu-ancestor > a, .primary_menu > ul > li.current_page_ancestor > a { color: black; border-bottom-color: #ff5a00; }
.primary_menu > ul > li.current-menu-item > a:after, .primary_menu > ul > li.current_page_item > a:after, .primary_menu > ul > li.current-menu-ancestor > a:after, .primary_menu > ul > li.current_page_ancestor > a:after { border-color: black; }
.primary_menu > ul > li:not(:first-child) { margin: 0 0 0 20px; }
.primary_menu > ul > li ul { opacity: 0; visibility: hidden; -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -ms-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; -webkit-transform: perspective(200px) translateZ(0px) translateY(0px) rotateX(-90deg); -moz-transform: perspective(200px) translateZ(0px) translateY(0px) rotateX(-90deg); -ms-transform: perspective(200px) translateZ(0px) translateY(0px) rotateX(-90deg); -o-transform: perspective(200px) translateZ(0px) translateY(0px) rotateX(-90deg); transform: perspective(200px) translateZ(0px) translateY(0px) rotateX(-90deg); -webkit-transform-origin: top center; -moz-transform-origin: top center; -ms-transform-origin: top center; -o-transform-origin: top center; transform-origin: top center; }
.primary_menu > ul > li > ul { position: absolute; z-index: 10; }
.primary_menu > ul > li > ul li.current-menu-item > a, .primary_menu > ul > li > ul li.current_page_item > a, .primary_menu > ul > li > ul li.current-menu-ancestor > a, .primary_menu > ul > li > ul li.current_page_ancestor > a { background: #cc4800; }
.primary_menu > ul > li > ul li.menu-item-has-children > a { padding-right: 36px; position: relative; }
.primary_menu > ul > li > ul li.menu-item-has-children > a:after { content: ''; position: absolute; width: 6px; height: 6px; border-top: 2px solid #fff; border-right: 2px solid #fff; top: 50%; right: 18px; margin-top: -5px; -moz-transform: rotate(135deg); -webkit-transform: rotate(135deg); -o-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -ms-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; }
.primary_menu > ul > li > ul li ul { -webkit-transform: perspective(100px) translateZ(0px) translateY(0px) rotateY(90deg); -moz-transform: perspective(100px) translateZ(0px) translateY(0px) rotateY(90deg); -ms-transform: perspective(100px) translateZ(0px) translateY(0px) rotateY(90deg); -o-transform: perspective(100px) translateZ(0px) translateY(0px) rotateY(90deg); transform: perspective(100px) translateZ(0px) translateY(0px) rotateY(90deg); -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; }
.primary_menu > ul > li > ul > li { position: relative; }
.primary_menu > ul > li > ul > li > a { display: block; white-space: nowrap; margin: 0; padding: 0 20px; font-size: 16px; color: #fff; line-height: 40px; text-decoration: none; background: #ff5a00; -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -ms-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; }
.primary_menu > ul > li > ul > li > a:hover { background: #cc4800; }
.primary_menu > ul > li > ul > li.current-menu-item > a, .primary_menu > ul > li > ul > li.current_page_item > a { background: #cc4800; }
.primary_menu > ul > li > ul > li ul { position: absolute; z-index: 10; left: 100%; top: 0; }
.primary_menu > ul > li > ul > li ul li { position: relative; }
.primary_menu > ul > li > ul > li ul li a { display: block; white-space: nowrap; margin: 0; padding: 0 20px; font-size: 16px; color: #fff; line-height: 40px; text-decoration: none; background: #ff5a00; -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -ms-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; }
.primary_menu > ul > li > ul > li ul li a:hover { background: #cc4800; }
.primary_menu > ul > li > ul > li ul li.current-menu-item a, .primary_menu > ul > li > ul > li ul li.current_page_item a { background: #cc4800; }

Comments