Fly-Out Nav
How do I make an fly-out nav?
A fly-out navbar...'cus I've never made one ... [ Pen #7 of my 'At Least One CSS-Based Pen A Day' ]. What is a fly-out nav? How do you make a fly-out nav? This script and codes were developed by Tiffany Rayside on 12 June 2022, Sunday.
Fly-Out Nav - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fly-Out Nav</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Fly-Out Navigation</h1>
<div id="nav" class="nav"> <div class="icon"> <ul> <li><a title="Home" href="#"><i class="fa fa-home "></i></a></li> <li><a href="About"><i class="fa fa-search "></i></a></li> <li><a href="#"><i class="fa fa-edit "></i></a></li> <li><a href="#"><i class="fa fa-cog "></i></a></li> </ul> </div> <div class="text"> <ul> <li><a title="Home" href="#">Home</a></li> <li><a href="#" >Search</a>
</li> <li><a href="#" >Contact</a>
</li> <li><a href="#" >Settings</a>
</li> </ul> </div> <div class="info"> <div class="logo"><p>LOGO</p></div> <div class="name">Co. Name</div> <div class="quote">WHAT WE DO IS WHO WE ARE</div> <div class="social"> <a target="_blank" href="https://twitter.com/tmrDevelops"><i class="fa fa-twitter"></i></a> </div> </div> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Fly-Out Nav - Script Codes CSS Codes
@import url(http://fonts.googleapis.com/css?family=Raleway:500);
body { width: 100%; margin: 0; padding: 0; overflow: hidden; background: #f2f2f3; font-family: 'Raleway', sans-serif;
}
body h1 { text-align: center; margin-top: 35px; color: #333333; letter-spacing: 1px; text-shadow: 1px 1px #f2f2f3, -1px -1px #f2f2f3;
}
.nav { height: 100%; position: fixed; left: -2em; top: 0; z-index: 1000; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-perspective: 1000px; perspective: 1000px;
}
.icon { position: absolute; left: 0; top: 0; z-index: 990; height: 100%; background: #262626;
}
.icon li { border-bottom: 1px solid rgba(0, 0, 0, 0.3); list-style-type: none;
}
.icon a { display: block; width: 64px; height: 64px; line-height: 64px; text-align: center; font-size: 1.6em; color: #999999; text-shadow: 0 1px 0 black; -webkit-transition: all .5s ease-out; transition: all .5s ease-out;
}
.icon a:hover { color: white; -webkit-transform: translateX(10px) scale(1.2); transform: translateX(10px) scale(1.2);
}
.nav:hover .text { -webkit-transform: rotateY(0deg); transform: rotateY(0deg);
}
.text { position: absolute; left: 63px; top: 0; z-index: 980; height: 100%; background: #262626; border-right: 1px solid rgba(0, 0, 0, 0.3); -webkit-transition: -webkit-transform .24s linear; transition: -webkit-transform .24s linear; transition: transform .24s linear; transition: transform .24s linear, -webkit-transform .24s linear; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-origin: left; transform-origin: left; -webkit-transform: perspective(1000px) rotateY(90deg); transform: perspective(1000px) rotateY(90deg);
}
.text li { border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
.text a { display: block; width: 200px; height: 64px; line-height: 64px; text-indent: 1em; font-size: 1.4em; text-decoration: none; color: #999999; text-shadow: 0 1px 0 black; -webkit-transition: all .5s ease; transition: all .5s ease;
}
.text a:hover { color: white; -webkit-transform: translateX(-14px); transform: translateX(-14px);
}
.nav:hover .info { left: 0; opacity: 1; -webkit-transition: opacity 0.5s ease-in 0.1s; transition: opacity 0.5s ease-in 0.1s;
}
.info { position: absolute; padding-left: 2em; bottom: 30px; z-index: 999; width: 264px; color: white; text-align: center; line-height: 1.6; opacity: 0;
}
.info .logo p { width: 100px; height: 100px; margin: 0 auto; background: #262626; color: #424242; opacity: .6; overflow: hidden; text-align: center; -webkit-transition: all .5s ease; transition: all .5s ease; font-size: 2em; text-shadow: -1px -1px #4f4f4f, 1px 1px #121212;
}
.info .logo p:hover { opacity: 1; color: white; text-shadow: -1px -1px #575757, 1px 1px #121212;
}
.info .name { font-size: 2em; font-weight: bold; letter-spacing: 2px; color: #424242; text-shadow: -1px -1px #4f4f4f, 1px 1px #121212;
}
.info .quote { color: #444; text-shadow: 1px 1px #121212;
}
.info .social a { font-size: 2em; color: #333333; letter-spacing: .5em; text-shadow: 1px 1px #454545, -1px -1px #121212; -webkit-transition: all .5s ease; transition: all .5s ease;
}
.info .social a:hover { color: white; text-shadow: -1px -1px #575757, 1px 1px #121212;
}
/*
Only added a nav query for height bc width is fine
(covers full width of viewport from 270px) down to 220px.
Bottom nav info section is hidden when screen height
hits 550px or below. Nav still functions as a fly-out
*/
@media screen and (max-height: 550px) { .info { display: none; }
}
@media screen and (max-width: 450px) { h1 { font-size: 7.5vw; }
}
Developer | Tiffany Rayside |
Username | tmrDevelops |
Uploaded | June 12, 2022 |
Rating | 4.5 |
Size | 4,196 Kb |
Views | 62,744 |
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 |
Transference | 3,021 Kb |
Gradiance 2 | 3,931 Kb |
Organizer | 8,737 Kb |
Topiary | 2,501 Kb |
GOOey | 5,088 Kb |
Detour | 4,004 Kb |
Deliquescent | 3,211 Kb |
Hyperstellar | 2,872 Kb |
Shattered | 3,037 Kb |
Words of the Rainbow | 3,138 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 |
This in constructor context | _shree33 | 1,718 Kb |
Scroll effect with text with help from Skrollr | Luxonglassing | 2,935 Kb |
Pomodoro Clock | Osycon | 3,705 Kb |
Vue Transition | Chenming142 | 4,561 Kb |
Blog | Rottingroom | 1,430 Kb |
Responsive Menu I | Rodericksandoval | 3,045 Kb |
Free css icon set v2 - one div | Ben_jammin | 0 Kb |
Weather App | Kw7oe | 3,162 Kb |
CSS Parent Selector | Tomhodgins | 2,143 Kb |
Testimonial Fancy tabs responsive | Amit-webdesigner | 3,056 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!