Toggle menu

Developer
Mojtaba Seyedi
Size
2,279 Kb
Views
54,621
  1. Toggle menu Previews
  2. Toggle menu HTML Codes
  3. Toggle menu CSS Codes

How do I make an toggle menu?

Inspired by by Josh Franklin's work on Dribbble http://drbl.in/ixrl. What is a toggle menu? How do you make a toggle menu? This script and codes were developed by Mojtaba Seyedi on 27 July 2022, Wednesday.

Toggle menu Previews
IQ Test

Toggle menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Toggle menu</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <input type="checkbox" id="toggle"/>
<label for="toggle" class="fa fa-bars"></label>
<nav> <menu> <li><a href="#">home</a></li> <li><a href="#">about</a></li> <li><a href="#">places</a></li> <li><a href="#">apps</a></li> <li><a href="#">contact</a></li> <li><a href="#">shopping</a></li> </menu>
</nav>
</body>
</html>

Toggle menu - Script Codes CSS Codes

@import url('http://fonts.googleapis.com/css?family=Source+Code+Pro');
body { background-image: url('http://mojoimage.com/free-image-hosting-th-12/5539bg.jpg'); background-size : cover;
}
nav { width : 240px; float : left; -webkit-transition : 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all; -moz-transition : 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all;
}
input { display: none;
}
label { display : inline-block; margin-left : auto; width : 60px; padding : 18px 0; background-color: rgba(100,100,100,.3); color : #fff; text-align : center; cursor : pointer;
}
li { list-style-type : none; border-top : 1px solid #FFF; border-bottom : 1px solid #ddd; background-color: #f4f5f6; background-size : 200% 100%; background-position : 90% 0px; -webkit-transition : 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all; -moz-transition : 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all;
}
a { display : block; padding : 25px 0; color : #454545; text-align : center; font-family: 'Source Code Pro', sans-serif; text-decoration: none; -webkit-transition : color .1s; -moz-transition : color .1s;
}
a:hover { color : #fff; -webkit-transition : color .1s; -moz-transition : color .1s;
}
li:nth-child(1) { border-top : none; background-image : -webkit-linear-gradient(left, #78cdce 0%, #78cdce 50%, #f4f5f6 0%); background-image : -moz-linear-gradient(left, #78cdce 0%, #78cdce 50%, #f4f5f6 0%);
}
li:nth-child(2) { background-image : -webkit-linear-gradient(left, #f16767 0%, #f16767 50%, #f4f5f6 0%); background-image : -moz-linear-gradient(left, #f16767 0%, #f16767 50%, #f4f5f6 0%);
}
li:nth-child(3) { background-image : -webkit-linear-gradient(left, #f5ee32 0%, #f5ee32 50%, #f4f5f6 0%); background-image : -moz-linear-gradient(left, #f5ee32 0%, #f5ee32 50%, #f4f5f6 0%);
}
li:nth-child(4) { background-image : -webkit-linear-gradient(left, #97cc69 0%, #97cc69 50%, #f4f5f6 0%); background-image : -moz-linear-gradient(left, #97cc69 0%, #97cc69 50%, #f4f5f6 0%);
}
li:nth-child(5) { background-image : -webkit-linear-gradient(left, #507abd 0%, #507abd 50%, #f4f5f6 0%); background-image : -moz-linear-gradient(left, #507abd 0%, #507abd 50%, #f4f5f6 0%);
}
li:nth-child(6) { background-image : -webkit-linear-gradient(left, #6b408e 0%, #6b408e 50%, #f4f5f6 0%); background-image : -moz-linear-gradient(left, #6b408e 0%, #6b408e 50%, #f4f5f6 0%); border-bottom : none;
}
li:hover { -webkit-transition : 0.3s cubic-bezier(0.175, 0.285, 0.32,1.0) all; -moz-transition : 0.3s cubic-bezier(0.175, 0.285, 0.32,1.0) all; background-position : 0% 0%;
}
#toggle:checked ~ nav { margin-left: -240px; -webkit-transition : 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all; -moz-transition : 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all;
}
Toggle menu - Script Codes
Toggle menu - Script Codes
Home Page Home
Developer Mojtaba Seyedi
Username seyedi
Uploaded July 27, 2022
Rating 4
Size 2,279 Kb
Views 54,621
Do you need developer help for Toggle menu?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mojtaba Seyedi (seyedi) Script Codes
Name
Circular Menu
Flat Navigation
Animated Covers
Navigation
Centering anything horizontally
Flock Login
Covering Bad
Shader Menu
Single element cloud
FUN
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!