Pure CSS Flexbox Navigation

Developer
Andy Hoffman
Size
3,012 Kb
Views
30,360
  1. Pure CSS Flexbox Navigation Previews
  2. Pure CSS Flexbox Navigation HTML Codes
  3. Pure CSS Flexbox Navigation CSS Codes

How do I make an pure css flexbox navigation?

A pure CSS approach to a nav menu using Flexbox.. What is a pure css flexbox navigation? How do you make a pure css flexbox navigation? This script and codes were developed by Andy Hoffman on 24 August 2022, Wednesday.

Pure CSS Flexbox Navigation Previews
IQ Test

Pure CSS Flexbox Navigation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS Flexbox Navigation</title> <link href='https://fonts.googleapis.com/css?family=Arimo' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <label for="css-toggle-menu">MENU</label>
<input type="checkbox" id="css-toggle-menu" name="css-toggle-menu">
<nav aria-label="header-links"> <ul> <li><a href="#">purpose</a> <li><a href="#">general wrinkles</a> <li><a href="#">dryer sheets</a> <li><a href="#">cold-calling</a> <li><a href="#">sinbad</a> </ul>
</nav>
</body>
</html>

Pure CSS Flexbox Navigation - Script Codes CSS Codes

html, body, ul { margin: 0; padding: 0;
}
* { box-sizing: border-box; font-family: Arimo;
}
ul { width: 100%; border-radius: 3px; background: rgba(253, 153, 0, 0.5); padding: 1em; -webkit-transform: translateX(0); transform: translateX(0); -ms-flex-pack: distribute; justify-content: space-around; display: -webkit-box; display: -ms-flexbox; display: flex;
}
@media screen and (max-width: 700px) { ul { padding-top: 3em; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: absolute; }
}
li { list-style: none; display: inline-block; padding: 1em; overflow: hidden;
}
li a { display: block; text-decoration: none; color: #333; font-size: 0.8em; text-transform: uppercase; padding: 1em; white-space: nowrap; background-image: -webkit-linear-gradient(right, green 50%, yellow 50%); background-image: linear-gradient(to left, green 50%, yellow 50%); background-position: 0; background-size: 200%; -webkit-transition: all 0.4s; transition: all 0.4s;
}
li a:hover, li a:focus { background-position: -100%; color: white;
}
[type=checkbox] { display: none; width: 36px; height: 36px; background: #555; color: #fff; text-align: center; line-height: 36px; font-size: 1.6rem; border-radius: 4px;
}
[type=checkbox]:checked ~ nav ul { -webkit-transform: translateX(-100%); transform: translateX(-100%);
}
@media screen and (min-width: 701px) { [type=checkbox]:checked ~ nav ul { -webkit-transform: translateX(0); transform: translateX(0); }
}
label { position: absolute; right: 1em; top: 1em; background: black; color: white; border: none; padding: 1em; visibility: hidden; font-size: 80%; cursor: pointer;
}
@media screen and (max-width: 700px) { label { visibility: visible; z-index: 1; }
}
Pure CSS Flexbox Navigation - Script Codes
Pure CSS Flexbox Navigation - Script Codes
Home Page Home
Developer Andy Hoffman
Username antibland
Uploaded August 24, 2022
Rating 3
Size 3,012 Kb
Views 30,360
Do you need developer help for Pure CSS Flexbox 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!

Andy Hoffman (antibland) Script Codes
Name
Plain Text Contenteditable
Animate fill color via currentColor
Skewed Frame
Animated Stacked Pages
Flexbox Wrapping
Trusted Clicks
Working with jQuery Marquee plugin
Full page image fade in
Active Nav Item On Top
A Pen by Andy Hoffman
Create amazing captions 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!