In today’s tutorial, we’re going to take a look at the creation of a CSS off canvas navigation menu. First off, what is an off-canvas navigation menu. It’s a menu that is hidden/pushed aside from the screen, so it’s not visible by default, and only appears, slides in when you click a button. In this case, it’ll html checkbox label, which will be positioned at the top left of the screen.
To build this navigation menu up, we’ll use only CSS and HTML, no javascript. Also we’ll use fontawesome for some icons.
[tutorial_details]
Let’s start with downloading font-awesome and adding it to our working directory. Also, we need an index.html and style.css
Building the FrameWork
After you’ve included the main stylesheet and font-awesome into your index.html, it should look like this:
<!DOCTYPE html>
<html>
<head>
<title>Pure CSS Off-canves Menu</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="fontawesome/css/font-awesome.min.css">
</head>
<body>
</body>
</html>Then we can start building up the navigation menu itself:
<!-- Checkbox to show/hide the navigation menu -->
<input type="checkbox" name="menu" value="toggle" id="toggle">
<!-- navigation menu container -->
<section id="menu">
<!-- Lable for #showmenu to hide the menu/uncheck the checkbox -->
<label class="toggle" for="toggle"><i class="fa fa-2x fa-bars"></i></label>
<!-- Menu content -->
<nav class="menuContent"></nav>
</section>
<!-- /#menu -->As you can see above, we have the navigation container, and inside it with got a label, for our checkbox. But the checkbox is outside the container. We do this so we can target the #menu container easily with CSS and hiding and showing it when the the checkbox is checked/unchecked.
The next step is to give our menu container some styles, a width of 300px for example and a height of 100%. Also, we need to add a position: fixedand top:0
z-index: 9999;
position:fixed; and z-index:9999; in order for the menu to be able to be on top of all other elements.
#menu {
display: block;
width: 300px;
min-height: 100%;
top: 0;
z-index: 9999;
position:fixed;
}Now, to make all this function, first we need to position our checkbox’s label, so it’s visible all the time.
#menu .toggle {
top: 0;
left: 300px;
padding:10px;
position: absolute;
}As you can see, we have a left:300px, this is the exact same as the width of our #menu. I’ll explain soon why is this important.
Now to show/hide the menu, we need to first hide the checkbox, because no-one wants to see it. And we use the label to check/uncheck it.
#toggle{
display: none;
}Then, we use the :checked css selector and the + css selector. And since we have our checkbox, outside of our #menu container, we can easily select it with #toggle:checked + #menu:
/* Pushing the Menu off the canves */
#menu {
left: -300px; /* must be the same as the width of the menu */
-webkit-transition: left 1s;
transition: left 1s;
}
/* Showing the menu then the Checkbox is checked */
#toggle:checked + #menu {
left: 0;
-webkit-transition: left 1s; /* Safari 3.1 to 6.0 */
transition: left 1s;
}The first code block, selects the #menu when the checkbox is uncheck, and pushes it aside from the screen so it’s not visible. ( left:-300px – also needs to be the same as the width of the #menu ). Then, when the checkbox is checked, we have left:0, which means, it comes back to the left side of the screen, to 0 pixels from the left edge.
At this point, the container is done. All we have left, is to add the navigation links and what not.
Adding the actual navigation menu
Now, all we need is the navigation links. THis is pretty streightforward. We make an ul list with li items in it.
To get started, we create a <nav> element, with the class of .menuContent, inside that, we add a <span> and use it as the title of our menu. Then, we create the <ul> with <li>
<!-- Menu content -->
<nav class="menuContent">
<!-- Menu Section title -->
<span>Navigation Links</span>
<!-- First Menu -->
<ul>
<li><a href="#"><i class="fa fa-home"></i> Home</a></li>
<li><a href="#"><i class="fa fa-picture-o"></i> Portfolio</a></li>
<li><a href="#"><i class="fa fa-coffee"></i> Blog</a></li>
<li><a href="#"><i class="fa fa-user"></i> About</a></li>
<li><a href="#"><i class="fa fa-envelope-o"></i> Contact</a></li>
</ul>
</nav>Now, to make it look a bit better, we add some css to it.
#menu span {
display: block;
font-size: 22px;
margin: 20px 10px;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu ul li {
font-size:19px;
border-bottom: 1px solid #2c3e50;
}
#menu ul li a {
display: block;
padding: 10px;
text-decoration: none;
color:#fff;
}
#menu ul ul li {
background-color: #2c3e50;
}
#menu ul li a:hover,
#menu ul ul li a {
padding: 10px 10px 10px 30px;
}
#menu ul ul li a:hover {
padding: 10px 10px 10px 60px;
}
#menu ul li a,
#menu ul li a:hover,
#menu ul ul li a,
#menu ul ul li a:hover {
-webkit-transition: padding 0.5s; /* Safari 3.1 to 6.0 */
transition: padding 0.5s;
}Adding a dropdown
Adding a dropdown to the menu, is a little bit more complicated. We’ll use a checkbox to hide / show it. This has only one issue. If the dropdown is open, and we close the menu, and open it again, the dropdown will still be open.
To add the dropdown, you simply create an <li></li> like so:
<li>
<!-- Second tier dropdown -->
<label for="dropdown-1" class="dropdown-1"><a>Blog</a></label>
<input type="checkbox" name="menu" id="dropdown-1">
<ul class="dropdown-1">
<!-- Dropdown links here -->
<li><a href="#"><i class="fa fa-code"></i> Tutorials</a></li>
<li><a href="#"><i class="fa fa-eye"></i> Inspiration</a></li>
</ul>
</li>As u can see, we use the label as the dropdown text. This cannot be a link sadly.
[su_note]Note! The class on the label, and on the <ul> MUST be the same as the ID of the checkbox. Otherwise it will not work![/su_note]
To make this dropdown actually work, we need to add some more CSS:
/* Hiding the checkboxes so only the labels are visible */
input[id^="dropdown"],
ul[class^="dropdown"] {
display: none;
}
input[id^="dropdown"]:checked + ul[class^="dropdown"] {
height: auto;
display: block;
}And you’re done! you can repeat this step as many times as u want, u can even create multilevel dropdowns.
If you want to tinker around or want to see how the code looks when it’s all put together, feel free to download the source code. If you have any questions or suggestions, feel free to leave a comment down below!