Flex dropdown nav

Developer
Kevin
Size
3,962 Kb
Views
14,168
  1. Flex dropdown nav Previews
  2. Flex dropdown nav HTML Codes
  3. Flex dropdown nav CSS Codes
  4. Flex dropdown nav JS Codes

How do I make an flex dropdown nav?

What is a flex dropdown nav? How do you make a flex dropdown nav? This script and codes were developed by Kevin on 13 October 2022, Thursday.

Flex dropdown nav Previews
IQ Test

Flex dropdown nav - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>flex dropdown nav</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto"'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav id="nav-mainNav">
<ul> <li class="home"><a href="#"><i class="fa fa-home fa-1x"></i></a></li> <li><a aria-haspopup="true" href="#" class="icon">Admin</a> <ul class="dropdown-menu" aria-hidden="true" aria-label="submenu"> <li><a href="#">User Admin</a></li> <li><a href="#">Benefit Admin</a></li> <li><a href="#">Enrollment</a></li> <li><a href="#">Company Admin</a></li> <li><a href="#">Survey Admin</a></li> <li><a href="#">Time Off Admin</a></li> </ul> </li> <li><a href="#" class="icon">Clients</a> <ul class="dropdown-menu"> <li><a href="#">Client Admin</a></li> <li><a href="#">Pending Queue</a></li> <li><a href="#">Template Manager</a></li> </ul> </li> <li><a href="#" class="icon">Reports</a> <ul class="dropdown-menu"> <li><a href="#">Report Center</a></li> <li><a href="#">Web Analytics</a></li> <li><a href="#">Dashboard</a></li> <li><a href="#">Dashboard Admin</a></li> <li><a href="#">Benchmarking</a></li> <li><a href="#">ACA Resources</a></li> </ul> </li> <li><a href="#" class="icon">Library</a> <ul class="dropdown-menu"> <li><a href="#">Content Admin</a></li> <li><a href="#">Questions Admin</a></li> <li><a href="#">Townsquare</a></li> <li><a href="#">Specials Admin</a></li> <li><a href="#">News</a></li> <li><a href="#">Glossary Admin</a></li> <li><a href="#">Directory</a></li> </ul> </li> <li><a href="#" class="icon">Billing</a> <ul class="dropdown-menu"> <li><a href="#">Billing Suite</a></li> <li><a href="#">Invoices</a></li> <li><a href="#">Payments</a></li> </ul> </li> <li><a href="#" class="icon">Connections</a> <ul class="dropdown-menu"> <li><a href="#">Import Admin</a></li> <li><a href="#">Vendor Interfaces</a></li> <li><a href="#">Feed Builder</a></li> <li><a href="#">EDI OE Manager</a></li> <li><a href="#">Payroll Suite</a></li> <li><a href="#">Payroll Suite 2.0</a></li> <li><a href="#">File Upload</a></li> </ul> </li> <li><a href="#">Tracker</a></li> <li><a href="#">Role</a></li>
</ul>
</nav>
<h1>Existing mobile nav</h1> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Flex dropdown nav - Script Codes CSS Codes

* { box-sizing: inherit;
}
html { box-sizing: border-box;
}
a { text-decoration: none;
}
ul,
li { padding: 0; margin: 0; list-style-type: none;
}
body { background: white; font-family: 'Roboto', sans-serif; font-size: 1em;
}
h1 { display: none;
}
nav { display: -ms-flexbox; display: -ms-flex; display: -webkit-box; display: flex;
}
nav ul { display: -ms-flexbox; display: -ms-flex; display: -webkit-box; display: flex; -ms-flex: 1; -webkit-box-flex: 1; flex: 1;
}
nav ul .home { background: #295c79; -ms-flex: 0 !important; -webkit-box-flex: 0 !important; flex: 0 !important;
}
nav ul li { -ms-flex: 1; -webkit-box-flex: 1; flex: 1; background: #4e7991; cursor: pointer; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in;
}
nav ul li:not(:first-child) { border-left: 1px solid #7697a9;
}
nav ul li.hover,
nav ul li:hover { background: #295c79;
}
nav ul li.hover > ul,
nav ul li:hover > ul { display: -ms-flexbox; display: -ms-flex; display: -webkit-box; display: flex; -ms-flex-flow: column; flex-flow: column; background: #295c79; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in;
}
nav ul li a { display: block; color: #fff; text-align: left; padding: 1em; -webkit-align-self: center; -ms-align-self: center; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center;
}
nav ul li .icon:after { font-family: 'FontAwesome'; content: "\f078"; padding-left: 5px;
}
nav .dropdown-menu { display: none; position: absolute; top: 51px;
}
nav .dropdown-menu li { border-top: 1px solid #7697a9; width: 100%;
}
nav .dropdown-menu li a { display: block; padding-right: 3em;
}
@media only screen and (min-width: 767px) and (max-width: 959px) { nav #main-nav li a { padding: 1em .5em; } #main-nav .home { background: #295c79; padding: 0 1em; }
}
@media only screen and (max-width: 766px) { nav { display: none; } h1 { display: -ms-flexbox; display: -ms-flex; display: -webkit-box; display: flex; -ms-justify-content: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
}

Flex dropdown nav - Script Codes JS Codes

$(document).ready(function() {	var $nav = $('#nav-mainNav'),	$dropdown = $('#nav-mainNav li'),	$doc = $(document);	$nav.on('focus', 'li', function() {	$(this).addClass('hover').siblings().removeClass('hover');	});	$nav.on('mouseout', 'li', function() {	$(this).siblings().removeClass('hover');	});	$doc.on('mouseover', function(e) {	if (e.target != $nav) {	$dropdown.removeClass('hover');	}	});
});
Flex dropdown nav - Script Codes
Flex dropdown nav - Script Codes
Home Page Home
Developer Kevin
Username gnarfugh
Uploaded October 13, 2022
Rating 3
Size 3,962 Kb
Views 14,168
Do you need developer help for Flex dropdown nav?

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!

Kevin (gnarfugh) Script Codes
Name
Mess svg logo
Sticky nav
Hamburger
Vertical rhythm less mixin
Old calculator
Highlight table
Google Maps api
Timeline on scroll
Understanding closures
Hover tabs with column wrapper
Create amazing love letters 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!