Toggle menu

Developer
Mojtaba Seyedi
Size
2,279 Kb
Views
54,648
  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,648
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
Button
Steering menu
Ribbon Menu
Bell alert
Switching
Circular Menu
Flat Navigation
Menu
Caption Effect
Centering anything horizontally
Create amazing web content 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!