Flip Out Navigation Concept
How do I make an flip out navigation concept?
This is a stylish flip out menu concept. . What is a flip out navigation concept? How do you make a flip out navigation concept? This script and codes were developed by Collin Chappell on 03 February 2023, Friday.
Flip Out Navigation Concept - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flip Out Navigation Concept</title> <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,300,600|Julius+Sans+One' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="burger"> <div class="line one"></div> <div class="line two"></div> <div class="line three"></div>
</div>
<div class="nav"> <ul> <li><a>Link One</a></li> <li><a>Link Two</a></li> <li><a>Link Three</a></li> <li><a>Link Four</a></li> <li><a>Link Five</a></li> </ul>
</div>
<div class="wrap">
</div>
<div class="body"> <p>Click on the icon in the top left corner to see the effect!</p>
</div>
<div class="footer"> <p>Made with <i class="fa fa-heart"></i> by Collin Chappell</p>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Flip Out Navigation Concept - Script Codes CSS Codes
body { overflow-x: hidden; z-index: 0; background-repeat: repeat; background-size: 100px;
}
::-webkit-scrollbar { display: none;
}
.body { position: absolute; top: 0; left: 0; background: url(https://i.imgur.com/k6ybTb2.png); background-repeat: repeat; background-size: 100px; width: 100%; height: 100%; z-index: 10; transition: all 0.4s; text-align: center; font-family: 'Open Sans', sans-serif; font-weight: 100; font-size: 28px;
}
.body p { position: absolute; top: -24px; left: 0; right: 0; transform: translateY(-50%); color: #fff; text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.4);
}
.nav { position: absolute; top: 0; left: -257px; width: 256px; height: 100%; background: linear-gradient(#1CB181, #5CA9D6); z-index: 8888; transition: all 0.4s; overflow-y: auto; overflow-x: hidden;
}
.nav.clicked { left: 0px; box-shadow: 3px 0px 4px 0px rgba(0, 0, 0, 0.2);
}
.nav ul { list-style: none; margin-left: -24px;
}
.nav ul li a { font-family: "Open Sans", sans-serif; font-size: 22px; transition: all 0.3s; color: #fff; display: block; padding: 4px 4px; cursor: pointer; text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2);
}
.nav ul li a:hover { opacity: 0.4; margin-left: 16px;
}
.wrap { position: absolute; top: 0; left: 0; background: transparent; width: 100%; height: 100%; z-index: 200; transition: all 0.4s;
}
.wrap.dark { background: rgba(0, 0, 0, 0.3);
}
.body.moved { left: 132px;
}
.burger { position: fixed; top: 8px; left: 8px; width: 48px; height: 32px; cursor: pointer; z-index: 9999; transition: all 0.4s;
}
.burger.moved { left: 212px;
}
.burger .line { position: absolute; height: 4px; width: 42px; background: #000; transition: all 6.4s; border-radius: 2px;
}
.burger .one { top: 0px;
}
.burger .two { top: 12px;
}
.burger .three { top: 24px;
}
.one.oneX { -webkit-transform: rotate(135deg); top: 12px;
}
.two.twoX { width: 0px; left: 24px;
}
.three.threeX { -webkit-transform: rotate(-135deg); top: 11px;
}
.footer { position: fixed; bottom: 0; right: 0; background: rgba(255, 255, 255, 0.4); border: 1px solid rgba(255, 255, 255, 0.6); border-top-: 5px; z-index: 9999; height: 32px; padding: 4px 8px; border-top-left-radius: 5px;
}
.footer p { margin-top: 6px; font-family: "Open Sans", sans-serif;
}
.footer i { color: red; animation: pulsate 1s infinite; -webkit-animation: pulsate 1s infinite;
}
@-webkit-keyframes pulsate { 0% { -webkit-transform: scale(1.2); } 100% { -webkit-transform: scale(1); }
}
Flip Out Navigation Concept - Script Codes JS Codes
$('.burger').click( function () { $('.burger').toggleClass('moved'), $('.one').toggleClass('oneX'), $('.two').toggleClass('twoX'), $('.three').toggleClass('threeX'), $('.wrap').toggleClass('dark'), $('.body').toggleClass('moved'), $('.nav').toggleClass('clicked');
});
Developer | Collin Chappell |
Username | Keubix |
Uploaded | February 03, 2023 |
Rating | 3 |
Size | 3,854 Kb |
Views | 2,024 |
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 |
Enjin Navigation Bar Creator | 6,599 Kb |
Profile Page | 2,900 Kb |
DART Website Design | 0 Kb |
Parallax navigation | 2,505 Kb |
Frosted Glass Panels | 3,134 Kb |
Mac OS X Mockup | 2,794 Kb |
Minedrix | 0 Kb |
Frosted Glass Navigation Bar | 2,804 Kb |
A Pen by Collin Chappell | 3,162 Kb |
Info Revealing Hover Effects | 2,877 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 |
Calculator | Rzencoder | 4,572 Kb |
Retina canvas w. resize | Erikterwan | 1,882 Kb |
Sample Profile Screen | OurDailyBread | 5,375 Kb |
Multicolumns 2 | Raphaelgoetter | 1,857 Kb |
JQuery exercise | Brian-baum | 3,780 Kb |
Countdown with Rings | Ewganoel | 2,490 Kb |
Twitch Live Channels | Inkblotty | 4,956 Kb |
NgEasyModal | Lorenzodianni | 4,159 Kb |
Mandelbrot Fractal | _Billy_Brown | 2,706 Kb |
Animated rainbow wave on canvas | Icodeforlove | 2,777 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!