Today we will create nice sliding navigation using on CSS3 techniques. You may argue that with JavaScript it is much easier – with jQuery you need just a few lines of code -, but remember that not every one has JavaScript allowed in his browser. Another thing is that, personally, I don’t like overwhelming websites with JavaScript unless it is absolutelly necessary. My opinion is that it is always better to test your skills in HTML and CSS and to push yourself to the limit while trying to figure out other ways how to do something. I have to admit, that this tutorial – even it is very easy – caused me some hard times. Let’s get to work …
As in previous tutorials we will begin with creating the basic HTML structure for our project. This will include doctype with language declaration, <html> tag with language set on english (since it is language of majority of readers), <head> with <title> and couple <meta> tags just for practice and finally <body> tag.
<!doctype html> <html lang="en"> <head> <title>Sliding navigation tutorial without JavaScript</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <meta name="HandheldFriendly" content="true"> <meta name="description" content="Sliding navigation tutorial without JavaScript using only HTML5 and CSS3 technologies."> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"> <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Ubuntu:400,500"> <link rel="stylesheet" href="css/html5.doctor.reset.css"> <link rel="stylesheet" href="css/style.css"> </head> <body></body> </html>
As you can see, head of the page contains almost classic stuff. Charset for setting character-set of the page, viewport for optimized for mobile devices, short description, two fonts from online repositories – first is font Ubuntu for typography of the page and second is fontawesome for bar icon. After sheets for fonts (put them before your stylesheet in order to make them work – cascading order) there is a reset style sheet. Job of this style sheet is simply to reset all the styles to their default state to make them look and behave same across the browsers. I use one downloaded from html5doctor. The last one is our working style sheet.
Now, we will create a <section> element with class wrapper to literally wrap up whole page. Inside this element we will nest <div> tag with class “fa” and “fa-bars”. These classes are for fontawesome style sheet. First class is for setting general style for any fontawesome character and the second is for rendering our “bar” icon. Inside this div we will nest <nav> element. I gave it class “navigation”. That is habit from the old days of HTML 4.01 when <nav> element did not exist. Inside this na will be unordered list with couple of list items and anchor tag inside.
Result:
<section class="wrapper"> <div class="fa fa-bars"> <nav class="navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Clients</a></li> <li><a href="#">Contact Us</a></li> </ul> </nav> </div> </section>
With this, we are done with HTML5 for today. From now on, everything we need to do will be in CSS. As in previous tutorial, styles on codepen are written Sass (I love that preprocessor) and if you want to view plain CSS, click on the “eye” icon on top of CSS(SCSS) window.
First thing we do is to write box-sizing rule (also prefixed versions) with value of border-box for every element (*). This way, the width and height properties of the element includes content, padding and border, but not the margin. In other words … If you add some padding, it will not cause enlargement of the element -> with and height will remain the same. To keep our code short, we will define color rule for body of the page with value of #fff (white).
Result:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {color: #fff;}
Next step is customizing our anchor tags (<a>). Let’s start by setting the display to block, color to #fff (white), font to 400 (normal) 1em and family of “Ubuntu” with sans-serif fallback, text-align to center and text-decoration to none (no underline). Focus and hover states will contain background with value of #eee (light gray) and color of #c00 (Crimson red). Active state will contain only color property with value of #a00 (red little bit lighter than Crimson; my favorite and also brand color).
Result:
a {
display: block;
color: #fff;
font: 400 1em "Ubuntu", sans-serif;
text-align: center;
text-decoration: none;
}
a:focus,
a:hover {
background: #eee;
color: #c00;
}
a:active {color: #a00;}
Now we will take care about the wrapper. Width of wrapper will be 100% (full width of browser window) and min-height 480px.
Result:
.wrapper {
width: 100%;
min-height: 480px;
}
The “bars” icon styles will include relative positioning (for the future when we will position inner nav absolutelly), setting left to 0, padding to .5em to create little bit of space around our icon, background set to #000 (black) and font-size with value of 1.5em (by this we set the size of “bar” icon).
Result:
.fa {
position: relative;
left: 0;
padding: .5em;
background: #000;
font-size: 1.5em;
}
Now we will focus on our navigation … Let’s start by setting its position to absolute alongside with top of 0 and left of -8em (the width of navigation). We will set the width of navigation to 8em so, by asigning the same but negative value to left property, we will move our navigation out of the window. Min-height will be set to 100%, background also to #000 (black), font-size of links will be 0.7em and we will apply transition property.
Transition will create nice animation of moving the navigation between -8 and 0 left when we hover over the ‘bars’ icon. The length of animation depends on the value in seconds we define – 0.5s – and it will apply only to left property.
.navigation {
display: block;
position: absolute;
top: 0;
left: -8em;
width: 8em;
min-height: 100%;
background: #000;
font-size: .7em;
-webkit-transition: left .5s;
transition: left .5s;
}
We have to add one more style to our navigation – to our anchor tags. This will be padding set to 1em to make them little bit bigger.
.navigation ul li a {
padding: 1em;
}
Great. The only thing we have to do, is to create our sliding effect on hover over the “bars” icon. This require just one line of code – setting the “left” property to 0.
Result:
.fa:hover .navigation {
left: 0;
}
Well done! Now you have smoothly sliding navigation without single piece of JavaScript. CSS is awesome, right? I hope you will enjoy it and as always, feel free to use and share this tutorial and code anywhere you wanted. If you found any mistake or better way to achieve the result, please write a comment on Codepen or let me know via twitter. See ya.
Codepen:
https://codepen.io/d3v3r0/pen/HIsyr
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
