Navigation is the most important part of the page. There is no doubt about it. Let’s create a cool and simple navigation you can use on your pages in the future. In this short tutorial we will also take a look at new display value flexbox. Flexbox is great tool to create responsive navigation, as you will see. At the bottom of the page is link to codepen so you can take a look at it in real life.
The basic structure of our page and the navigation part. As always, we used the HTML5 specification tags. Html, head and body tags are necessary for creating any page. Think about them as a backbone of your web page. Nav tag comes from HTML5 and is supposed to contain navigation. The “role” attribute is more for semantic purpose and for devices like readers. With it, you are telling the browser or device what the particular element should be used for. Also, you can use this attribute for targeting the element for styling by using more advanced selectors – nav[role=”navigation”]. Note that I added a “nav” class to our unordered list. This is just for easier work the list and for better specificity.
<!doctype html> <html lang="en"> <head></head> <body> <nav role='navigation'> <ul class="nav"> <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>
Now we will play with styles a bit. First task is to set the maximum width of navigation element to 75rem. If you are not familiar with rem units, take a look at the earlier article on this subject – The measurements in Web Design(odkaz). Due to weaker support – IE 11, Firefox 30 and up, Chrome 35 and up, Safari 7 and up, Opera 22 and up – I included a fallback with same value in pixels. So, if you are using browser that don’t support rem units, your browser will load the pixel value and rem will be skipped. Remember to always define fallback as first to make them work. After styling the nav, we will remove margins, padding and also the dots before list elements in our unordered list.
nav {
max-width: 1200px;
max-width: 75rem;
}
.navigation {
margin: 0;
padding: 0;
list-style-type: none;
}
This will simply reset all styles to plain text. Next is to remove blue color and the underline decoration of the anchor tags. The color of our links will be black.
.navigation li a {
color: #000;
text-decoration: none;
}
Now it looks more eye-friendly. Now we will float individual anchor tags to the left so they will appear on one line next to each other. The whole CSS will look like this:
.navigation li a {
float: left;
color: #000;
text-decoration: none;
}
Now we have everything on one line in black color and without any underlines. Looks like a movie from 50′. Don’t worry because now I’m going to show you the superpowers of flexbox! But first a little introduction… Flexbox or CSS3 Flexible Box is a layout mode providing support for the arrangement of elements on a page such that the elements behave as we want them to when the page layout must adapt to different screen sizes and different device displays. Flexible box model provides a huge improvement over the block model in that it does not use floats, nor do the flex container’s margins collapse with the margins of its contents. It is great tool that will push your responsive layouts on next level.
First thing we have to do in order to use flexbox properties is to create new “display” rule for our unordered list (.navigation).
.navigation {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
margin: 0;
padding: 0;
list-style-type: none;
}
As with rem units, I also included prefixes for older browsers. However, if you are using the newest version of your browser, all you need is “display: flex;” line. After this, you might be little confused since nothing is happening yet. Let’s add one property that will show you what flexbox can do. This property is “justify-content” and we will set it to “space-around”.
.navigation {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
justify-content: space-around;
margin: 0;
padding: 0;
list-style-type: none;
}
Cool right! Now all the anchor tags are placed across the whole width of navigation with same proportion of space between them. This is done by the “space-around” value. Another values you can try are flex-start, flex-end, center, space-between and stretch. Play a bit with these values to understand how the work.
Right now, we have a nice navigation that will adapt to any resolution. One more thing…
.navigation {
.
flex-wrap: wrap;
.
}
Flexwrap will make sure, that when the screen get smaller instead to fit the anchor links onto one line and cause overlapping of them, you will wrap the items as needed so they will be stacked individually on multiple lines.
Our navigation looks good, but what about some hover effect? Let’s add a padding of .5em and border-radius to default state and then change of background color to tomato, color of the text to white on hover with nice transition between these states.
.navigation li a {
.
padding: .5em;
border-radius: 4px;
transition: all .25s;
.
}
.navigation li a:hover {
background: tomato;
color: #fff;
}
With this we are done for today. We have nice responsive navigation packed with some hover effects.
Codepen:
https://codepen.io/d3v3r0/pen/jcxrb
Complete Guide to flexbox on CSS-Tricks:
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
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
