Flexbox-based responsive menu
How do I make an flexbox-based responsive menu?
Flexbox = peanut butter and RWD = chocolate. Separately, they're pretty great, but together, they are amazing. I needed a menu for a single-page scrolly-type site, so I made onez.. What is a flexbox-based responsive menu? How do you make a flexbox-based responsive menu? This script and codes were developed by Mitch Pruitt on 08 November 2022, Tuesday.
Flexbox-based responsive menu - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flexbox-based responsive menu</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.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! */ @import url(https://fonts.googleapis.com/css?family=Lato:400,700);
@import url(http://weloveiconfonts.com/api/?family=entypo);
nav { position: fixed; width: 100%; font-family: "Lato"; text-transform: uppercase; background-color: #e74c3c;
}
nav ul { max-width: 62.5em; margin: auto; display: flex; align-items: center;
}
nav ul li { padding: 1em;
}
nav ul li a { text-decoration: none; color: #c0392b; transition: all .25s;
}
nav ul li a:hover { color: #ecf0f1;
}
nav ul li.brand { font-size: 2em; color: #c0392b; flex: 4; text-align: left;
}
nav ul li.meat { font-size: 1.25em; color: #ecf0f1; flex: 1; text-align: right;
}
@media screen and (max-width: 700px) { nav { transition: all .25s ease; } nav.open { top: 0; } nav.closed { top: -13em; } nav ul { flex-direction: column; } nav ul li { width: 100%; padding: .75em; border-bottom: 1px #c0392b dotted; } nav ul li.brand { flex: 1; text-align: center; transition: all .25s; order: 5; } nav ul li.brand:hover { color: #ecf0f1; cursor: pointer; } nav ul li.meat { text-align: left; padding-left: 2em; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <nav> <ul> <li class="brand"><h1>Meats!</h1></li> <li class="meat"><a href="#">Chicken</a></li> <li class="meat"><a href="#">Beef</a></li> <li class="meat"><a href="#">Pork</a></li> <li class="meat"><a href="#">Fish</a></li> </ul>
</nav> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Flexbox-based responsive menu - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Lato:400,700);
@import url(http://weloveiconfonts.com/api/?family=entypo);
nav { position: fixed; width: 100%; font-family: "Lato"; text-transform: uppercase; background-color: #e74c3c;
}
nav ul { max-width: 62.5em; margin: auto; display: flex; align-items: center;
}
nav ul li { padding: 1em;
}
nav ul li a { text-decoration: none; color: #c0392b; transition: all .25s;
}
nav ul li a:hover { color: #ecf0f1;
}
nav ul li.brand { font-size: 2em; color: #c0392b; flex: 4; text-align: left;
}
nav ul li.meat { font-size: 1.25em; color: #ecf0f1; flex: 1; text-align: right;
}
@media screen and (max-width: 700px) { nav { transition: all .25s ease; } nav.open { top: 0; } nav.closed { top: -13em; } nav ul { flex-direction: column; } nav ul li { width: 100%; padding: .75em; border-bottom: 1px #c0392b dotted; } nav ul li.brand { flex: 1; text-align: center; transition: all .25s; order: 5; } nav ul li.brand:hover { color: #ecf0f1; cursor: pointer; } nav ul li.meat { text-align: left; padding-left: 2em; }
}
Flexbox-based responsive menu - Script Codes JS Codes
$(document).ready(function() { $(window).resize(function() { if($(window).width() < 701) { $('nav').addClass("closed"); $('nav').click(function() { $(this).toggleClass("open closed"); }); } }) .resize();
});
Developer | Mitch Pruitt |
Username | mitchdot |
Uploaded | November 08, 2022 |
Rating | 3.5 |
Size | 3,589 Kb |
Views | 14,168 |
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 |
Threadless-style rollover menu | 2,195 Kb |
Zoomy image rollover | 2,764 Kb |
Snazzy fixed backgrounds | 4,927 Kb |
Flexbox quote box | 3,441 Kb |
Segmented control | 3,759 Kb |
Image caption overlay | 2,107 Kb |
Simple responsive drop-down menu | 2,178 Kb |
The Iron Triangle | 2,997 Kb |
ASCII triangle image overlay | 2,200 Kb |
Underlined form fields | 2,323 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 |
Calendar | Miroot | 2,033 Kb |
Wikipedia Viewer | Odylic | 2,333 Kb |
CSS- UI Element States Pseudo-Classes | Tesla809 | 2,206 Kb |
SCSS Social Icons Flat | Mattsince87 | 3,482 Kb |
Brian The CSS Bee | Jonitrythall | 3,922 Kb |
Cloudy Spiral CSS animation | Hakimel | 6,587 Kb |
Get third wednesday | Wojtek1150 | 2,691 Kb |
Mesmerizing octopus | Jllodra | 3,549 Kb |
E-mail Template | SoloMDFK | 4,871 Kb |
Testing Portfolio Page | Sideshowli | 3,395 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!