Table of Contents
It’s been a long time since we did some tutorial focused on stretching our HTML and CSS skills. Today we will practice via another piece of CSS tips and tricks series. This series had a fast begin, but then it kind of disappeared under dust. Let’s bring it back to live with this post.
What do we have on the plate? Our goal is to create nice navigation that will slide in when we hover over the icon for navigation (yes, the burger one). Everything will be controlled only by CSS. So if your JavaScript skills are not that rock solid, don’t worry, you will not need them today. In order to get this done, we will need two external resources. Both of them are fonts hosted on CDNs. First will be beautiful sans-serif font “Raleway” hosted on Google. Second will be font awesome that will provide us with “burger” icon for our navigation. The links are following:
Resources:
//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css http://fonts.googleapis.com/css?family=Raleway:400,700
You can also find the code for this tutorial on Codepen:
https://codepen.io/d3v3r0/pen/ilIEF
I will not use any other resources like normalize or reset stylesheets. All you will need you will see here or on Codepen. Let’s start with html.
HTML
We will start with creating basic HTML structure. First line will contain doctype with “html”. After will follow <html> tag with “lang” attribute set to “en”. Default language of this tutorial is English. Inside <html> tags we will write head and body tags. Head section will contain <meta> tag for “charset” set to “utf-8”. This is for character coding. Next will be <title> tags with name of this tutorial. After title will follow two more <meta> tags.
First will be for mobile devices. Its name is “viewport” and its content will be set to “width=device-width, initial-scale=1, user-scalable=no”. First part the controls the viewport and sets it to width of device the page is viewed on. Second part – initial-scale – controls the zoom. The last part allow or forbid the user to zoom in and out.
Second <meta> tag will be “standard” tag for description with content set to “CSS tips and tricks #10 – Auto-hidding navigation tutorial in pure CSS”.
HTML:
<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”utf-8”> <title>CSS tips and tricks #10 - Auto-hidding navigation in CSS tutorial</title> <meta name=”viewport” content=”width=device-width, initial-scale=1.0, user-scalable=no”> <meta name=”description” content=”CSS tips and tricks #10 - Auto-hidding navigation tutorial in pure CSS”> </head> <body></body> </html>
Now we will create a skeleton for navigation. Whole navigation will be wrapped inside of <header> tag with “role” attribute set to “banner”. Inside we will nest <nav> tag with also with “role” attribute set to “navigation”. Between <nav> opening and closing tags will be i tag for icon followed by unordered list (<uls>). <i> tag will have two classes – “fa” and “fa-bars”. These classes are created and used by fontawesome. “fa” is for identifying right font family and related CSS styles and “fa-bars” is for specific icon – “burger”. List will have one class “nav” and contain five anchor tags (<a>) wrapped inside list items. That is all for HTML.
HTML:
<header role="banner">
<nav role="navigation">
<i class="fa fa-bars"></i>
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</nav>
</header>
– note: “role” attribute is mainly for screen readers and it is used to increase accessibility of website.
CSS
When we are done with HTML, it is time to jump into CSS and work on the styling of this project. We will start with setting the typography. This require us to set select body and create new rule with “font” property set to “16px” and font family of “Raleway” with “sans-serif” as fallback (of course we will you use shorthand). After this, we will go with outside-in approach by setting “margin” and “padding” of html and body elements to “0”. Then we will set “box-sizing” property to “border-box” for every element on the page (* – universal selector). Now padding will not influence width or height of the element.
CSS:
/*Typography*/
body {font: 16px "Raleway", sans-serif;}
/*Layout*/
html,
body {
margin: 0;
padding: 0;
}
*,
*:before,
*:after {box-sizing: border-box;}
Next thing is to style “burger” icon. We will start by setting “padding” to .5em (16*5 = 80px). Font size will be 1.5em. To create like-button style let’s set background to #2980b9 (light blue – belize hole). The color will be simple – #fff (white). To imitate anchor tag or button we will include “cursor” property set to “pointer”. You can also use <a> tag instead of <i>. For “focus” and “hover” states we will change the “background” to lighter blue – #2472a4 – and darker blue – #2c89c6 – for “active” states. Let’s also add “transition” property set to “background .3s” to this icon.
CSS:
/*Navigation*/
.fa-bars {
padding: .5em;
font-size: 1.5em;
background: #2980b9;
color: #fff;
cursor: pointer;
transition: background .3s;
}
.fa-bars:focus, .fa-bars:hover {background: #2472a4;}
.fa-bars:active {background: #2c89c6;}
Now we will style unordered list. This element has class “nav” so we will select it via this class. First is to set “position” property to “relative” (we will move with navigation to create sliding effect). After modifying “position” we can change “left” property and set it to “-10em” – width of the list. Let’s also get rid of the white space around by setting “margin” and “padding” to “0”. “width” of the list is, as was said, “10em”. We will also remove the bullet points by setting “list-style-type” to “none”. List will have background of belize hole blue just like “burger icon” – #2980b9. The last rule is “transition” property set to “left .53s”. This will create that smooth sliding effect from side of the screen.
CSS:
.nav {
position: relative;
left: -10em;
margin: 0;
padding: 0;
width: 10em;
list-style-type: none;
background: #2980b9;
transition: left .53s;
}
Next, we will focus on list items and anchor tags. Styles for list items will be very simple. We will select all of them except the first one and set the “border-top” property to “0.1em dashed #409ad5”. It will create light dashed line to divide individual items of the list.
.nav li:not(:first-child) {border-top: 0.1em dashed #409ad5;}
When it comes to anchor tags, we will start by setting the “display” property to “block”. “padding” will be “.75em 0” (shorthand: top-bottom left-right). To center the text let’s set ”text-align” to “center”. Let’s also get rid of the underline by setting “text-decoration” to “none”. Color of text will be #fff (white). We will also include rule for “transition” set to “background .3s”. “focus” and “hover” states will contain only “background” property set to darker blue – “#2472a4”. “active” state will also contain “background” set to lighter blue – “#2c89c6”. These colors are exactly the same as styles for icon.
CSS:
.nav a {
display: block;
padding: .75em 0;
text-align: center;
text-decoration: none;
color: #fff;
transition: background .3s;
}
.nav a:focus, .nav a:hover {background: #2472a4;}
.nav a:active {background: #2c89c6;}
The last and most important thing to do is to create styles for sliding. To get this done we will select the icon with “hover” state followed by adjacent sibling selector and “nav” class. Whole mechanism will be composed of “left” property set to “0”. To make navigation visible while hovering not just over the icon, but also over the navigation itself, we will apply this rule also on “nav” class with “hover” state.
CSS:
i:hover + .nav,
.nav:hover {left: 0;}
Summary
With this last rule we finished our today’s project and achieved our overall goal. The navigation is fully working, sliding to screen when we hover over icon and disappearing otherwise. As said in the beginning, no JavaScript was used. You can also modify the code by removing the “left” property and using “transform” property along with “translate()” method instead.
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
