Flexbox menu
How do I make an flexbox menu?
Quick and dirty flex box menu. What is a flexbox menu? How do you make a flexbox menu? This script and codes were developed by BJack on 07 October 2022, Friday.
Flexbox menu - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flexbox menu</title> <link rel='stylesheet prefetch' href='css/https___s3_us_west_2_amaz.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! */ * { transition: all 0.4s ease-in-out;
}
ul, li { margin: 0 auto; padding: 0; list-style: none;
}
#flex-nav { display: flex; flex-flow: row nowrap; height: auto; width: 100%; box-shadow: 0 0 10px 0 #000;
}
#flex-nav li { font-family: Open Sans; width: calc(100% / 5); text-align: Center; height: auto; color: #fff;
}
#flex-nav li a { padding: 25px; color: #fff; display: block; text-decoration: none;
}
#flex-nav li a i { display: block; font-size: 50pt;
}
#flex-nav li:hover { width: calc(100% / 3);
}
#flex-nav li:hover i { transform: scale(1.25);
}
#flex-nav li:active { transition: all 0.125s ease; width: calc(100% / 4);
}
#flex-nav li:nth-child(1) { background: #b584c5;
}
#flex-nav li:nth-child(2) { background: #fb8dee;
}
#flex-nav li:nth-child(3) { background: #60189d;
}
#flex-nav li:nth-child(4) { background: #968aa6;
}
#flex-nav li:nth-child(5) { background: #478c15;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<nav> <ul id="flex-nav"> <li><a href="#"><i class="fa fa-home"></i>Home</a></li> <li><a href="#"><i class="fa fa-question"></i>About</a></li> <li><a href="#"><i class="fa fa-comments"></i>Blog</a></li> <li><a href="#"><i class="fa fa-briefcase"></i>Portfolio</a></li> <li><a href="#"><i class="fa fa-envelope"></i>Contact</a></li> </ul>
</nav> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Flexbox menu - Script Codes CSS Codes
* { transition: all 0.4s ease-in-out;
}
ul, li { margin: 0 auto; padding: 0; list-style: none;
}
#flex-nav { display: flex; flex-flow: row nowrap; height: auto; width: 100%; box-shadow: 0 0 10px 0 #000;
}
#flex-nav li { font-family: Open Sans; width: calc(100% / 5); text-align: Center; height: auto; color: #fff;
}
#flex-nav li a { padding: 25px; color: #fff; display: block; text-decoration: none;
}
#flex-nav li a i { display: block; font-size: 50pt;
}
#flex-nav li:hover { width: calc(100% / 3);
}
#flex-nav li:hover i { transform: scale(1.25);
}
#flex-nav li:active { transition: all 0.125s ease; width: calc(100% / 4);
}
#flex-nav li:nth-child(1) { background: #b584c5;
}
#flex-nav li:nth-child(2) { background: #fb8dee;
}
#flex-nav li:nth-child(3) { background: #60189d;
}
#flex-nav li:nth-child(4) { background: #968aa6;
}
#flex-nav li:nth-child(5) { background: #478c15;
}
Developer | BJack |
Username | BJack |
Uploaded | October 07, 2022 |
Rating | 3 |
Size | 3,293 Kb |
Views | 22,264 |
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 |
Audio Slider | 4,960 Kb |
Coffee loader | 2,706 Kb |
Another top menu | 3,809 Kb |
Animated Slide Hamburger Mobile Menu | 2,247 Kb |
Remembrance Day 2014. | 2,966 Kb |
CSS3 Circular Loading | 2,408 Kb |
Weather Widget | 4,037 Kb |
Mobile Menu | 4,158 Kb |
Fullscreen-slide-in animated menu | 4,644 Kb |
Penmau5 | 3,811 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 |
Multi column experiment. | Spylefkaditis | 2,805 Kb |
Knob rotation | Alemesre | 2,122 Kb |
Slide In Panel | Vikvarg | 2,811 Kb |
Amazing CSS Menu with Notification Badges | Faizanasad | 2,549 Kb |
Expandable Left Side Bar with jQuery animate | Retrofuturistic | 2,483 Kb |
Local Weather App - FreeCodeCamp | TrevorWelch | 4,134 Kb |
CSS3 Form Page Design | Rssatnam | 3,613 Kb |
Two Element Typeface | Chrisota | 4,942 Kb |
Codero Sitemap | S1m0ne | 28,169 Kb |
CSS3 Media Queries demo | Machal | 1,824 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!