Menu with CSS3 transition
How do I make an menu with css3 transition?
Menu with CSS3 transition. What is a menu with css3 transition? How do you make a menu with css3 transition? This script and codes were developed by Antonija Simic on 28 September 2022, Wednesday.
Menu with CSS3 transition - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Menu with CSS3 transition</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="nav"> <button class="btn-nav"> <span class="icon-bar top"></span> <span class="icon-bar middle"></span> <span class="icon-bar bottom"></span> </button>
</div>
<div class="nav-content hideNav hidden"> <ul class="nav-list"> <li class="nav-item"><a href="#" class="item-anchor">item1</a></li> <li class="nav-item"><a href="#" class="item-anchor">item2</a></li> <li class="nav-item"><a href="#" class="item-anchor">item3</a></li> <li class="nav-item"><a href="#" class="item-anchor">item4</a></li> </ul>
</div> <a href="https://codepen.io/tonkec" class="ua" target="_blank">
<i class="fa fa-user"></i></a> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Menu with CSS3 transition - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Lato);
body,
html { background-color: #14213D; height: 100%; width: 100%; padding: 0; margin: 0; font-family: 'Lato', sans-serif;
}
.nav { position: relative; width: auto; display: inline-block; border: none;
}
.btn-nav { position: fixed; top: 50px; left: 30px; background: transparent; border: none; padding: 10px; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; cursor: pointer; z-index: 99999;
}
.btn-nav:focus { outline: 0;
}
.icon-bar { display: block; margin: 6px 0; width: 40px; height: 5px; background-color: #FFFFFF;
}
.btn-nav:hover .icon-bar { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; background-color: #FCA311;
}
.nav-content { position: fixed; top: -100%; bottom: 0; left: 0; right: 0; background: #000000; display: block; height: 100%; z-index: 9;
}
.nav-list { list-style: none; padding: 0; position: relative; top: 30%;
}
.item-anchor:after { content: ""; position: absolute; width: 3px; height: 3px; left: 0; bottom: 0; z-index: 9; background: transparent; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;
}
.item-anchor { color: #fff; font-size: 30px; text-transform: uppercase; position: relative; text-decoration: none; padding: 10px;
}
.item-anchor:hover,
.item-anchor:focus { color: #FCA311; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;
}
.item-anchor:hover:after,
.item-anchor:focus:after{ width: 100%; background: #FCA311; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;
}
.nav-item { margin: 40px auto; text-align: center;
}
.animated { display: block; margin: 0 auto;
}
.animated:hover .icon-bar,
.animated:focus .icon-bar{ background-color: #FCA311;
}
.animated:focus { cursor: pointer; z-index: 9999;
}
.middle { margin: 0 auto;
}
.icon-bar { -webkit-transition: all .7s ease; -moz-transition: all .7s ease; -ms-transition: all .7s ease; -o-transition: all .7s ease; transition: all .7s ease; z-index: 999999;
}
.animated .icon-bar { z-index: 999999; background-color: #FCA311;
}
.animated .top { -webkit-transform: translateY(10px) rotateZ(45deg); -moz-transform: translateY(10px) rotateZ(45deg); -ms-transform: translateY(10px) rotateZ(45deg); -o-transform: translateY(10px) rotateZ(45deg); transform: translateY(10px) rotateZ(45deg);
}
.animated .bottom { -webkit-transform: translateY(-10px) rotateZ(-45deg); -moz-transform: translateY(-10px) rotateZ(-45deg); -ms-transform: translateY(-10px) rotateZ(-45deg); -o-transform: translateY(-10px) rotateZ(-45deg); transform: translateY(-10px) rotateZ(-45deg);
}
.animated .middle { width: 0;
}
@keyframes showNav { from { top: -100%; } to { top: 0; }
}
@-webkit-keyframes showNav { from { top: -100%; } to { top: 0; }
}
@-moz-keyframes showNav { from { top: -100%; } to { top: 0; }
}
@-o-keyframes showNav { from { top: -100%; } to { top: 0; }
}
.showNav { -webkit-animation: showNav 1s ease forwards; -moz-animation: showNav 1s ease forwards; -o-animation: showNav 1s ease forwards; animation: showNav 1s ease forwards;
}
@keyframes hideNav { from { top: 0; } to { top: -100%; }
}
@-webkit-keyframes hideNav { from { top: 0; } to { top: -100%; }
}
@-moz-keyframes hideNav { from { top: 0; } to { top: -100%; }
}
@-o-keyframes hideNav { from { top: 0; } to { top: -100%; }
}
.hideNav { -webkit-animation: hideNav 1s ease forwards; -moz-animation: hideNav 1s ease forwards; -o-animation: hideNav 1s ease forwards; animation: hideNav 1s ease forwards;
}
.hidden { display: none;
}
.ua { position: absolute; right: 20px; bottom: 20px; color: #fff; font-size: 2em;
}
.fa { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;
}
.ua:hover .fa { color: #17BEBB; -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;
}
Menu with CSS3 transition - Script Codes JS Codes
$(window).load(function() { $(".btn-nav").on("click tap", function() { $(".nav-content").toggleClass("showNav hideNav").removeClass("hidden"); $(this).toggleClass("animated"); });
});
Developer | Antonija Simic |
Username | tonkec |
Uploaded | September 28, 2022 |
Rating | 4.5 |
Size | 2,844 Kb |
Views | 20,240 |
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!
Name | Size |
Pure CSS hamburger icons transition | 2,243 Kb |
Static website for free workshop | 3,412 Kb |
Sass mixin library for text hover | 9,960 Kb |
Material design navigation menu | 3,012 Kb |
CSS preloader | 1,832 Kb |
Pure CSS animated hamburger icon | 1,928 Kb |
Sidebar with smooth transition | 2,740 Kb |
A Pen by Antonija Simic | 1,664 Kb |
Flat designed responsive preloader | 2,621 Kb |
3D cube flip | 2,794 Kb |
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!
Name | Username | Size |
Polygon Logo in CSS | Kai | 3,412 Kb |
Gradients | Karpovsystems | 2,394 Kb |
Mobile first social buttons with no iframe | Alistairtweedie | 3,158 Kb |
Ball Physics | Getsetbro | 3,149 Kb |
Price table | Serluk | 5,928 Kb |
Blog demo to use given styling | Andygirl | 2,412 Kb |
Pink expansion tunnel | Vez | 1,738 Kb |
Form Labels | Bartuc | 2,717 Kb |
A Pen by lizz | Lizz | 10,068 Kb |
RRC wrapSwitch | Pshrmn | 2,922 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!