Pure CSS Menu Navigation

Developer
Izzy Skye
Size
2,485 Kb
Views
22,264
  1. Pure CSS Menu Navigation Previews
  2. Pure CSS Menu Navigation HTML Codes
  3. Pure CSS Menu Navigation CSS Codes

How do I make an pure css menu navigation?

This is a pure css menu navigation, making use of the transition property.. What is a pure css menu navigation? How do you make a pure css menu navigation? This script and codes were developed by Izzy Skye on 27 October 2022, Thursday.

Pure CSS Menu Navigation Previews
IQ Test

Pure CSS Menu Navigation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS Menu Navigation</title> <link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,100' rel='stylesheet' type='text/css'>
<div class="fullWidth header"> <div class="container"> <div class="col-xs-12 col-sm-2 col-md-3 col-md-offset-1 col-lg-4 col-lg-offset-1 header-logo"><a href="#" class="header-logo-name">WHITE.</a></div> <div class="col-xs-12 col-sm-10 col-md-8 col-lg-6 header-nav"> <ul> <li> <a href="#" class="header-nav-link header-nav-top-link">Home</a> </li> <li> <a href="#" class="header-nav-link header-nav-top-link">About Us</a> <ul> <li><a href="#" class="header-nav-link header-nav-sub-link">Who are we?</a></li> <li><a href="#" class="header-nav-link header-nav-sub-link">Careers</a></li> <li><a href="#" class="header-nav-link header-nav-sub-link">Press</a></li> </ul> </li> <li> <a href="#" class="header-nav-link header-nav-top-link">Services</a> <ul> <li><a href="#" class="header-nav-link header-nav-sub-link">Analytics and CRO</a></li> <li><a href="#" class="header-nav-link header-nav-sub-link">Branded Content</a></li> <li><a href="#" class="header-nav-link header-nav-sub-link">Pay Per Click</a></li> <li><a href="#" class="header-nav-link header-nav-sub-link">Search Engine Optimisation</a></li> </ul> </li> <li> <a href="#" class="header-nav-link header-nav-top-link">Case Studies</a> <ul> <li><a href="#" class="header-nav-link header-nav-sub-link">Trafalgar Tours</a></li> <li><a href="#" class="header-nav-link header-nav-sub-link">Nominet</a></li> <li><a href="#" class="header-nav-link header-nav-sub-link">Miele GB</a></li> <li><a href="#" class="header-nav-link header-nav-sub-link">M&G Investments</a></li> <li><a href="#" class="header-nav-link header-nav-sub-link">Deloitte LLP</a></li> <li><a href="#" class="header-nav-link header-nav-sub-link">Christie+Co</a></li> <li><a href="#" class="header-nav-link header-nav-sub-link">Audley Travel</a></li> </ul> </li> <li> <a href="#" class="header-nav-link header-nav-top-link">Blog</a> </li> <li> <a href="#" class="header-nav-link header-nav-top-link">Contact Us</a> </li> </ul> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Pure CSS Menu Navigation - Script Codes CSS Codes

body {margin:0;padding:0;}
.header {background-color:#111;}
* {transition:all 0.3s;-webkit-transition:all 0.3s;font-family: 'Roboto', sans-serif;}
.header-nav {position:relative;float:left;margin:0 auto;}
.header-nav ul {position:absolute;float:left;list-style:none;margin:0;padding:0;}
.header-nav ul li {position:relative;float:left;border-left:4px solid rgba(224, 52, 106, 1);}
.header-nav ul li ul {margin-left:-4px;}
.header-nav > ul {position:relative;}
.header-nav > ul > li:last-child {border-right:4px solid rgba(224, 52, 106, 1);}
.header-nav > ul > li > .header-nav-link + ul li {width:150px;opacity:0;height:0;margin-top:-48px;border-bottom:2px solid rgba(224, 52, 106, 1);}
.header-nav > ul > li:hover .header-nav-link + ul > li {opacity:1;height:auto;margin-top:0;}
.header-nav .header-nav-link {float:left;text-decoration:none;color:#FFF;font-weight:300;padding:15px;width:100%;}
.header-nav .header-nav-link:hover {background-color:rgba(224, 52, 106, 1) !important;}
.header-nav .header-nav-top-link {padding: 25px 15px 25px;}
.header-nav ul li:hover .header-nav-link {background-color:#333;}
.header-nav ul li:hover .header-nav-top-link {background-color:rgba(224, 52, 106, 0.8);}
.header-nav > ul > li > .header-nav-top-link + ul {top:70px;}
.header-nav > ul > li:hover .header-nav-sub-link {background-color:#333;}
.header-logo > .header-logo-name {float:left;color:#FFF;font-size:30px;font-weight:bold;padding:14px 0;}
.header-logo > .header-logo-name:hover {text-decoration:none;}
@media (max-width: 767px) { .header-nav > ul > li {width:100%;border-right:4px solid rgba(224, 52, 106, 1);border-bottom:2px solid rgba(224, 52, 106, 1);} .header-nav > ul > li:first-child > a {font-size:18px;font-weight:400;} .header-nav > ul > li:last-child {border-bottom:none;} .header-nav > ul > li > .header-nav-top-link + ul {position:relative;top:0px;left:4px;width:100%;} .header-nav > ul > li > .header-nav-top-link + ul li {position:relative;float:left;border-left:none;width:100%;}
}
Pure CSS Menu Navigation - Script Codes
Pure CSS Menu Navigation - Script Codes
Home Page Home
Developer Izzy Skye
Username zephyr
Uploaded October 27, 2022
Rating 4
Size 2,485 Kb
Views 22,264
Do you need developer help for Pure CSS Menu 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!

Izzy Skye (zephyr) Script Codes
Name
Animated Chart Cards
Pure CSS Menu Transition
Simple Pure CSS Loader
Pure CSS Loader
Aperture Science style loading
JQuery Slider
Vanilla JS Pattern Locker
Really simple burger menu
Dynamic Spinning Cubes
Pure CSS Wordpress Fancyboxes
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!