In the last article, we learned about navigation bars in CSS and designed one decent looking vertical navigation bar. Let's continue our learning to design a perfect navigation bar...
.active {
background-color: #FFC300;
color: white;
}
You can also align elements to center to look beautiful.
ul {
border: 1x solid black;
}
li {
text-align: center;
border-bottom: 1px solid black;
}
li:last-child {
border-bottom: none;
}
The last styling is used to avoid double borders.using pseudo-elements as you have noticed.
That's all for today. We have successfully completed vertical navigation bar. In the next article, we will learn to create horizontal navigation bar which is more frequent than vertical navigation bar.
Help user to know page/ link
We can add the active class to current link to let the user know which page or link he/she is on...Let's say on the Home page, you will add the active class to the Home section of the navigation bar..active {
background-color: #FFC300;
color: white;
}
Little bit of Styling
We can add a border to the navigation bar and also to individual elements. The only thing to note that, while applying a border to elements only use border-bottom on each element. If you use the border, then you will get double borders due to bottom of above and top of the below-placed element.You can also align elements to center to look beautiful.
ul {
border: 1x solid black;
}
li {
text-align: center;
border-bottom: 1px solid black;
}
li:last-child {
border-bottom: none;
}
The last styling is used to avoid double borders.using pseudo-elements as you have noticed.
Full Size
Now let's see how to create vertical navigation bar so that it will available to the user until the end of the web page.That's all for today. We have successfully completed vertical navigation bar. In the next article, we will learn to create horizontal navigation bar which is more frequent than vertical navigation bar.
Comments
Post a Comment