Flexbox responsive navigation
How do I make an flexbox responsive navigation?
Just playing around with different UI elements and how I'd approach them if I was using flexbox.If you're going to use this, I highly recommend using autoprefixer to cover IE10 and old syntax (which is relevant to most older mobile devices). . What is a flexbox responsive navigation? How do you make a flexbox responsive navigation? This script and codes were developed by Chris Wright on 12 July 2022, Tuesday.
Flexbox responsive navigation Previews
Flexbox responsive navigation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flexbox responsive navigation</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/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <header class="header"> <a href="#" class="logo">Logo</a> <nav role="navigation" class="navigation-mobile"> <a href="#" class="navigation-mobile-link">Menu</a> </nav> <nav role="navigation" class="navigation-container"> <ul class="navigation navigation-open"> <li class="navigation-item navigation-active"> <a href="#">First</a> </li> <li class="navigation-item"> <a href="#">Second</a> </li> <li class="navigation-item"> <a href="#">Third</a> </li> <li class="navigation-item"> <a href="#">Fourth</a> </li> </ul> </nav> </header> </div> <script src="js/index.js"></script>
</body>
</html>Flexbox responsive navigation - Script Codes CSS Codes
body { font-size: 100%; line-height: 1.5em; font-family: Verdana, sans-serif;
}
* { box-sizing: border-box;
}
.header { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; -webkit-box-flex: 1; -ms-flex: 1 0 100%; flex: 1 0 100%; -ms-flex-wrap: wrap; flex-wrap: wrap; background-color: #fff;
}
@media all and (min-width: 30em) { .header { border-bottom: 1px solid #eee; }
}
.logo { position: relative; z-index: 902; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 2; -ms-flex: 2 0 20%; flex: 2 0 20%; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 1em; border-bottom: 1px solid #eee; text-decoration: none; background-color: #ccc; color: #222;
}
@media all and (min-width: 30em) { .logo { -webkit-box-flex: 1; -ms-flex: 1 0 5em; flex: 1 0 5em; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-bottom: none; }
}
.navigation-mobile { background-color: #fff; position: relative; z-index: 902; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
@media all and (min-width: 30em) { .navigation-mobile { display: none; visibility: hidden; }
}
.navigation-mobile a { border-left: 1px solid #eee; border-bottom: 1px solid #eee; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; position: relative; padding: 1em; font-size: 1em; z-index: 991; width: 100%; color: #111; text-decoration: none; cursor: pointer; -webkit-transition: background-color 0.4s ease-in-out; transition: background-color 0.4s ease-in-out;
}
.navigation-mobile a:before { content: " "; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 0; -ms-flex: 0 0 2em; flex: 0 0 2em; height: 1.5em; background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/22318/icon_MobileMenu_black_2.svg") no-repeat 0 0; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start;
}
.navigation-mobile a:hover, .navigation-mobile a:active, .navigation-mobile a:focus { background-color: #eee; color: #666;
}
.navigation-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1 0 100%; flex: 1 0 100%;
}
@media all and (min-width: 30em) { .navigation-container { -webkit-box-flex: 1; -ms-flex: 1 1 90%; flex: 1 1 90%; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }
}
.navigation { display: block; position: absolute; z-index: 900; width: 100%; -webkit-transition: -webkit-transform 0.4s ease-in-out; transition: -webkit-transform 0.4s ease-in-out; transition: transform 0.4s ease-in-out; transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out; -webkit-transform: translateY(-100%); transform: translateY(-100%);
}
@media all and (min-width: 30em) { .navigation { -webkit-transform: translateY(0); transform: translateY(0); position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }
}
.navigation.navigation-open { -webkit-transform: translateY(0); transform: translateY(0);
}
.navigation-item { display: block; width: 100%; border-bottom: 1px solid #eee;
}
@media all and (min-width: 30em) { .navigation-item { border-bottom: none; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; width: auto; }
}
.navigation-item a { display: block; width: 100%; padding: 1em 1.5em; text-align: center; border-left: 1px solid #eee; background-color: #fff; color: #222; text-decoration: none; -webkit-transition: background-color 0.4s ease-in-out; transition: background-color 0.4s ease-in-out;
}
.navigation-item a:hover { background-color: #eee;
}
Flexbox responsive navigation - Script Codes JS Codes
var hasClass, addClass, removeClass, eventType, $q, mobileMenu, navigation, navTrigger, toggleNav;
hasClass = function( elem, c ) { return elem.classList.contains( c );
};
addClass = function( elem, c ) { elem.classList.add( c ); }; removeClass = function( elem, c ) { elem.classList.remove( c ); };
function toggleClass( elem, c ) { var fn = hasClass( elem, c ) ? removeClass : addClass; fn( elem, c );
}
$q = function (selector) { return document.querySelector(selector);
}
eventType = Modernizr.touch ? 'touchstart' : 'click';
if (window.navigator.msMaxTouchPoints) { eventType = "pointerdown"; }
mobileMenu = $q('.navigation-mobile-link'),
navigation = $q('.navigation'),
navTrigger = 'navigation-open';
toggleNav = function(event){ event.preventDefault(); toggleClass(navigation, navTrigger);
}
mobileMenu.addEventListener(eventType, toggleNav);
| Developer | Chris Wright |
| Username | chriswrightdesign |
| Uploaded | July 12, 2022 |
| Rating | 4 |
| Size | 4,272 Kb |
| Views | 62,744 |
Do you need developer help for Flexbox responsive navigation?
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!
Chris Wright (chriswrightdesign) Script Codes
| Name | Size |
| SVG Noise over gradient Experiment | 6,168 Kb |
| Typography SVG experiment | 3,472 Kb |
| SVG Shadows | 3,657 Kb |
| Macbook Air SVG | 11,283 Kb |
| Inertia CSS | 5,065 Kb |
| Experiments with nth-of-type animation | 3,015 Kb |
| SVG Reflection | 8,859 Kb |
| CSS Responsive animated Accordion | 4,834 Kb |
| Inverted shadow with fade | 5,897 Kb |
| Grid - two columns with gutters | 2,922 Kb |
Create amazing blog posts 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!
Similar Scripts & Codes
| Name | Username | Size |
| RequestAnimationFrame | Martin-banks | 2,541 Kb |
| Learning canvas drawing | Aurer | 2,204 Kb |
| Custom Select Element | Agrayson | 3,616 Kb |
| Fluid Grid 12 | Alexoliverwd | 2,309 Kb |
| Resize image | Happyhj | 1,892 Kb |
| Vanilla JS - A toggleClass function | Woodwork | 2,532 Kb |
| Canvas Fireworks | Jackrugile | 6,200 Kb |
| Importable Clearfix | Corysimmons | 1,411 Kb |
| Twitch Live Channels | Inkblotty | 4,956 Kb |
| Price | Catcode | 2,623 Kb |
Do you want hide your ip address?
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!