| Share this post! | Vote this! |
|
HTML code
We’ll start by adding the mark-up into our HTML file.1 <ul id="nav-bar">
2 <li><a href="./index.html">Home</a></li>
3 <li><a href="#">Products</a></li>
4 <li><a href="#">Work</a></li>
5 <li><a href="#">About</a></li>
6 <li><a href="#">Contact</a></li>
7 </ul>
That’s it for the mark-up.
You can set the active class for each page. For example, when you’re implementing the navigation in the Products page, you will have to remove the class=”active” from Home and put it in the Products anchor.
In my example I have used a background color property and a container as well. So you don’t have to ask yourself why the background is looking different over here.
Your navigation bar should look like this right now:
More...
0 comments:
Post a Comment