CSS – Create a menu bar

0
503
CSS - Create a menu bar
Menu bar Demo

CSS: The menu bar or navigation bar is nothing more than the sum of how many HTML links. Isn’t it? So we will first look at how to create a navigation menu with a few links. Let’s start with the following codes. Where there are only a few links:

<ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
</ul>

# Is usually used to provide dummy/test links. If we look at the above code in the browser, the list style can be seen. Default bullet. We will hide the list style first. I will add the following CSS for it:

ul
{
list-style-type:none;
margin:0;
padding:0;
}

And to delete the underline below the link we will use: text-decoration: none;
margin: 0; padding: 0; The default options of the browser have been reset with. Even if you don’t think about it for now. 

Then the complete code stands:

<title></title>
<ul>
    <li>
      <a href="#home">Home</a></li>
    <li>
      <a href="#news">News</a></li>
    <li>
      <a href="#contact">Contact</a></li>
    <li>
      <a href="#about">About</a></li>
</ul>

As soon as we write another code, our menu will be ready, let’s add the following code:

li
{
display:inline;
}

Complete code:

<style>
li<br />
{<br />
display:inline;<br />
}<br />
</style><title></title>
<ul>
    <li>
      <a href="#home">Home</a></li>
    <li>
      <a href="#news">News</a></li>
    <li>
      <a href="#contact">Contact</a></li>
    <li>
      <a href="#about">About</a></li>
</ul>

Our menu is ready. Now we need to paint a little. So, let’s see the following code in the browser:

<style> ul { list-style-type:none; margin:0; padding:0; } li{ float:left; } a:link { display:block; width:120px; font-weight:bold; color:#FFFFFF; background-color:#00A0D9; text-align:center; padding:4px; text-decoration:none; } a:hover { color:#000; background-color:#88B541; } </style>
<ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
</ul>

Here we have given some style to the link using a: link Pseudo-classes. First I gave the background color. Given: background-color: # 00A0D9; With. And the color of the text of the link is given color: #FFFFFF; With. width: 120px; Given how much space each link will occupy. That’s it. Each link here will occupy 120px space. text-align: center; padding: 4px; text-decoration: none; We have already understood the work of all this.

Another Pseudo-classes has been used. That is, when the mouse clicks on the link/menu bar, the background color and color will change. It is given color: # 000; background-color: # 88B541; With.

The menu bar can be done in many more ways. In a very beautiful way. This is a very simple navigation menu.

I hope everyone can now easily create menu bars with CSS. I have tried to explain from my side that you will definitely try sitting at home. Thank you all for reading this post with so much effort.

LEAVE A REPLY

Please enter your comment!
Please enter your name here