Table of Contents
Yep, that’s right! Another post from CSS tips and tricks is here. Our job for today is to create fullscreen navigation with fading effect between shown and hidden state. Navigation will be centered, no matter what the resolution of device will be, and links will be stacked vertically. Since this is all about CSS, there will be no JavaScript included or required. For those of you looking for some JS, take a look at JavaScript section. For the rest, let’s dive in …
When navigation will be hidden, there will be a “burger” icon displayed. Otherwise, “close” icon will be shown. This icon will be placed in top right corner of the page. What will we need to get this project done?
Resources
We will use two external resources for this project. First resource will be fontawesome for “burger” and close icon. Second resource will be image file provided by gratisography.com and hosted on my personal imgur account. This image is free to use. As yesterday, I will not use any other code (normalize or reset stylesheet), so everything you will need is here.
Font:
//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css
Background:
http://i.imgur.com/8oqmNEx.jpg
Live demo of this project is also avalable on Codepen:
https://codepen.io/d3v3r0/pen/nlCjL
HTML
HTML file will, as always, start with basic HTML5 valid structure elements including doctype, html, head and body. Doctype declaration will be html. Since the default language of this page is English, <html> will have attribute “lang” set to “en”. Head section will compose of one <meta> tag for “charset” set to “utf-8”, which is for character coding, <title> tag with title of the page, another <meta> tag for viewport and one more <meta> tag for “description”.
HTML:
<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”utf-8”> <title>CSS tips and tricks #11 – Fullscreen fading navigation in CSS tutorial<title> <meta name=”viewport” content=”width=device-width, initial-scale=1, user-scalable=no”> <meta name=”description” content=”Tutorial on fullscreen fading navigation created in CSS. No JavaScript needed or required.”> </head> <body></body> </html>
After setting the required structure to create valid HTML document, we can create a skelet for this project. We will start with creating <section> tag with class “sec-main” and “role” attribute set to “main” (“role” attribute is primarily for screen readers and increases accessibility of the website). This will be the intro screen. Inside this section will be nested <input> tag, <label> tag and div with class ”overlay”. <input> tag will have attribute “type” set to “checkbox” and “id” of “nav-check”. <label> tag will have “for” attribute set to id of checkbox – “nav-check”. These two elements will be used to to show / hide the mechanism later on.
Inside the “overlay” div will be unordered list with class “nav” with four links. List will be wrapped inside a <nav> tag with “role” attribute set to “navigation”. This all will then be nested inside <header> tag with “role” attribute set to “banner”. This is all for HTML. Final code will look like this:
HTML:
<section class="sec-main" role=”main”>
<input id="nav-check" type="checkbox" />
<label for="nav-check"></label>
<div class="overlay">
<header role="banner">
<nav role="navigation">
<ul class="nav">
<li><a href="#">About Me</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</nav>
</header>
</div>
</section>
CSS
We will start the CSS by setting the typography. This will require us to create rule for body containing “font” property set to “16px” and font family of “sans-serif”. Then, we will select html and body elements and set their “margin” and “padding” to “0” along with setting “width” and “height” properties to “100%”. This modification of “width” and “height” properties will make the page fullscreen.
CSS:
/*Typography*/
body {font: 16px sans-serif;}
/*Layout*/
html,
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
Next thing is to style the section. We will also set its “width” and “height” to “100%” like we did with the html and body. To avoid repetition, let’s use this rule also for div element with class “overlay”. Section will also have a “background” property set to image hosted on imgur (link is above) and “background-size” property set to cover.
CSS:
/*Section*/
section,
.overlay {
width: 100%;
height: 100%;
}
section {
background: url(http://i.imgur.com/8oqmNEx.jpg) no-repeat center center;
background-size: cover;
}
Now let’s take care about the checkbox and label (icon). Checkbox will be hidden by setting its “display” property to “none”. Label’s “position” property will be set to “fixed” along with “top” and “right” set to “0.625em” (10px / 16px). To make sure the icon will be always visible, we will set its “z-index” to “99”. After this, we will set its “padding” to “.72em 0”, “width” to “3em” and “border-radius” to “50%”. This will create nice circle. To make it more visible, let’s set the “background” to pastel red – #e74c3c – and the color to white – #fff. Text will be aligned to “center”. To mimick a clickable element, the “cursor” property will be set to “pointer”.
CSS:
input {
display: none;
}
label {
position: fixed;
top: 10px;
right: 10px;
z-index: 99;
padding: .72em 0;
width: 3em;
text-align: center;
background: #e74c3c;
color: #fff;
border-radius: 50%;
cursor: pointer;
}
In order to show the icon, we have to create new rule for “:before” pseudo-class of label. Inside this rule will be “content” set to “f0c9”, which is code of “burger” icon specified in fontawesome stylesheet. We will also set “font” property to “1.55em” and font family of “fontAwesome”. Let’s also change the “background” to darker red – #d62c1a – for “hover” state of the label.
CSS:
label:before {
content: “f0c9”;
font: 1.55em fontAwesome;
}
label:hover {background: #d62c1a;}
It’s time to finish styling of the overlay. It will have “position” set to “relative”, “z-index” of “2”, “background” set to semi-transparent dark grey (rgba(51, 51, 51, 0.8)), “opacity” of “0” and “visibility” set to “hidden”.
CSS:
.overlay {
position: relative;
z-index: 2;
background: rgba(51, 51, 51, 0.8);
opacity: 0;
visibility: hidden;
}
Now we will create styles for navigation and use a little trick to center it. This trick requires us to set the “position” to “absolute”, “top”, “right”, “bottom” and “left” properties set to “0” and “margin” set to “auto”. We will also reset the “padding” by setting it to “0”. “width” will be “10em” and “height” will be “12em”. With this, navigation will be always center both, vertically and horizontally. As last thing, will will remove the bullet points by setting “list-style-type” to “none”.
CSS:
.nav {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
padding: 0;
width: 10em;
height: 12em;
list-style-type: none;
}
Anchor tags inside the list will have “display” property set to “block”, “padding” of “.25em 0”, “color” set to “#fff” (white), “font-size” of “1.85em” and they will be aligned to “center”. Also, let’s remove the underline by setting “text-decoration” to none. “focus” and “hover” state will contain “color” property set to “#e74c3c” and, for “active” state, set to #d62c1a.
CSS:
.nav a {
display: block;
padding: .25em 0;
color: #fff;
font-size: 1.85em;
text-align: center;
text-decoration: none;
}
.nav a:focus, .nav a:hover {
color: #e74c3c;
}
.nav a:active {
color: #d62c1a;
}
To make interactions with elements smoother we will use “transition” set to “all .3s” on label, “overlay” div and anchor tags.
CSS:
label, .overlay, .nav a {transition: all .3s;}
The last thing is to create the mechanism for showing / hiding the navigation. As said in the beginning, this will be done via label and checkbox. To show the “overlay” div, which contain navigation, we will select input element with “:checked” state followed by sibling selector (~) and class “overlay” and set “visibility” to “visible” and “opacity” to “1”. Opacity, along with transition used before will create fading effect. Let’s also change the icon for “:checked” state of checkbox by selecting this state followed by adjacent selector (+) and label with “:before” pseudo-class and setting its “content” to “f00d” (close icon).
CSS:
input:checked ~ .overlay {
visibility: visible;
opacity: 1;
}
input:checked + label:before {content: “f00d”;}
Summary
Phew! We are done and our goal was fully achieved. We have a fullscreen navigation with fading effect for switching between show and hidden state. I hope you enjoyed this tutorial. AD
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
Hi Alex,
It is nearly midnight here. I just read your blog, love your dedication. By the way, where do you get your images please, they are very unusual. The old typewriter is a museum piece? No? 🙂
What are your website business policies, do you have a checklist? Would you share it with me?
I need to know if my list and contract terms has everything. Do you have 2 lists, one for design and one for development?
Thank you.
Kind regards,
Brigitte.
I have couple websites for images with free licence. gratisography.com, 500px.com, deathtothestockphoto.com, picjumbo.com, unsplash.com and jaymantri.com for example. And yes, it is little bit older typewriteer :-).