Nav w fallback 2

Developer
DEADBOOT
Size
4,268 Kb
Views
16,192
  1. Nav w fallback 2 Previews
  2. Nav w fallback 2 HTML Codes
  3. Nav w fallback 2 CSS Codes
  4. Nav w fallback 2 JS Codes

How do I make an nav w fallback 2?

What is a nav w fallback 2? How do you make a nav w fallback 2? This script and codes were developed by DEADBOOT on 15 December 2022, Thursday.

Nav w fallback 2 Previews
IQ Test

Nav w fallback 2 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Nav w fallback 2</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!--
http://bitsofco.de/accessible-multi-level-dropdown-navigation/
https://github.com/ireade/accessible-dropdown-navigation
-->
<html lang="en" class="no-js">
<head>	<meta charset="utf-8">	<title>Accessible Multi-Level Dropdown Navigation</title>	<meta name="viewport" content="width=device-width, initial-scale=1">	<link rel="stylesheet" href="//xxxxmaxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">	<link rel="stylesheet" href="style.css">
</head>
<body>	<div class="container">	<h1>AMLDN</h1>	<p>Accessible Multi-Level Dropdown Navigation. This is the description, where you can write about your website</p>	<nav id="nav">	<ul>	<!-- Menu tooggle on smaller screens -->	<li id="toggleMenu" role="button" aria-haspopup="true">	<a href="/sitemap.html">	<!-- <i aria-hidden="true" class="fa fa-bars">Mammt</i> <i aria-hidden="true" class="fa fa-times">Patt</i> -->	<!-- As icons are being used to represent open/close,	provide hidden text for screen readers -->	<span id="toggleMenu-text" class="fa fa-bars">Menu</span>	<span id="toggleMenu-text" class="fa fa-times">Close</span>	</a>	</li>	<!-- Simple menu items without sub menu -->	<li><a href="/">Home</a></li>	<li><a href="/sitemap.html">Portfolio</a></li>	<li><a href="/sitemap.html">About</a></li>	<li><a href="/sitemap.html">Bio</a></li>	<li><a href="/">Ask</a></li>	<li><a href="/">Submit</a></li>	<!-- Menu item with two levels of sub menu -->	<li>	<a href="/sitemap.html">Lot of shit</a>	<ul>	<li><a href="/">Shows</a></li>	<li><a href="/">Agricoltura</a></li>	<li>	<a href="/">Jackets</a>	<ul>	<li><a href="/">Nice</a></li>	<li><a href="/">Ugly</a></li>	<li><a href="/">Get Married</a></li>	</ul>	</li>	</ul>	</li>	</ul>	</nav>	</div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="script.js"></script>
</body>
</html> <script src="js/index.js"></script>
</body>
</html>

Nav w fallback 2 - Script Codes CSS Codes

