zig zag dropdown menu concept with css

In this article, we will understand the zig zag dropdown menu concept with css with the help of various examples. A dropdown menu allows the user to choose an option from a list.

Following are the examples of zig zag dropdown menu.

Example 1:

<! DOCTYPE html>    
<html>    	
    <head>    	
        <meta http-equiv = "Content-Type"    
            content = "text/html; charset=UTF-8" />    
        <title> Example of  zig zag dropdown menu concept with css </title>    
        <meta name = "description"/>    
        <meta content = "width=800, initial-scale=1"    
        name = "viewport" />     
<style>
@import url(https://fonts.googleapis.com/css?family=Work+Sans:400,300,700|Open+Sans:400italic,300italic);
body { 
  font-family: 'Open Sans', sans-serif;
  background: linear-gradient(90deg, $blue, $yellow);  
margin: 0;
  padding: 0;
font-family: "Montserrat", sans-serif;
color: #fff;
}	
html {
  height: 100%;
  margin: 0;
  width: 100%;
  color: #FFF;
  background: #000;
}
* {
  box-sizing: border-box;
}
h3 {
  font-family: inherit;
  font-weight: 700; 
  color: red;  
  text-align: center;
  letter-spacing: 1px;  
  font-size: 1.1em;
}
h2 {
  font-family: inherit;
  font-weight: 700; 
  color: red;  
  text-align: center;
  letter-spacing: 1px;  
  font-size: 1.1em;
}
.cf:before {
  content: " ";
  display: table;
}
.cf:after {
  content: " ";
  display: table;
}
.cf:after {
  clear: both;
}
a {
  font-family: "Work Sans", sans-serif;
  color: #fff;
  font-weight: 300;
  font-size: 12px;
  text-transform: uppercase;
  text-decoration: none;
  position: absolute;
  z-index: 10;
  top:50px;
  left:50px;
  padding-bottom: 3px;
  border-bottom: 1px solid #fff;
}
.cf {
  *zoom: 1;
}
.menu {
  margin: 0;
  padding: 0;
  list-style: none;
}
.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;
  font-family: 'Work sans', sans-serif;
  text-decoration: none;
  font-family: Arial, Helvetica;
  font-size: 14px;
}		
.menu li:hover {
  background: #e74c3c;
}		
.menu > li > a {
  transform: skewX(-25deg);
  padding: 1em 2em;
}
.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);
}
.submenu {
  opacity: 0;
  visibility: hidden;			
}
.submenu li {
  opacity: 0;
  visibility: hidden;			
}
.submenu li {
  transition: .2s ease transform;
}
.menu > li:hover .submenu {
  opacity: 1;
  visibility: visible;
}	
.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);			
}
</style>
<body>
<ul class = "menu cf">
  <li> <a href = " "> Menu 1 </a> </li>
  <li>
<a href = " "> Menu 2 </a> 
    <ul class = "submenu">
<li> <a href = " "> Submenu Item 1  </a> </li>
<li> <a href = " "> Submenu Item 2 </a> </li>
<li> <a href = " "> Submenu Item 3 </a> </li>
      <li> <a href = " "> Submenu Item 4 </a> </li>
    </ul>			
  </li>
<li> <a href = " "> Menu 3 </a> </li>
  <li> <a href = " "> Menu 4 </a> </li>
<li> <a href = " "> Menu 5 </a> </li>
</ul>
</body>
</html>

Explanation:

In the above example, we created a example of zig zag drop down menu using CSS.

Output:

Following is the output of this example.

Example 2:

<! DOCTYPE html>    
<html>    	
    <head>    	
        <meta http-equiv = "Content-Type"    
            content = "text/html; charset=UTF-8" />    
        <title> Example of  zig zag dropdown menu concept with css </title>    
        <meta name = "description"/>    
        <meta content = "width=800, initial-scale=1"    
        name = "viewport" />     
