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 - 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 |
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 |
SVG Noise blended radial | 2,946 Kb |
Grid - Row with minmax | 4,220 Kb |
Bouncing ball arc horizontal | 4,602 Kb |
CSS Responsive animated Accordion | 4,834 Kb |
Reverse cascade | 3,976 Kb |
Grid - two columns with gutters | 2,922 Kb |
IPhone SVG | 3,490 Kb |
SVG animate hamburger to cross | 3,601 Kb |
Offscreen zoom nav | 5,205 Kb |
Experiments with nth-of-type animation | 3,015 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 |
SVG Icons Template | Legofsalmon | 2,618 Kb |
Flexbox Grid - equal height | DaveOrDead | 2,855 Kb |
Simple Carousel Pure CSS | Dangvanthanh | 4,080 Kb |
Wikipedia Viewer | Thalpha | 4,426 Kb |
Pure CSS Dial | Lukewatts | 3,018 Kb |
A Pen by lizz | Lizz | 10,068 Kb |
Simple DevTools | Deegill | 2,511 Kb |
Bloomberg Style Link Hover | Gil-- | 1,609 Kb |
SVG Transform vs CSS Transform | AmeliaBR | 4,175 Kb |
Flower expansion | Sreucherand | 3,425 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!