Navigation
A website's navigation is the most important tool to the user. It should provide quick access to all the website has to offer. It should also not get in the way. Below are examples of popular responsive patterns that make navigation websites easy on both small and large screens.
Simple StackView Pattern
Easy This pattern is very simple and easy to implement. The navigation does not change much from small to large screen. All pages can be seen at once and sometimes shift under the page title on smaller screens.
Pros:
- This requires very little code
- This is great for smaller websites with fewer navigation items
Cons:
- Harder to scale up for larger website with more information/content and navigation items
Example
HTML
<header class="clearfix">
<h1>Logo</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Our Portfolio</a></li>
<li><a href="#">Our Services</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</header>
CSS
header h1 {
margin-bottom: 0.25em;
}
nav li {
list-style: none;
padding: 0.25em 0.5em 0 0;
}
nav li a {
text-decoration: none;
}
@media only screen and (min-width: 750px){
header h1 {
float: left;
margin:0;
}
nav {
float: right;
}
nav li {
display: inline-block;
}
}
Anchor and Footer View Pattern
Easy This pattern consists of a jump link in the header that links to a menu in the Anchor. It is easy to create but the jump to the bottom of the page can be jarring.
Pros:
- Content is not pushed down even further by longer navigations
- Can accommodate for medium navigations (+-8 links) since it is only taking up space at the bottom of the page
- Very easy to implement
Cons:
- The jump from the top of the page to the bottom can be jarring
- Long navigations can still get unruly
- Navigation can be missed
Example
HTML
<header class="clearfix">
<h1>Logo</h1>
<a class="menu-btn" href="#menu">Menu</a>
</header>
<div class="content">
<p>Content goes here.</p>
</div>
<footer>
<div class="footer-inner">
<h3>Footer</h3>
<nav id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Our Portfolio</a></li>
<li><a href="#">Our Services</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</div>
</footer>
CSS
.menu-btn {
float:right;
}
header h1 {
float: left;
}
nav li {
list-style: none;
padding: 0.50em;
}
nav li a {
text-decoration: none;
}
footer {
padding: 0.75em;
}
@media screen and (min-width: 750px) {
.menu-btn {
display: none;
}
nav {
position: absolute;
top:0.75em;
right:0.75em;
}
nav li {
display: inline-block;
}
}
The ToggleView Pattern
Medium The next two patterns are the most common RWD navigational patterns and will need JS. The toggle is a navigation that is hidden in a drawer on small devices. The drawer can then be toggled open and shut using JS.
Pros:
- This pattern can hold larger navigation systems
- This takes up zero pixels when closed
Cons:
- This still cannot hold huge navigation systems
Example
HTML
<body>
<header>
<div class="header-inner">
<h1>Logo</h1>
<button class="menu-toggle">Menu</button>
</div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Our Portfolio</a></li>
<li><a href="#">Our Services</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</header>
</body>
CSS
header {
padding:0;
}
header h1 {
float: left;
}
nav {
padding: 0.75em;
background: lightgray;
display: none;
}
nav li {
padding: 0.25em 0 0 0.5em;
}
nav a {
display: block;
}
.menu-toggle {
float: right;
text-decoration: none;
padding: 0.5em;
border: 1px solid lightgray;
border-radius: 3px;
}
.menu-toggle:hover {
background-color: lightgray;
}
.open nav {
display: block;
}
@media screen and (min-width: 750px) {
.menu-toggle {
display: none;
}
nav {
overflow: auto;
display: block;
}
nav ul {
float: right;
}
nav li {
display: inline-block;
}
}
JavaScript
var menuTog = document.getElementsByClassName("menu-toggle")[0];
menuTog.onclick = function() {
document.getElementsByTagName('body')[0].classList.toggle('open');
}
Off Canvas (Navigation)View Pattern
Medium This navigation is hidden off screen on smaller resolutions until the menu button is clicked. The page then moves to the side, making the off canvas navigation appear to be shifted back on stage.
Pros:
- This pattern can accommodate larger navigations
- This navigation does does not take up screen real estate when closed
- This is an elegant solution
Cons:
- This may not play well with more complex layouts that are also positioning elements relative to the viewport
Example
HTML
<body>
<div class="on-canvas">
<header>
<div class="header-inner">
<h1>Logo</h1>
<button href="#" class="menu-toggle">Menu</button>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Our Portfolio</a></li>
<li><a href="#">Our Services</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</div>
</header>
</div>
<nav class="off-canvas">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Our Portfolio</a></li>
<li><a href="#">Our Services</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</body>
CSS
h1 {
display: inline;
}
nav {
padding: 0.75em;
}
nav li {
padding: 0.25em 0 0 0.5em;
}
nav a {
display: block;
}
.menu-toggle {
float: right;
text-decoration: none;
padding: 0.5em;
border: 1px solid lightgray;
border-radius: 3px;
}
.menu-toggle:hover {
background-color: lightgray;
}
.on-canvas nav {
display: none;
}
.off-canvas {
display: none;
width: 200px;
position: absolute;
right:0;
top:0;
bottom:0;
background: lightgray;
}
.open .off-canvas {
display: block;
}
.open .on-canvas {
width: 100%;
position: absolute;
left: -200px;
}
@media screen and (min-width: 750px) {
nav li {
display: inline-block;
}
.menu-toggle {
display: none;
}
.open .on-canvas {
position: static;
}
.on-canvas nav {
display: inline-block;
float:right;
}
.open .off-canvas {
display: none;
}
}
JavaScript
var menuTog = document.getElementsByClassName("menu-toggle")[0];
menuTog.onclick = function() {
document.getElementsByTagName('body')[0].classList.toggle('open');
}
The Overlay View Pattern
Medium When this navigation is open on smaller screens it takes up the whole screen and covers the page. The menu is then centered on top of a usually slightly transparent background. The whole navigation is an overlay on top of the page; hence the name.
Pros:
- This pattern allows the user to focus on the navigation since it is taking up the whole screen
Cons:
- This pattern still cannot hold complex navigation systems
Example
HTML
<header>
<div class="header-inner">
<h1>Logo</h1>
<button href="#" class="menu-toggle">Menu</button>
<nav>
<button class="close">×</button>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Our Portfolio</a></li>
<li><a href="#">Our Services</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</div>
</header>
CSS
h1 {
display: inline;
}
nav {
padding: 0.75em;
}
nav li {
padding: 0.25em 0 0 0.5em;
}
nav a {
display: block;
}
.menu-toggle {
float: right;
text-decoration: none;
padding: 0.5em;
border: 1px solid lightgray;
border-radius: 3px;
}
.menu-toggle:hover {
background-color: lightgray;
}
nav {
display: none;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background: rgba(255,255,255, 0.8);
text-align: center;
}
nav ul {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
nav a {
font-size: 2em;
margin: 0.5em 0;
line-height: 1;
}
.close {
border:0;
background: transparent;
font-size: 2em;
color: black;
position: absolute;
right:0;
}
.open nav {
display: block;
}
.open .menu-toggle {
display: none;
}
@media screen and (min-width: 750px) {
nav {
display: block;
position: static;
background: transparent;
text-align: left;
float: right;
}
nav ul {
position: static;
transform: translate(0,0);
}
nav li {
display: inline-block;
}
nav a {
font-size: 1em;
}
.menu-toggle, .close {
display: none;
}
}
JavaScript
var menuTog = document.getElementsByClassName("menu-toggle")[0];
var closeTog = document.getElementsByClassName("close")[0];
var body = document.getElementsByTagName("body")[0];
menuTog.onclick = function() {
body.classList.toggle('open');
}
closeTog.onclick = function() {
body.classList.toggle('open');
}