Creating a Navigation Menu

Creating a Navigation Menu | Web Development

In this article, we will be creating a Navigation Menu using the float property in CSS.

HTML Section

Firstly, We will create a basic HTML page structure.

Then, we’ll add a header section in the body tag of the HTML page. In which we will add a nav section with an id ‘navbar’.

Then, We will add an Unordered list in the navbar with 4 list items in it.

Then, We will add an anchor tag to each list item. As they have to redirect the user to another page but as of now, we have nothing where we can redirect. So, We will give the ‘#’ symbol to them as it points nowhere.

Now, We will add a search box in the navigation menu. For this, we will create a div with class search in the ul(unordered list). and add an input tag with input type ‘text’, name and id ‘search’ and placeholder ‘Search here’ in it.

<header>
   <nav id="navbar">
      <ul>
         <li><a href="#">Home</a></li>
         <li><a href="#">Blogs</a></li>
         <li><a href="#">About Us</a></li>
         <li><a href="#">Contact Us</a></li>
         <div class="search">
            <input type="text" name="search" id="search" placeholder="Search here">
         </div>
      </ul>
   </nav>
</header>

That’s about the HTML part.

The HTML page will look like this without the CSS style sheet.

Now, we will add CSS to the page to give some styling to it.

CSS Section

Firstly, We will target the id navbar and give it a background color ‘green‘ to make our navigation menu green.

Then we will target the li in the navbar and remove the bullets in it by giving the value ‘none‘ to the list styling. Then, we will float the li items to the left of the navbar.

Now, Because the list items are floating. They will overflow from the navbar and the background color disappears and to fix it. We will add the overflow ‘auto‘ property to the ul of the navbar.

Then, We will remove the underlines from each list item, and to do so we will target the anchor tag in the navbar and set the text-decoration property to none. and also we will give padding to the anchor tag to make it easy for the user to click.

Then, We will add some margin to the li of the navbar, add a border-radius to the navbar and also give white color to the anchor tags to make it look good.

Now, We will target the search box and make it float to the right, and add some padding to it.

Then, We will add a border, border radius, and padding to the input tag.

At last, We will add a hover effect to the anchor tags so whenever a user hovers over a tag it changes its color from white to black.

#navbar {
         background-color: green;
         border-radius:30px;
         }

#navbar li {
            list-style: none;
            float: left;
            margin: 15px 20px;
            }

#navbar ul {
            overflow: auto;
            }

#navbar a {
           text-decoration: none;
           padding: 3px;
           color: white;
           }

#navbar a:hover {
                 color: black;
                 }

.search {
         float: right;
         padding: 14px 45px;
        }

.search input {
       border: 2px solid black;
       border-radius: 10px;
       padding: 1px 15px;
       }

Output:

Finally, Our Navigation menu looks like this.

That’s all about creating a basic Navigation Menu in HTML and CSS.

Hope this article will guide you about creating a Navigation Menu in HTML and CSS and still if you have any problem or queries regarding this, post them in the comments section and we will be glad to assist you.

Leave a Reply