html {	font-family: 'Helvetica Neue', 'Arial', sans-serif;
}
.container {	width: 90%;	margin: 0 auto;	text-align: center;
}
a {	color: inherit;
}
/* *	Accessible Multi-Level Dropdown Navigation Menu *	Created by Ire Aderinokun * */
/* Resets */
#nav,
#nav ul,
#nav li {	margin: 0;	padding: 0;	border: 0;	list-style: none;	box-sizing: border-box;
}
#nav {	position: relative;	/* min-height: 60px; */	max-width: 100%;	background-color: #fff;	color: #000;	border: 1px solid green;
}
@media screen and (min-width: 650px) {	#nav {	display: inline-block;	}
}
@media screen and (max-width: 650px) {	#nav {	display: block;	}
}
#nav li {	position: relative;
}
#nav a {	text-decoration: none;	height: 100%;	display: block;	padding: 0 20px;
}
@media screen and (min-width: 650px) {	#nav a:focus {	outline: none;	}
}
.plusMark {	margin-left: 5px;	font-size: 20px;	font-weight: 700;
}
@media screen and (min-width: 650px) {	#nav li {	text-align: left;	width: 200px;	}
}
@media screen and (max-width: 650px) {	#nav li {	text-align: center;	width: 100%;	}
}
/* Any sub menu */
@media screen and (min-width: 650px) {	a + ul {	position: absolute;	}	a + ul:not(.js-showElement) {	display: none;	}
}
@media screen and (max-width: 650px) {	a + ul {	position: relative;	}	a + ul:not(.js-hideElement) {	display: block;	}
}
/* The Main Navigation Bar - Navigation Level One */
#nav > ul,
.fa {	height: 100%;	line-height: 60px;
}
#nav > ul > li {	position: relative;	text-align: center;
}
@media screen and (min-width: 650px) {	#nav > ul > li {	float: left;	width: auto;	}
}
@media screen and (max-width: 650px) {	#nav > ul > li {	float: none;	display: block;	width: 100%;	}
}
#nav > ul > li > a {	xxxbackground-color: #ffdb3a;
}
#nav > ul > li > a:hover,
#nav > ul > li > a:focus,
#nav > ul > li > a.js-openSubMenu {	xxxbackground-color: #D9BA31;
}
#nav > ul > li:hover > a,
#nav > ul > li:focus > a {	xxxbackground-color: #D9BA31;
}
@media screen and (min-width: 650px) {	#nav > ul > li:not(: last-child) {	border-right: 1px solid #D9BA31;	border-bottom: none;	}
}
@media screen and (max-width: 650px) {	#nav > ul > li:not(: last-child) {	border-right: none;	}	#nav > ul > li:not(:last-child):not(:first-child) {	border-bottom: 1px solid #D9BA31;	}
}
#nav > ul > li:not(#toggleMenu):not(.js-showElement) {	/* first level nav li except toggleMenu icon */
}
@media screen and (min-width: 650px) {	#nav > ul > li:not(#toggleMenu):not(.js-showElement) {	display: inline-block;	}
}
@media screen and (max-width: 650px) {	#nav > ul > li:not(#toggleMenu):not(.js-showElement) {	display: none;	}
}
@media screen and (min-width: 650px) {	#nav #toggleMenu {	display: none;	}
}
@media screen and (max-width: 650px) {	#nav #toggleMenu {	display: block;	width: 100%;	}	#nav #toggleMenu.js-open {	border-bottom: 1px solid #D9BA31;	}	#nav #toggleMenu.js-open .fa-times {	display: block;	}	#nav #toggleMenu.js-open .fa-bars {	display: none;	}	#nav #toggleMenu.js-open a {	background-color: #D9BA31;	}	#nav #toggleMenu:not(.js-open) .fa-times {	display: none;	}	#nav #toggleMenu:not(.js-open) .fa-bars {	display: block;	}
}
span#toggleMenu-text {	xxxposition: absolute;	xxxopacity: 0;
}
/* Second Level Dropdown */
#nav > ul > li > ul {	background-color: #D9BA31;
}
@media screen and (min-width: 650px) {	#nav > ul > li > ul {	top: 60px;	left: 0;	}
}
@media screen and (max-width: 650px) {	#nav > ul > li > ul {	width: 100%;	position: relative;	}	#nav > ul > li > ul:not(.js-showElement) {	display: none;	}
}
#nav > ul > li > ul > li > a {	background-color: #D9BA31;
}
#nav > ul > li > ul > li > a:hover,
#nav > ul > li > ul > li > a:focus {	background-color: #ffdb3a;
}
#nav > ul > li > ul > li:not(:last-child) a {	border-bottom: 1px solid #ffdb3a;
}
/* Third Level Dropdown */
@media screen and (min-width: 650px) {	#nav > ul > li > ul > li > ul {	top: 0;	left: 200px;	/* width of ul */	}
}
@media screen and (max-width: 650px) {	#nav > ul > li > ul > li > ul {	width: 100%;	position: relative;	}	#nav > ul > li > ul > li > ul:not(.js-showElement) {	display: none;	}
}
#nav > ul > li > ul > li > ul > li > a {	background-color: #ffdb3a;
}
#nav > ul > li > ul > li > ul > li > a:hover,
#nav > ul > li > ul > li > ul > li > a:focus {	background-color: #D9BA31;
}
#nav > ul > li > ul > li > ul > li:not(:last-child) > a {	border-bottom: 1px solid #D9BA31;
}
/* Javascript classes */
#nav .js-hideElement {	display: none;
}
#nav .js-showElement {	display: block;
}
/* Fallback for users without javascript */
html.no-js li:hover > a + ul,
html.no-js li:focus > a + ul {	display: block;
}
@media screen and (max-width: 650px) {	html.no-js #nav:hover > ul > li:not(#toggleMenu),	html.no-js #nav:focus > ul > li:not(#toggleMenu) {	display: block;	}	html.no-js #nav:hover li:hover > a + ul,	html.no-js #nav:hover li:focus > a + ul,	html.no-js #nav:focus li:hover > a + ul,	html.no-js #nav:focus li:focus > a + ul {	display: block;	}
}

