zig zag dropdown menu concept with css
BLUF: Styling is what brings the web to life, and mastering zig zag dropdown menu concept with css is key to creating beautiful, responsive interfaces. This tutorial breaks down the concepts and syntax you need to succeed with CSS.
Visual Design Hack: zig zag dropdown menu concept with css
CSS is all about presentation. Discover how zig zag dropdown menu concept with css works to transform plain HTML into a premium user experience in the guide below.
In this tutorial, we will explore the zigzag dropdown menu design using CSS through a variety of illustrations. A dropdown menu provides users with a selection of options to choose from.
Below are instances of a dropdown menu with a zigzag design.
Example 1:
Example
<! 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 aforementioned instance, we developed a sample zigzag dropdown menu using CSS.
Output:
Following is the output of this example.
Example 2:
Example
<! 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 previously mentioned example, we demonstrated the creation of a zigzag dropdown menu using CSS.
Output:
Following is the output of this example.
