Menu Navigasi Dropdown

Baca Juga Artikel Menarik Lainnya :

CSS

/* Menu Dropdown */
  .cf:before,
  .cf:after {
      content: " ";
      display: table;
  }

  .cf:after {
      clear: both;
  }

  .cf {
      *zoom: 1;
  }

  .menu,
  .submenu {
   margin: 0;
   padding: 0;
   list-style: none;
  }

  .menu {   
   margin: 50px auto;
   width: 800px;   
   width: -moz-fit-content;
   width: -webkit-fit-content;
   width: fit-content; 
  }

  .menu > li {
   background: #34495e;
   float: left;
   position: relative;
   transform: skewX(25deg);
  }

  .menu a {
   display: block;
   color: #fff;
   text-transform: uppercase;
   text-decoration: none;
   font-family: Arial, Helvetica;
   font-size: 14px;
  }  

  .menu li:hover {
   background: #e74c3c;
  }  

  .menu > li > a {
   transform: skewX(-25deg);
   padding: 1em 2em;
  }

  /* Dropdown */
  .submenu {
   position: absolute;
   width: 200px;
   left: 50%; margin-left: -100px;
   transform: skewX(-25deg);
   transform-origin: left top;
  }

  .submenu li {
   background-color: #34495e;
   position: relative;
   overflow: hidden;  
  }      

  .submenu > li > a {
   padding: 1em 2em;   
  }

  .submenu > li::after {
   content: '';
   position: absolute;
   top: -125%;
   height: 100%;
   width: 100%;   
   box-shadow: 0 0 50px rgba(0, 0, 0, .9);   
  }  

  .submenu > li:nth-child(odd){
   transform: skewX(-25deg) translateX(0);
  }

  .submenu > li:nth-child(odd) > a {
   transform: skewX(25deg);
  }

  .submenu > li:nth-child(odd)::after {
   right: -50%;
   transform: skewX(-25deg) rotate(3deg);
  }    

  .submenu > li:nth-child(even){
   transform: skewX(25deg) translateX(0);
  }

  .submenu > li:nth-child(even) > a {
   transform: skewX(-25deg);
  }

  .submenu > li:nth-child(even)::after {
   left: -50%;
   transform: skewX(25deg) rotate(3deg);
  }

  /* Show dropdown */
  .submenu,
  .submenu li {
   opacity: 0;
   visibility: hidden;   
  }

  .submenu li {
   transition: .2s ease transform;
  }

  .menu > li:hover .submenu,
  .menu > li:hover .submenu li {
   opacity: 1;
   visibility: visible;
  }  

  .menu > li:hover .submenu li:nth-child(even){
   transform: skewX(25deg) translateX(15px);   
  }

  .menu > li:hover .submenu li:nth-child(odd){
   transform: skewX(-25deg) translateX(-15px);   
  }

HTML

<ul class="menu cf">
    <li><a href="">Menu item</a></li>
    <li>
        <a href="">Menu item</a>
        <ul class="submenu">
            <li><a href="">Submenu item</a></li>
            <li><a href="">Submenu item</a></li>
            <li><a href="">Submenu item</a></li>
            <li><a href="">Submenu item</a></li>
        </ul>         
    </li>
    <li><a href="">Menu item</a></li>
    <li><a href="">Menu item</a></li>
    <li><a href="">Menu item</a></li>
</ul>

JS

<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

DEMO 

Demikianlah Artikel Menu Navigasi Dropdown

Sekian Artikel Menu Navigasi Dropdown, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian postingan Androkomp.net kali ini semoga bisa bermanfaat.

Anda sedang membaca artikel Menu Navigasi Dropdown dan artikel ini url permalinknya adalah https://trajumas11.blogspot.com/2014/08/menu-navigasi-dropdown.html Semoga artikel ini bisa bermanfaat.

Tag : Info, Tips Blogger,