Nav w fallback 2 - Script Codes JS Codes

$(document).ready(function() { // Remove no-js class $('html').removeClass('no-js');	$('#toggleMenu').on('click', function() { if ( $(this).hasClass('js-open') ) { $('#nav > ul > li:not(#toggleMenu)').removeClass('js-showElement'); $(this).removeClass('js-open'); $(this).attr('aria-expanded', false); } else { $('#nav > ul > li:not(#toggleMenu)').addClass('js-showElement'); $(this).addClass('js-open'); $(this).attr('aria-expanded', true); }	return false;	}) // Add plus mark to li that have a sub menu $('li:has("ul") > a').append('<span class="plusMark">+</span>'); // sub menu	// ------------------------ // When interacting with a li that has a sub menu $('li:has("ul")').on('mouseover keyup click mouseleave', function(e) { console.log("test")	// If either -	// tabbing into the li that has a sub menu	// hovering over the li that has a sub menu	if ( e.keyCode === 9 | e.type === 'mouseover' ) {	// Show sub menu	$(this).children('ul').removeClass('js-hideElement'); $(this).children('ul').addClass('js-showElement');	}	// If mouse leaves li that has sub menu	if ( e.type === 'mouseleave' ) {	// hide sub menu	$(this).children('ul').removeClass('js-showElement'); $(this).children('ul').addClass('js-hideElement');	}	// If clicking on li that has a sub menu	if ( e.type === 'click' ) {	// If sub menu is already open	if ( $(this).children('a').hasClass('js-openSubMenu') ) { // remove Open class	$(this).children('a').removeClass('js-openSubMenu');	// Hide sub menu	$(this).children('ul').removeClass('js-showElement'); $(this).children('ul').addClass('js-hideElement');	// If sub menu is closed	} else { // add Open class	$(this).children('a').addClass('js-openSubMenu');	// Show sub menu	$(this).children('ul').removeClass('js-hideElement'); $(this).children('ul').addClass('js-showElement');	}	} // end click event }); // Tabbing through Levels of sub menu	// ------------------------ // If key is pressed while on the last link in a sub menu $('li > ul > li:last-child > a').on('keydown', function(e) {	// If tabbing out of the last link in a sub menu AND not tabbing into another sub menu	if ( (e.keyCode == 9) && $(this).parent('li').children('ul').length == 0 ) {	// Close this sub menu	$(this).parent('li').parent('ul').removeClass('js-showElement'); $(this).parent('li').parent('ul').addClass('js-hideElement');	// If tabbing out of a third level sub menu and there are no other links in the parent (level 2) sub menu	if ( $(this).parent('li').parent('ul').parent('li').parent('ul').parent('li').children('ul').length > 0 && $(this).parent('li').parent('ul').parent('li').is(':last-child') ) {	// Close the parent sub menu (level 2) as well	$(this).parent('li').parent('ul').parent('li').parent('ul').removeClass('js-showElement'); $(this).parent('li').parent('ul').parent('li').parent('ul').addClass('js-hideElement');	}	} })
})
Nav w fallback 2 - Script Codes
Nav w fallback 2 - Script Codes
Home Page Home
Developer DEADBOOT
Username deadboot
Uploaded December 15, 2022
Rating 3
Size 4,268 Kb
Views 16,192
Do you need developer help for Nav w fallback 2?

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!

DEADBOOT (deadboot) Script Codes
Name
Basys_mdd--modernscale
Menu JS Motto
Menu JSM Mode Inline v2
Menu JS w fallback Sitechop
Nav Top Drawer by J. Moore Vanilla JS
Nav w Fallback One Level
Basys_mrmrs
Menu JSM Mode Inline Almost OK
Nav w Fallback Untouched
Nav NoJS
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!