Since the introduction of the “Web 2.0” concept, navigation styling with CSS has been a basic part of web design. CSS is a powerful and incredibly flexible tool for this kind of task, especially since the release of CSS3, which brought a lot of the flexibility many CSS users were craving for, to design a cool functional website navigation bar.
At this time, I’m going to teach you how to code a simple, yet sleek and powerful horizontal HTML navigation bar using nothing but HTML and CSS3.
Take into account that this navigation bar is highly customizable and you don’t have to use the same colors and fonts or even sizes I use in this tutorial. Watch it on YouTube.
Files:
Watch the Video:
Without further ado, let’s dig into the tutorial.
First things first, we need to create an HTML document to put our navigation into.
Create a folder for our project, and inside, create a file called “index.html“, also create a folder called “css” and create a file called “style.css” in there.
Also, at this time we are going to use a very powerful utility called “Font Awesome“, “Font Awesome” is a CSS font featuring tons of useful icons that you can instantly use on your html pages, you can download it HERE. http://fortawesome.github.io/Font-Awesome/
After downloading “Font Awesome”, open the zip file and put the “font” folder inside your project’s folder, and the font-awesome-min.css file inside your “css” folder.
Now let’s begin coding our basic HTML template.
I’m using HTML5, so getting the skeleton is a very easy, very quick task, here’s the code we should have so far.
<!DOCTYPE HTML>
<html>
<head>
<title>CSS3 NavBar</title>
</head>
<body>
. . .
</body>
</html>Now we need to link our CSS files to the HTML, add this code below the <title> element:
<link rel="stylesheet" type="text/css" href="./css/style.css">
<link rel="stylesheet" type="text/css" href="./css/font-awesome.min.css">Please note that in a real world scenario, you would not need a special HTML document for the navigation bar, you would need to put the code inside of the HTML document you want to have the navigation built into.
Now that we linked our CSS files, the only thing left to do in our HTML file is to build the navigation itself (put it between the <body> … </body> tags):
<nav>
<ul>
<!-- MAIN MENU -->
<li><a href="#">Home</a></li>
<li><a href="#">Products <i class="icon-chevron-down"></i></a>
<!-- SUB MENU -->
<ul>
<li><a href="#">Templates</a>
</li>
<li><a href="#">Plugins</a></li>
</ul>
</li>
<li><a href="#">Services <i class="icon-chevron-down"></i></a>
<!-- SUB MENU -->
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Web Development</a></li>
<li><a href="#">Web Customization</a>
</li>
</ul>
</li>
<li><a href="#">Blog</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>I’m using the <nav> tag to build the navigation, the <nav> tag is an HTML5 tag and you won’t find it other versions of HTML like XHTML. If you are not using HTML5, you can always use a <div> tag instead, also, don’t forget to add the ID attribute to that <div> since you would need to replace all of the “nav” selectors in the css with the ID of your <div>.
By this point, we are pretty much done with the HTML part of the project (the “index.html“) and we might as well close the file, this is how it should look:
<!DOCTYPE HTML>
<html>
<head>
<title>CSS3 NavBar</title>
<link rel="stylesheet" type="text/css" href="./css/style.css">
<link rel="stylesheet" type="text/css" href="./css/font-awesome.min.css">
</head>
<body>
<nav>
<ul>
<!-- MAIN MENU -->
<li><a href="#">Home</a></li>
<li><a href="#">Products <i class="icon-chevron-down"></i></a>
<!-- SUB MENU -->
<ul>
<li><a href="#">Templates</a></li>
<li><a href="#">Plugins</a></li>
</ul>
</li>
<li><a href="#">Services <i class="icon-chevron-down"></i></a>
<!-- SUB MENU -->
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Web Development</a></li>
<li><a href="#">Web Customization</a>
</li>
</ul>
</li>
<li><a href="#">Blog</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</body>
</html>Now let’s get to the meat and bones of the project, the “style.css” file.
But first, let’s analyze the structure of our navigation menu a little.
Our menu is basically an unordered list, the list contains many list items (<li>), which are our main navigation elements, and whenever we need to add a dropdown submenu, we add an unordered list inside the list item that’s going to call it.
Also notice, that whenever I made a submenu element, I added <i class=”icon-chevron-down”></i> next to the text inside the link, that is one of Font-Awesome icons.
So the first thing we need to do to our CSS file, is customize the behavior of our main elements, the root <ul> and the main navigation <li> elements.
nav ul {
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
nav li {
margin: 0;
padding: 0;
float: left;
position: relative;
}With that code, what we are doing is set the behavior and look of our main navigation:
1. We set up the first <ul> element in the <nav>, pretty basic stuff, we have a width of 100%, meaning it will show all of its contents, then we reset the margins and padding’s, and then set “list-style” to none in order to make the little dots disappear from the list elements.
2. We set up the <li> elements of the root <ul> element, again, pretty basic stuff so far, we reset the margins and padding’s just like we did with the <ul> element, and then we float them to the left, which turns the list from vertical to horizontal, and finally, we set the position property to relative so our dropdown menus work properly when we set them up.
With the main <ul> and <li> elements out of the way for now, we can now focus on the main part of the navigation and the one that’s going to have most of our customization, the links.
nav a {
padding: 10px 25px;
display: block;
background: rgb(105, 169, 238);
font-family: 'Tahoma';
text-transform: uppercase;
font-size: 18px;
font-weight: 400;
color: white;
text-align: center;
text-decoration: none;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}Ok, so let’s get into detail with this one:
1. The first thing we do is set the padding of the element, which centers our text vertically and horizontally into the <li> element and makes it look a lot better, we also set the display property to block so it works properly, and then we set the background, which is what will give the background color to the whole navigation.
2. Now that the block formatting is out of the way, it’s time to format the font of our text, I don’t think I need to go into detail here, just use any text property you want to in order to make the text look just the way you want it, you can use images and icons too, notice how I used an <i> element with a Font Awesome class next to the links that have a dropdown so there is a little arrow in them.
3. Finally, we set the css3 transitions, by setting the property “transition: all .25s ease;” we are basically telling CSS that whenever there’s a state change like a HOVER on the link element, it should make it with a transition that lasts .25 seconds and apply easing, you can learn about the transition property in HERE: http://www.w3schools.com/css3/css3_transitions.asp , but you will see it in action shortly anyway.
Our next step is to add the HOVER state to our links:
nav li:hover a {
background-color: rgb(58, 142, 219);
}You can put whatever you want to change in here, this time I’m just using a background color change, but you can change the size of the text and all sorts of stuff.
Now our navigation is almost complete, the only thing left to address is the submenu that’s still showing in there and messing the looks of our navigation bar, but we will fix that right away.
nav li ul {
width: auto;
float: left;
visibility: hidden;
position: absolute;
left: 0;
top: 42px;
z-index: 1;
opacity: 0;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
nav li:hover ul {
visibility: visible;
opacity: 1;
}Here we set up the <ul> that’s nested into the main <li> element, the submenu.
1. Set the basics, width to auto so the dropdown menu has enough space for long strings of text, float to the left, visibility set to hidden so it doesn’t show up unless we want it to, and finally position set to absolute and left and top to their right values, take into account that based on where you are using, the navigation and the space you have and fonts / sizes you are using, these values might change for you, so if something looks out of place, don’t be afraid to tweak it a little bit.
2. After that, we set the opacity to 0 in order for the animation to work, and set up the same transition properties we used on the link elements.
3. Finally, we set the hover state for the <li> elements and tell css that whenever we hover on a <li>, the <ul> that’s inside of it should change its visibility to visible and opacity to 1, which will trigger the transition.
Check the html and as you can see, now we have our main navigation tidy and functional, with a functional dropdown, the only gripe about it is that our dropdown menu is still looking a little off, let’s fix that:
nav li ul li {
width: 100%;
}
nav li ul li a {
width: 100%;
text-align: left;
}
nav li ul a:hover {
background-color: rgb(49, 104, 163);
}What this last block of code does is:
1. It sets the width of the <li> elements to 100% so every element in the dropdown menu has the same width.
2. It sets the width of the links to 100% so we have only one line of text, also we set text-align to left, in order to pull our text to the left, again, you can change this to whatever suits your design.
3. It sets the hover state of the link, just another simple background color change.
And guess what? We are done!!
There you have it, a basic yet very functional and sleek, pure CSS3, HTML horizontal navigation bar that you can build into any HTML site and customize to your liking.
Add this page to your Website, Blog, or Forum. Let your friends know about this tutorial: <a href= "https://www.tutorialboneyard.com/css-navigation-bar" target="_blank">CSS3 Navigation Bar Tutorial </a>
Share this tutorial with your friends: