This is an attempt to work out the essential pieces for a navigation menu that slides in and out on the left of the screen.
What is the core set of HTML, CSS, and Javascript necessary to create a usable version?
<body>
<nav id="site-nav">
<!-- A big list of nav items goes here-->
</nav>
<main>
<div class="site-nav-toggle">
<!-- This is just something to click on in order to open and close the navigation menu -->
Toggle menu
</div>
<!-- All the main page content goes here -->
</main>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="script.js"></script>
</body>#site-nav {
position: absolute;
left: -15rem;
width: 15rem;
}
main {
position: absolute;
left: 0rem;
right: 0rem;
}
#site-nav, main {
transition: left 0.3s ease-in-out;
overflow-y: auto;
height: 100%;
}
.site-nav-open main {
left: 15rem;
}
.site-nav-open #site-nav {
left: 0rem;
}
@media (max-width: 600px) {
main {
width: 100%;
}
}The javascript is used to create event handlers that add or remove a "site-nav-open" class on the body element.
$('html').on('click', "body.site-nav-open main", toggleMenu)
$('html').on('click', "body:not(.site-nav-open) #site-nav-toggle", toggleMenu)
function toggleMenu(){
$("body").toggleClass("site-nav-open");
}- Basic Navigation Patterns Nielsen Norman Group. This covers the options described by the hamburger menu. The label or symbol used is less important than the offscreen navigation. This type of navigation is useful on content-heavy sites with a large set of browse-able navigation menu options, such as books, reference sites.
- Looking at a wikipedia page on mobile, you'll notice the use of the hamburger menu. Wikipedia is lacks enough of a hierarchy to fill the open menu with links. Wikipedia pages are browse primarily through search or following links. However, even with about 5 options, the options are moved to a hidden menu. Another thing noticeable here. Once the menu is revealed, clicking anywhere on the sliver of main content will close the menu. The exit trigger surface area is wider than the entrance.