Table of Contents
For today, we will create full-screen stacked navigation with beautiful resizing width effect on hover. Our goal is to create navigation which will take approximately 25% of the page’s width and 100% of its height. If you read previous tutorial on “Full-screen page with centered navigation”, you know what am I talking about. Navigation will contain four items or links which will be stacked on each other like files in your cabinet or drawer. When you hover over the individual link, it will smoothly resize itself into full width of the page. That is all to explain the final vision of our project. Let’s get to work.
HTML
As every time, we will set up our HTML structure with use of the latest HTML5 doctype declaration. Language of the page will be english, so we will also declare lang attribute with value “en” for <html> element. Head section will contain title of the page, meta tag for character set, another meta tag for mobile devices, links to stylesheets and one link for webfont I chose for this project – Amaranth. Amaranth font is a beautiful sans serif font designed by Gesine Todt. We will also use a reset stylesheet. The reason is because I want to set margin and padding to 0 for all elements and to remove decoration on the list items (dots before them). In body of our document we will create <nav> element for nesting a un-ordered list with four list items and anchor tags wrapped by these items. That will be all what’s necessary for our project with regards to HTML.
Result:
<!doctype html> <html lang="en"> <head> <title>Full-screen stacked navigation tutorial</title> <meta charset="utf-8"> <meta viewport="width=device-width, initial-scale=1.0, user-scalable=no"> <link href='http://fonts.googleapis.com/css?family=Amaranth' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="style.css"> </head> <body> <nav> <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> </body> </html>
CSS
The very first thing I want to do is to define our color palette – colors for individual background of the list items. We will use four different pastel colors – turquoise (#1abc9c), emerald (#2ecc71), peter river (#3498db) and amethyst (#9b59b6). Next we have to do in order to achieve full-screen effect is to set width and height properties of html and body to 100%. Since our nav will share the same values, let’s include it to. Also, remember to declare box-sizing rule with border-box for every element to make sure that padding will not influence size of elements.
Result:
* {box-sizing: border-box;}
html,
body,
nav {
width: 100%;
height: 100%;
}
To expand finish styling for our navigation, we will set its position to absolute with top and left properties set to 0. This will place the navigation to top left corner of the page and, along with 100% width and height defined before, will create full-screen effect.
Result:
nav {
position: absolute;
top: 0;
left: 0;
}
Next is to style our un-ordered list. This will be very easy. Since dots are removed by reset stylesheet, we only have to declare rules for width with value of 25% and height with value 100% so it will take full height of the page.
Result:
ul {
width: 25%;
height: 100%;
}
Styling list items will require little bit more work … First, we position them relatively (for creating stack effect), float them on left, set their width to 25% (100% of the un-ordered list divided by four items to make them equally sized), height to 100%, top and bottom border radius to 5px for decoration, slight box shadow for creating illusion that all items are stacked and transition for smooth resizing of their width to 100%.
Result:
ul li {
position: relative;
float: left;
width: 25%;
height: 100%;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
-webkit-box-shadow: 1px 0 5px #000;
box-shadow: 1px 0 5px #000;
-webkit-transition: width .5s;
transition: width .5s;
}
– note: syntax for box-shadow is x y blur and color (x and y are from Cartesian coordinate system).
Let’s set the backgrounds and z-index for our list items individually. First will be turquoise (#1abc9c), second emerald (#2ecc71), third peter river (#3498db) and the last one will be amethyst (#9b59b6). On hover, these colors will be 15% lighter and on active 20% lighter. Z-index will create stacking effect for our list items – they will overlap each other.
Result:
ul li:first-child {
z-index: 4;
background: #1abc9c;
}
ul li:first-child:hover {
background: #3ee4c4;
}
ul li:first-child:active {
background: #55e7ca;
}
ul li:nth-child(2) {
z-index: 3;
background: #2ecc71;
}
ul li:nth-child(2):hover {
background: #69dd9a;
}
ul li:nth-child(2):active {
background: #7ee2a8;
}
ul li:nth-child(3) {
z-index: 2;
background: #3498db;
}
ul li:nth-child(3):hover {
background: #75b9e7;
}
ul li:nth-child(3):active {
background: #8bc4ea;
}
ul li:last-child {
z-index: 1;
background: #9b59b6;
}
ul li:last-child:hover {
background: #bb8ecd;
}
ul li:last-child:active {
background: #c6a0d5;
}
Now we will declare the rest of properties for hover state of list items. We will set their position to absolute (to change the z-index individually later), set width to 100%, border-radius to 0, font-size to 2em (to make the text in anchor tags bigger on hover), and – for effect – cursor to pointer.
Result:
ul li:hover {
position: absolute;
width: 100%;
border-radius: 0;
font-size: 2em;
cursor: pointer;
}
Nex step is to style a bit the anchor tags nested in list items. We will set display to block, position to relative (to use top property), set top to 50% (to center them vertically), set the color to white (#fff), font to normal (400), font-size to 1em and font-family to Amaranth with sans-serif as fallback, text-align to center and finally text decoration to none to remove the underline.
Result:
ul li a {
display: block;
position: relative;
top: 50%;
color: #fff;
font: 400 1em 'Amaranth', sans-serif;
text-align: center;
text-decoration: none;
}
Wow! We did it. We successfully achieved our goal and created beautiful full-screen stacked navigation width colored by pastels with smooth resize effect. Feel free to use and share the code and this tutorial anywhere you wanted. AD
Codepen:
https://codepen.io/d3v3r0/pen/xEfyI
or full-page version:
https://codepen.io/d3v3r0/full/xEfyI/
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
