Skip to content

Instantly share code, notes, and snippets.

@michaelwhyte

michaelwhyte/drop-down-nav.css

Created May 31, 2018 14:23
Show Gist options
  • Save michaelwhyte/9a5c56aad17f1b289a45dac534b15e27 to your computer and use it in GitHub Desktop.
Save michaelwhyte/9a5c56aad17f1b289a45dac534b15e27 to your computer and use it in GitHub Desktop.
Download ZIP
Keyboard accessible drop down navigation
Raw
drop-down-nav.css
@charset "utf-8";
/* CSS Document */
body {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
nav {
height: 46px;
background-color: #B24AF8;
display: flex;
justify-content: center;
}
button {
display: none;
}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
background-color: #B24AF8;
}
nav > ul {
display: flex;
}
nav a {
color: #fff;
text-decoration: none;
font-weight: bold;
padding: 0 20px;
line-height: 46px;
display: block;
border-left: 2px solid #690086;
}
nav > ul > li:last-child > a {
border-right: 2px solid #690086;
}
nav a:focus,
nav a:hover,
nav a:active {
background-color: #7830A8;
}
nav li {
position: relative;
}
nav ul > li > ul {
position: absolute;
height: 0;
overflow: hidden;
}
nav ul > li:hover > ul,
nav ul > li.hover > ul {
height: auto;
}
nav ul ul a {
border-left: none;
border-top: 1px solid #690086;
}
nav .dropdown > a {
position: relative;
}
nav .dropdown > a:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 7px solid #fff;
bottom: 5px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
@media only screen and (max-width: 600px){
button {
display: block;
width: 49px;
height: 35px;
background-image: url(../images/hamburger.png);
background-size: cover;
border: none;
background-color: transparent;
text-indent: 150%;
overflow: hidden;
margin-top: 5px;
margin-bottom: 5px;
cursor: pointer;
}
nav {
flex-wrap: wrap;
}
nav > ul {
flex-wrap: wrap;
flex: 1 1 100%;
display: none;
}
nav > .open {
display: flex;
}
nav > ul > * {
flex: 1 1 100%;
text-align: center;
}
nav a {
border-left: none;
border-top: 1px solid #690086;
}
nav > ul > li:last-child > a {
border-right: none;
}
nav ul > li > ul {
position: static;
background-color: #000;
}
nav ul ul a {
border-top: 1px solid #fff;
}
}
Raw
drop-down-nav.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Dropdown Navigation</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="styles/styles-dropdown-navigation.css">
</head>
<body>
<nav>
<button>Menu</button>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li class="dropdown"><a href="#0">Services</a>
<ul>
<li><a href="#">Windows</a></li>
<li><a href="#">Exteriors</a></li>
<li><a href="#">Balconies</a></li>
<li><a href="#">Bathrooms</a></li>
<li><a href="#">Kitchens</a></li>
</ul>
</li>
<li class="dropdown"><a href="#0">Plans</a>
<ul>
<li><a href="#">Basic</a></li>
<li><a href="#">Medium</a></li>
<li><a href="#">Premium</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="scripts/script-dropdown-navigation.js"></script>
</body>
</html>
Raw
drop-down-nav.js
// JavaScript Document
var $btn = $('button');
var $nav = $('nav');
var $navUl = $('nav > ul');
$btn.click(function(){
$navUl.toggleClass('open');
});
// The following JS modified from
// JS found at this CodePen: http://codepen.io/laviperchik/pen/dlcBt
$.fn.accessibleDropDown = function () {
var el = $(this);
/* Make dropdown menus keyboard accessible */
el.find('a').focus(function() {
$(this).parents("li").addClass("hover");
}).blur(function() {
$(this).parents("li").removeClass("hover");
});
}
$nav.accessibleDropDown();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment