Hidden navigation
How do I make an hidden navigation?
Design : http://drbl.in/iQBA. What is a hidden navigation? How do you make a hidden navigation? This script and codes were developed by Mojtaba Seyedi on 27 July 2022, Wednesday.
Hidden navigation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Hidden navigation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { background-color: #232429;
}
.bg { float : left ; background-image: url('http://demo.css-tricks.ir/off-canvas-menu-effect/img/iphone.png'); width : 355px; height : 575px; margin : 20px 10px; background-size: 100% 100%;
}
.container { position: relative; top : 82px; width : 255px; height: 410px; overflow : hidden; margin : 0 auto; background-color: #1b1b1b; border-radius: 3px;
}
.menulink { display : block; position: absolute; z-index : 999; top : 10px; left : 10px; width : 30px; height : 30px;
}
.menulink:after , .menulink:before { display : block; content : ' '; position: absolute; background-color: #fff; top : 0; left : 0; right : 0; bottom: 0; margin: auto; border-radius: 1px;
}
.menulink:before { width : 30px; height : 4px; animation : bounceIn 0.3s cubic-bezier(.64,.57,.67,1.53);
}
.active .menulink:before { animation : bounceOut 0.3s cubic-bezier(.64,.57,.67,1.53);
}
@keyframes bounceOut { to { transform : scaleX(1.4); }
}
@keyframes bounceIn { to { transform : scaleX(.6); }
}
.menulink:after { width : 4px; height : 30px; transition : 0.4s cubic-bezier(.64,.57,.67,1.53) all;
}
.active .menulink:after { transform : scaleY(0); transition : 0.2s cubic-bezier(.64,.57,.67,1.53) all;
}
.content { background-color: #325585; width : 100%; height: 100%; position: relative; font-family: 'Ropa Sans', sans-serif; color : #fff; padding : 50px 20px; line-height : 22px; box-sizing: border-box; transition : 0.3s .1s ease-out all;
}
.active .content { transition : 0.2s .1s cubic-bezier(.64,.57,.67,1.53) all;
}
.active.both .content { top : 50px; left : 50px;
}
.active.v .content { left : 50px;
}
.active.h .content { top : 50px;
}
nav { position: absolute; top : 0; left : 0;
}
nav a { display : block; font-size : 25px; padding : 10px; text-decoration : none; color : #fff;
}
li { list-style-type : none;
}
.vertical { height : 100%; padding-top : 70px;
}
.vertical li { margin-bottom : 20px; position: relative; left : -40px; top : -20px; opacity : 0; transform : scale(0); transition : .4s .3s all;
}
.active .vertical li { left : 0; top : 0; opacity : 1; transform : scale(1);
}
.horizontal { width : 100%; padding-left : 70px;
}
.horizontal li { float : left; margin-right : 20px; padding-top : 10px; position: relative; top : -40px; left : -20px; opacity : 0; transform : scale(0); transition : .4s .3s all;
}
.active .horizontal li { top : 0; left : 0; opacity : 1; transform : scale(1);
}
.active nav li:nth-child(0) { transition : 0.2s .1s cubic-bezier(0.175, 0.885, 0.32, 1.275) all;
}
.active nav li:nth-child(1) { transition : 0.2s .2s cubic-bezier(0.175, 0.885, 0.32, 1.275) all;
}
.active nav li:nth-child(2) { transition : 0.2s .3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all;
}
.active nav li:nth-child(3) { transition : 0.2s .4s cubic-bezier(0.175, 0.885, 0.32, 1.275) all;
}
.active nav li:nth-child(4) { transition : 0.2s .5s cubic-bezier(0.175, 0.885, 0.32, 1.275) all;
}
.active nav li:nth-child(5) { transition : 0.2s .6s cubic-bezier(0.175, 0.885, 0.32, 1.275) all;
}
.active nav li:nth-child(6) { transition : 0.2s .7s cubic-bezier(0.175, 0.885, 0.32, 1.275) all;
}
.active nav li:nth-child(7) { transition : 0.2s .8s cubic-bezier(0.175, 0.885, 0.32, 1.275) all;
}
.horizontal menu:after { content : ' '; display : table; clear : both;
}
.horizontal menu:before { content : ' '; display : table;
}
nav a:hover { text-shadow: 0 0 10px #325585;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <link href='http://fonts.googleapis.com/css?family=Ropa+Sans' rel='stylesheet' type='text/css'>
<div class="bg both"> <div class="container"> <a href="" class="menulink" id="both"></a> <nav class="horizontal"> <menu> <li><a href="#" class="icon-twitter"></a></li> <li><a href="#" class="icon-facebook"></a></li> <li><a href="#" class="icon-youtube-play"></a></li> </menu> </nav> <nav class="vertical"> <menu> <li><a href="#" class="icon-home"></a></li> <li><a href="#" class="icon-user"></a></li> <li><a href="#" class="icon-picture"></a></li> <li><a href="#" class="icon-camera"></a></li> <li><a href="#" class="icon-music"></a></li> <li><a href="#" class="icon-book"></a></li> <li><a href="#" class="icon-search"></a></li> </menu> </nav> <div class="content both"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div>
</div>
<div class="bg v"> <div class="container"> <a href="" class="menulink" id="v"></a> <nav class="vertical"> <menu> <li><a href="#" class="icon-home"></a></li> <li><a href="#" class="icon-user"></a></li> <li><a href="#" class="icon-picture"></a></li> <li><a href="#" class="icon-camera"></a></li> <li><a href="#" class="icon-music"></a></li> <li><a href="#" class="icon-book"></a></li> <li><a href="#" class="icon-search"></a></li> </menu> </nav> <div class="content v"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div>
</div>
<div class="bg h"> <div class="container"> <a href="" class="menulink" id="h"></a> <nav class="horizontal"> <menu> <li><a href="#" class="icon-twitter"></a></li> <li><a href="#" class="icon-facebook"></a></li> <li><a href="#" class="icon-youtube-play"></a></li> </menu> </nav> <div class="content h"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Hidden navigation - Script Codes CSS Codes
body { background-color: #232429;
}
.bg { float : left ; background-image: url('http://demo.css-tricks.ir/off-canvas-menu-effect/img/iphone.png'); width : 355px; height : 575px; margin : 20px 10px; background-size: 100% 100%;
}
.container { position: relative; top : 82px; width : 255px; height: 410px; overflow : hidden; margin : 0 auto; background-color: #1b1b1b; border-radius: 3px;
}
.menulink { display : block; position: absolute; z-index : 999; top : 10px; left : 10px; width : 30px; height : 30px;
}
.menulink:after , .menulink:before { display : block; content : ' '; position: absolute; background-color: #fff; top : 0; left : 0; right : 0; bottom: 0; margin: auto; border-radius: 1px;
}
.menulink:before { width : 30px; height : 4px; animation : bounceIn 0.3s cubic-bezier(.64,.57,.67,1.53);
}
.active .menulink:before { animation : bounceOut 0.3s cubic-bezier(.64,.57,.67,1.53);
}
@keyframes bounceOut { to { transform : scaleX(1.4); }
}
@keyframes bounceIn { to { transform : scaleX(.6); }
}
.menulink:after { width : 4px; height : 30px; transition : 0.4s cubic-bezier(.64,.57,.67,1.53) all;
}
.active .menulink:after { transform : scaleY(0); transition : 0.2s cubic-bezier(.64,.57,.67,1.53) all;
}
.content { background-color: #325585; width : 100%; height: 100%; position: relative; font-family: 'Ropa Sans', sans-serif; color : #fff; padding : 50px 20px; line-height : 22px; box-sizing: border-box; transition : 0.3s .1s ease-out all;
}
.active .content { transition : 0.2s .1s cubic-bezier(.64,.57,.67,1.53) all;
}
.active.both .content { top : 50px; left : 50px;
}
.active.v .content { left : 50px;
}
.active.h .content { top : 50px;
}
nav { position: absolute; top : 0; left : 0;
}
nav a { display : block; font-size : 25px; padding : 10px; text-decoration : none; color : #fff;
}
li { list-style-type : none;
}
.vertical { height : 100%; padding-top : 70px;
}
.vertical li { margin-bottom : 20px; position: relative; left : -40px; top : -20px; opacity : 0; transform : scale(0); transition : .4s .3s all;
}
.active .vertical li { left : 0; top : 0; opacity : 1; transform : scale(1);
}
.horizontal { width : 100%; padding-left : 70px;
}
.horizontal li { float : left; margin-right : 20px; padding-top : 10px; position: relative; top : -40px; left : -20px; opacity : 0; transform : scale(0); transition : .4s .3s all;
}
.active .horizontal li { top : 0; left : 0; opacity : 1; transform : scale(1);
}
.active nav li:nth-child(0) { transition : 0.2s .1s cubic-bezier(0.175, 0.885, 0.32, 1.275) all;
}
.active nav li:nth-child(1) { transition : 0.2s .2s cubic-bezier(0.175, 0.885, 0.32, 1.275) all;
}
.active nav li:nth-child(2) { transition : 0.2s .3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all;
}
.active nav li:nth-child(3) { transition : 0.2s .4s cubic-bezier(0.175, 0.885, 0.32, 1.275) all;
}
.active nav li:nth-child(4) { transition : 0.2s .5s cubic-bezier(0.175, 0.885, 0.32, 1.275) all;
}
.active nav li:nth-child(5) { transition : 0.2s .6s cubic-bezier(0.175, 0.885, 0.32, 1.275) all;
}
.active nav li:nth-child(6) { transition : 0.2s .7s cubic-bezier(0.175, 0.885, 0.32, 1.275) all;
}
.active nav li:nth-child(7) { transition : 0.2s .8s cubic-bezier(0.175, 0.885, 0.32, 1.275) all;
}
.horizontal menu:after { content : ' '; display : table; clear : both;
}
.horizontal menu:before { content : ' '; display : table;
}
nav a:hover { text-shadow: 0 0 10px #325585;
}
Hidden navigation - Script Codes JS Codes
$(document).ready(function() { $('.menulink').bind('click', function(e) { e.preventDefault(); $( this ).parent().parent().toggleClass('active'); });
});
Developer | Mojtaba Seyedi |
Username | seyedi |
Uploaded | July 27, 2022 |
Rating | 4.5 |
Size | 4,330 Kb |
Views | 38,456 |
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 |
Caption Effect | 2,968 Kb |
Menu | 3,077 Kb |
Animated Cover | 3,576 Kb |
Toggle menu | 2,279 Kb |
Flock Login | 3,145 Kb |
Khafan Menu | 3,444 Kb |
Flat Navigation | 2,707 Kb |
Button | 3,688 Kb |
Animated Covers | 5,083 Kb |
Centering anything horizontally | 2,018 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 |
Highbrow Basic HTML Lesson 7 | Kimlarocca | 1,662 Kb |
Custom Checkbox and radio inputs SCSS | Rgfx | 3,367 Kb |
Resume | Rottingroom | 5,483 Kb |
Sitemap generator for Sharepoint | Gyusza | 2,518 Kb |
Pricing Table | Semenchenko | 6,784 Kb |
Pure CSS Menu | Bronsrobin | 3,321 Kb |
CSS3 Animated buttons | Cguillou | 3,737 Kb |
Drifting Clouds | Benedikte | 2,247 Kb |
Brown by pure CSS, no image, no javascript | Aaronchuo | 2,652 Kb |
Mobile Nav Menu | AliKlein | 4,745 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!