<style>
body{
  display:flex;
  justify-content:center;
  height:100vh;
  padding:0px;
  margin:0px;
  overflow:hidden;
  font-family:'Nanum Gothic', sans-serif;
  perspective:700px;
  background:#333;
  * {
    box-sizing:border-box;
    transform-style:preserve-3d;
  }
  @media (min-width:666px){
  nav {
    width:100%;
    position:absolute;
    background:#222;
    margin:0px;
    max-width:100%;
    z-index:2;
    ol {
      width:100%;
      display:flex;
      justify-content:space-around;
      padding:0px;
      margin:0px;
      transition:all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
      li { 
        display:inline-block;
        padding:30px;
        flex-grow:1;
        text-align:center;
        position:relative;
        transition:all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
        &:nth-of-type(4) {
              ol {
                &:after{
                  content:"\f06d";
                  font-family:FontAwesome;
                }
              }
            }
        &:hover{
          &:before {
                  content:'';
                  position:absolute;
                  width:20px;
                  height:20px;
                  display:block;
                  bottom:-30px;
                  left:-15px;
                  transform:rotate(45deg) scale(0.5);
                  border:3px solid pink;
                  border-color:orange transparent transparent orange;
                  background:linear-gradient(45deg, transparent -50%, transparent 45%, red 45%, green 55%, transparent 55%, transparent 125%);
                  background-repeat:no-repeat;    
                  animation:clipin 0.4s ease-in 1 forwards;
                  animation-delay:0.2s;
                  -webkit-clip-path: polygon(35% 35%, 35% 0, 35% 0, 35% 35%, 0 35%, 0 35%);          }
          }
          li {
            position:relative;
            &:first-of-type {
              &:before{
                display:none;
              }
            }
                &:before {
                  content:'';
                  position:absolute;
                  width:20px;
                  height:20px;
                  display:block;
                  right:-30px;
                  top:-15px;
                  left:auto;
                  transform:rotate(-45deg) scale(0.5);
                  border:3px solid red;
                  border-color:red transparent transparent red;
                  background:linear-gradient(45deg, transparent -50%, transparent 45%, green 45%, red 55%, transparent 55%, transparent 125%);
                  background-repeat:no-repeat;  
                  animation:clipin 0.4s ease-in 1 forwards;
                  @keyframes clipin {
                    0%{
                      -webkit-clip-path: polygon(35% 35%, 35% 0, 35% 0, 35% 35%, 0 35%, 0 35%);
                    }
                    50%{
                      -webkit-clip-path: polygon(35% 35%, 35% 0, 35% 0, 35% 35%, 0 35%, 0 35%);
                    }
                    75%{
                      -webkit-clip-path: polygon(35% 35%, 35% 0, 100% 0, 100% 100%, 0 100%, 0 35%);
                    }
                    100%{
                      -webkit-clip-path: polygon(100% 100%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
                    }
                  }
                }
          }
        }
        ol{
          &:after{
            
            font-family:FontAwesome;
            vertical-align:center;
            font-size:150px;
            color:#ff8000;
            position:absolute;
            padding-top:40px;
            height:calc(100% - 40px);
            width:100%;
            left:-100%;
            top:0;
            background:green;
            transform:rotate(-90deg);
            transform-origin:0% 0%;
            transition:all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
          }
        }
        @for $i from 1 through 10{
          &:nth-of-type(#{$i}){
            &:hover{
              a{
                color:#222;
              }
              ol{
                li{
                  a{
                    color:#fff;
                  }
                }
              }
              &:before{
                transform:translateY(0) rotate(0deg);
              }
            }
            &:before{
              content:'';
              position:absolute;
              width:100%;
              height:100%;
              background:adjust-hue(pink, ($i * 10));
              top:0;
              left:0;
              z-index:-1;
              transition:all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
              transform:translateY(-125%) rotate(-5deg);
            }
          }
        }
        &:hover{
          ol{
            transform:translateY(0) translateZ(-1px);
            &:after{
              transform:rotate(0deg);
            }
            li{
              &:nth-of-type(1n){
                transform:none;
                margin:0px;
                &:hover{
                  &:after{
                    opacity:1;
                    top:0vh;
                  }
                }
              }
            }
          }
        }
        a{
          color:#fff;
          text-decoration:none;
          text-transform:uppercase;
          letter-spacing:2px;
          font-weight:900;
        }
        ol {
          display:block;
          position:absolute;
          top:100%;
          transform:translateY(-110%) translateZ(-5px);
          transform-origin:top right;
          z-index:-1;
          width:120%;
          left:0;
          &:hover{
            li{
              &:nth-of-type(1n){
                &:hover{
                  padding:40px 30px;
                }
              }
            }
          }
          li {
            display:block;
            margin:20px 0;
            a {
              font-size:14px;
            }
            &:before {
              display:none;
            }
            @for $i from 1 through 10{
              &:nth-of-type(#{$i}){
                transition-delay:#{$i/10}s;       background:adjust-hue(red, ($i * 10));
                &:before{
                  animation-delay:#{$i/20}s;
                  background:linear-gradient(45deg, transparent -50%, transparent 45%, adjust-hue(red, ($i * 10)) 45%, adjust-hue(red, ($i * 10)) 55%, transparent 55%, transparent 125%);
                  background-repeat:no-repeat;
                  border-color:adjust-hue(red, ($i * 10)) transparent transparent adjust-hue(red, ($i * 10));
                }
                
              }
            }
            &:first-of-type { 
              margin-top:0;
            }
            &:nth-of-type(even) {
              transform-origin:top left;
              transform:rotate(5deg);
            }
            &:nth-of-type(odd) {
              transform-origin:top right;
              transform:rotate(-5deg);
            }
          }
        }
      }
    }
  }
  }
  @media (max-width:666px) {
    nav {
      position: absolute;
      top: 0;
      height: 45px;
      left: 0;
      background: #222;
      width: 100%;
      &:hover {
        ol {
          li {
            &:nth-of-type(1n) {
              transform: rotate(0deg);
              margin: 0px;
              transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
            }
            @for $i from 1 through 10 {
              &:nth-of-type(#{$i}) {
                transition-delay: #{$i/15}s;
                &:hover {
                           }
              }
            }
          }
        }
        &:before {
          transform: rotate(45deg);
          box-shadow: 0 0 0 0;
        }
        &:after {
          transform: rotate(-45deg);
        }
      }
      &:before, &:after {
        content: ' ';
        position: absolute;
        width: 30px;
        height: 3px;
        background: #fff;
        top: 10px;
        left: calc(50% - 15px);
        border-radius: 5px;
        box-shadow: 0 10px 0 0 #fff;
        transition: transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 100ms ease-in-out;
        transition-delay: 0.1s, 0s;
        transform-origin: 0% 50%;
      }
      &:after {
        box-shadow: none;
        top: 30px;
        transform-origin: 0% 50%;
      }
            ol {
        position: absolute;
        width: 100%;
        top: 0px;
        display :table;
        left: 0;
        margin: 0px;
        text-align: center;
        transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
        background: #000;
        padding: 60px 0 20px;
        height: auto;
        li {
          position: relative;
          display: inline-block;
          width: 100%;
          height: 50px;
          padding: 10px 0;
          margin: 10px 0;
          transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
          background: #000;
          &:nth-of-type(even) {
            transform: rotate(-5deg);
          }
          &:nth-of-type(odd) {
            transform: rotate(5deg);
          }
          &:hover{
            ol{
              height:auto;
              transition:opacity 0.2s ease-in-out;
              opacity:1;
            }
          }
          a {
            color: #fff;
            text-decoration: none;
          }
        }
        ol {
          position: relative;
          transform: none;
          background: transparent;
          display: inline-block;
          width: 100%;
          height: auto;
          top: auto;
          padding: 0;
          height: 0;        
          transition: opacity 0.2s ease-in-out;
          li {
            font-size: 12px;
            height: auto;
            &:first-of-type { 
              padding-top: 20px;
            }
          }
        }
      }
    }
  }
}
</style>
<body>
<h1> Example </h1>
<nav class="menu">
  <ol>
    <li class="menu-item"><a href="#">Home</a></li>
    <li class="menu-item"><a href="#">About</a></li>
    <li class="menu-item">
      <a href="#0">Widgets</a>
      <ol class="sub-menu">
        <li class="menu-item"><a href="#"> Widgets 1 </a></li>
        <li class="menu-item"><a href="#">Widgets 2 </a></li>
        <li class="menu-item"><a href="#">Widgets 3</a></li>
      </ol>
    </li>
    <li class="menu-item"><a href="#">Contact</a></li>
  </ol>
</nav>
</body>
</html>

Explanation:

In the above example, we created a example of zig zag drop down menu using CSS.

Output:

Following is the output of this example.