@hilemangroup/bp-frontend
Version:
Common shared frontend utilities for boilerplate projects
167 lines (153 loc) • 6.37 kB
HTML
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1" />
<title>Accessible Menu Demo</title>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/bootstrap@4.1.1/dist/css/bootstrap.min.css" />
<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.js"></script>
<script src="./jquery.accessible-menu.js"></script>
<style>
.sr-link-skip.sr-only-focusable:focus {
display: block;
position: absolute;
top: 0.25rem;
left: 0.25rem;
z-index: 1010;
padding: 0.25rem;
background: #ffffff;
outline: 1px dotted;
}
.navbar {
padding: 0;
background: #ebebeb;
}
.navbar ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
align-items: stretch;
background: #ebebeb;
}
.navbar ul ul {
width: 20rem;
position: absolute;
top: 100%;
left: 0;
flex-direction: column;
display: none;
border: 1px solid #ffffff;
}
.navbar ul ul ul {
top: 0;
left: 100%;
}
.navbar ul li:hover > ul,
.navbar ul li.open > ul {
display: flex;
}
.navbar ul > li {
display: block;
position: relative;
}
.navbar ul > li > a {
display: block;
padding: 1rem 1rem;
}
.navbar ul > li > a:hover {
background: #dedede;
}
.navbar ul > li > a:focus {
outline: 1px dotted;
outline-offset: -0.25rem;
}
.navbar ul > li.has-children > a:after {
content: "";
display: inline-block;
margin-left: 0.5rem;
border-top: 0.375rem solid #888888;
border-left: 0.375rem solid transparent;
border-right: 0.375rem solid transparent;
}
.navbar ul ul > li.has-children > a:after {
border-top: 0.375rem solid transparent;
border-left: 0.375rem solid #888888;
border-bottom: 0.375rem solid transparent;
border-right: 0;
}
.navbar ul > li.open > a {
background: #cccccc;
}
.navbar > ul > li > a {
padding: 1rem 1.5rem;
}
</style>
</head>
<body>
<a href="#skip-to-content" class="sr-only sr-only-focusable sr-link-skip">Skip to main content</a>
<header role="banner">
<nav class="navbar">
<div class="container">
<ul>
<li class="has-children">
<a href="#/services">Services</a>
<ul>
<li class="has-children">
<a href="#/services/demand-generation">Demand Generation</a>
<ul>
<li><a href="#/services/demand-generation/inbound-marketing">Inbound-Marketing</a></li>
<li><a href="#/services/demand-generation/content-marketing">Content-Marketing</a></li>
<li><a href="#/services/demand-generation/analytics">Analytics</a></li>
</ul>
</li>
<li><a href="#/services/marketing-automation">Marketing Automation</a></li>
<li><a href="#/services/user-experience">User Experience</a></li>
<li><a href="#/services/visual-design">Visual Design</a></li>
<li><a href="#/services/technology">Technology Services</a></li>
<li><a href="#/services/video">Video</a></li>
</ul>
</li>
<li>
<a href="#/work">Work</a>
</li>
<li class="has-children">
<a href="#/industries">Industries</a>
<ul>
<li><a href="#/industries/healthcare">Healthcare</a></li>
<li><a href="#/industries/b2b">B2B</a></li>
<li><a href="#/industries/technology">Technology</a></li>
<li><a href="#/industries/b2c">B2C</a></li>
</ul>
</li>
<li class="has-children">
<a href="#/about">About</a>
<ul>
<li><a href="#/about/who-we-are">Who We Are</a></li>
<li><a href="#/about/our-team">Our Team</a></li>
<li><a href="#/about/our-partners">Our Partners</a></li>
</ul>
</li>
<li>
<a href="#/contact">Contact</a>
</li>
</ul>
</div>
</nav>
</header>
<main role="main">
<div id="skip-to-content" tabindex="-1"></div>
<div class="pt-4"></div>
<div class="container">
<h1>Accessible Menu Demo</h1>
<a href="./jquery.accessible-menu/README.md">See documentation</a>
</div>
</main>
<script>
jQuery(function ($) {
$('.navbar').accessibleMenu();
});
</script>
</body>
</html>