Accessible Responsive Nav

Developer
Luke Watts
Size
4,188 Kb
Views
34,408
  1. Accessible Responsive Nav Previews
  2. Accessible Responsive Nav HTML Codes
  3. Accessible Responsive Nav CSS Codes
  4. Accessible Responsive Nav JS Codes

How do I make an accessible responsive nav?

Based on Adobe's Accessible Dropdown Menu. What is a accessible responsive nav? How do you make a accessible responsive nav? This script and codes were developed by Luke Watts on 14 August 2022, Sunday.

Accessible Responsive Nav Previews
IQ Test

Accessible Responsive Nav - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Accessible Responsive Nav</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<button class="menu-toggle"><span class="ion-android-menu" id="menu-toggle-icon"></span><span class="screen-reader">toggle menu</span></button>
<nav class="main-menu"> <ul class="nav-menu"> <li class="nav-item"><a href="#">Home</a></li> <li class="nav-item"><a href="#">DOE</a> <div class="sub-nav"> <ul class="sub-nav-group"> <li><a href="#">Services 1</a></li> <li><a href="#">Services 2</a></li> </ul> </div> </li> <li class="nav-item"><a href="#">My Councils</a> <div class="sub-nav"> <ul class="sub-nav-group"> <li><a href="#">Item 0</a></li> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> </ul> </div> </li> <li class="nav-item"><a href="#">Advice</a></li> <li class="nav-item"><a href="#">Policy</a></li> <li class="nav-item"><a href="#">Legislation</a></li> <li class="nav-item"><a href="#">Tools</a></li><span class="date">Fri, Apr 01, 2016</span> </ul>
</nav> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/57260/jquery-accessibleMegaMenu.js'></script> <script src="js/index.js"></script>
</body>
</html>

Accessible Responsive Nav - Script Codes CSS Codes

*, *::before, *::after { box-sizing: border-box;
}
.menu-toggle { display: block; padding: 0.5em 1em;
}
.main-menu { width: 100%;
}
.main-menu.mobile .closed li { display: none;
}
.main-menu.mobile .closed span.date { display: none;
}
.main-menu .nav-menu { display: block; position: relative; margin: 0; padding: 0; z-index: 15;
}
.main-menu .nav-item { padding: 0; margin: 0;
}
.main-menu .nav-item > a { position: relative; display: block; padding: 0.5em 1em;
}
.main-menu .nav-item > a.open { z-index: 1;
}
.main-menu .date { display: block; padding: 0.5em 1em;
}
.main-menu .sub-nav ul { display: inline-block; vertical-align: top; margin: 0 1em 0 0; padding: 0;
}
.main-menu .sub-nav li { display: block;
}
.main-menu .sub-nav li a { display: block; padding: 0.5em 1em;
}
.main-menu .sub-nav.open { display: block;
}
.main-menu .sub-nav .sub-nav-group { width: 100%; margin: 0;
}
@media (min-width: 800px) { .main-menu { display: inline-block; } .main-menu .nav-item { display: inline-block; } .main-menu .nav-item a { display: inline-block; } .main-menu .sub-nav { width: 15em; position: absolute; display: none; } .main-menu .date { display: inline-block; float: right; text-align: right; }
}
.main-menu { background-color: #202022; text-align: center;
}
.main-menu .sub-nav li { color: white; border: none;
}
.main-menu .nav-menu { list-style: none;
}
.main-menu .nav-menu a { color: white; text-decoration: none;
}
.main-menu .nav-menu a:focus { outline: none;
}
.main-menu .sub-nav { background-color: #202022;
}
.main-menu .sub-nav li { border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.main-menu .sub-nav-group { list-style: none;
}
.main-menu .date { color: #a3a3a3;
}
@media (min-width: 800px) { .menu-toggle { display: none; } .main-menu { text-align: left; } .main-menu .nav-item > a { border: 2px solid transparent; } .main-menu .nav-item > a.open { background-color: black; border: 2px solid black; } .main-menu .nav-item > a:hover { background-color: black; } .main-menu .nav-item > a:focus { outline: none; background-color: black; border: 2px solid #ffbf47; } .main-menu .sub-nav { background-color: #1174bb; } .main-menu .sub-nav li a { border: 2px solid transparent; } .main-menu .sub-nav li a:hover { background-color: black; } .main-menu .sub-nav li a:focus { outline: none; background-color: black; }
}
.menu-toggle { background-color: #202022; color: white; border: none; font-size: 1.5em; width: 100%;
}
.menu-toggle:active, .menu-toggle:focus { outline: none;
}
.menu-toggle .screen-reader { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;
}

Accessible Responsive Nav - Script Codes JS Codes

'use strict';
var $menuToggle = $('.menu-toggle');
var $menuToggleIcon = $('#menu-toggle-icon');
var $mainMenu = $('.main-menu');
var $navMenu = $('.nav-menu');
if ($(window).innerWidth() > 800) { $mainMenu.accessibleMegaMenu();
} else { $mainMenu.addClass('mobile'); $navMenu.addClass('closed'); $menuToggle.click(function(e) { $navMenu.toggleClass('closed'); if ($navMenu.hasClass('closed')) { $menuToggleIcon.removeClass('ion-android-close').addClass('ion-android-menu'); } else { $menuToggleIcon.removeClass('ion-android-menu').addClass('ion-android-close'); } });
}
Accessible Responsive Nav - Script Codes
Accessible Responsive Nav - Script Codes
Home Page Home
Developer Luke Watts
Username lukewatts
Uploaded August 14, 2022
Rating 3
Size 4,188 Kb
Views 34,408
Do you need developer help for Accessible Responsive 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!

Luke Watts (lukewatts) Script Codes
Name
Webkit Background Text Clip
HUD Animation Test
Media Card
Pure CSS Dial 01
Form Inputs
A Pen by Luke Watts
OFF CANVAS MENU
Turnable LED Dial
Animated Hover Effects
Footer Concept 02
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!