In the last article, we learned about opacity property in CSS and I concluded the article with one example for you to solve. Hope you completed it...
Now in this article, we are going to learn to create Navigation bar which we frequently see on any web pages nowadays. Although we will learn easy and better way to do this using Bootstrap letter, navigation bars will make your web pages better for sure.
So let's begin...
What is Navigation Bars?
It's just 'list of links'. We will create a simple unordered list of links in HTML and will change that boring looking menu of lists into something beautiful. Let's create a simple menu just using HTML and apply a little bit of CSS. We have just used CSS to remove bullets, margin, and padding of elements of the list. This will also be our base HTML code to create navigation bars.
Vertical Navigation Bar
li a{
display: block;
width: 50px;
}
Here, display: block; is making blocks for each link so that entire block is clickable and next width: 50px; is giving customized width to each link. Instead of giving width to link elements, we can also give it to link item that is ul element. Still, our navigation bar is not looking good...
Let's change it more...
Two most important changes here:
- Seet text-decoration property of link elements to none so that no underline will be present below links.
- hover pseudo-class
That's all for today. In the next post, we will continue learning navigation bar. There is so much to learn about them. Till then #keepCoding.
