Accessible Responsive Nav
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 - 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'); } });
}
Developer | Luke Watts |
Username | lukewatts |
Uploaded | August 14, 2022 |
Rating | 3 |
Size | 4,188 Kb |
Views | 34,408 |
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 |
Media Module Pattern | 2,823 Kb |
Pure CSS Dial 01 | 3,925 Kb |
Style System | 4,691 Kb |
Product Item Additional Info On Hover | 6,792 Kb |
Sass Get Function | 2,155 Kb |
A Pen by Luke Watts | 1,723 Kb |
OFF CANVAS MENU | 3,206 Kb |
Pure CSS Dial | 3,018 Kb |
Pure CSS Glowing Volume Dial | 2,876 Kb |
Accessible Responsive Nav | 4,188 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 |
Button Option Group | Honchoman | 1,859 Kb |
Drill-down Map | Good886 | 8,484 Kb |
Table Exercise | Fresco | 9,585 Kb |
Pure CSS Dial | Lukewatts | 3,018 Kb |
Highbrow Basic HTML Lesson 8 | Kimlarocca | 2,094 Kb |
Simple Accordion | Wearebold | 3,683 Kb |
SVG email test v2.0 | M_J_Robbins | 2,090 Kb |
A Pen by Alex Edwards | Exards | 8,218 Kb |
Nested table email layout | Massimo-cassandro | 2,355 Kb |
Vanilla JS - A toggleClass function | Woodwork | 2,532 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!