HTML+CSS to create a top navigation bar menu

Navigation bar creation:

Technical requirements:

CSS
HTML tags

Achievement purpose:

Creating a Navigation Bar Menu

Code Analysis:

Basic Style Clear
Unordered origin deletion
Underline removal
Text is centered by default
The a tag sets the block-level element
Pseudo-class selector modifies the a state

Step by step implementation:

Three-column layout: Using floats

One column for logo; one column for selection column; one column for search column

Logo part:

img tag, import pictures, a tag hyperlink, img import pictures, to prevent picture distortion, just set one width and height

<div class="logo">
              <a href="#">
                  <img src="D:\Huizhou Hakka Noodles.jpg" width="150" alt="Huizhou Hakka Noodles">
              </a>
          </div>

Select column: ul>li tag

List tag, a tag hyperlink

<ul class="list">
              <li>
                  <a href="#">Pig's Feet Noodles</a>
              </li>
              <li>
                  <a href="#">Barbecued pork noodles</a>
              </li>
              <li>
                  <a href="#">Meatball Noodles</a>
              </li>
              <li>
                  <a href="#">Braised Egg Noodles</a>
              </li>
              <li>
                  <a href="#">Vegetarian Noodles</a>
              </li>
              <li>
                  <a href="#">Sakura noodles</a>
              </li>
              <li>
                  <a href="#">Pork Trotter Barbecued Pork Noodles</a>
              </li>
              <li>
                  <a href="#">Braised Pig's Feet and Egg Noodles</a>
              </li>
              <li>
                  <a href="#">Pork Trotter Meatball Noodles</a>
              </li>
              <li>
                  <a href="#">Barbecued pork meatball noodles</a>
              </li>
          </ul>

Search bar:

font forms, input attributes, input boxes and buttons

<div class="search">
              <form>
                   <input type="submit" value="Search" class="search1">
                  <input type="text" class="content1">
                 
              </form>
  </div>

Implementation analysis:

First, set a site header box in the body, with a center box inside the header box.

<div class="header">
      <div class="container" clearfix>
</div>
      </div>

Put the logo, selection bar, and search bar into the center box

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Huizhou Hakka Noodles</title>
</head>
<body>
 <div class="header">
     <div class="container" clearfix>
         <div class="logo">
             <a href="#">
                 <img src="D:\Desktop\Internet+ Entrepreneurship Competition/Huizhou Hakka Noodles Material/WeChat Picture_20210423194229.jpg" width="150" alt="Huizhou Hakka Noodles">
             </a>
         </div>
         <ul class="list">
             <li>
                 <a href="#">Pig's Feet Noodles</a>
             </li>
             <li>
                 <a href="#">Barbecued pork noodles</a>
             </li>
             <li>
                 <a href="#">Meatball Noodles</a>
             </li>
             <li>
                 <a href="#">Braised Egg Noodles</a>
             </li>
             <li>
                 <a href="#">Vegetarian Noodles</a>
             </li>
             <li>
                 <a href="#">Sakura noodles</a>
             </li>
             <li>
                 <a href="#">Pork Trotter Barbecued Pork Noodles</a>
             </li>
             <li>
                 <a href="#">Braised Pig's Feet and Egg Noodles</a>
             </li>
             <li>
                 <a href="#">Pork Trotter Meatball Noodles</a>
             </li>
             <li>
                 <a href="#">Barbecued pork meatball noodles</a>
             </li>
         </ul>
         <div class="search">
             <form>
                  <input type="submit" value="Search" class="search1">
                 <input type="text" class="content1">
                
             </form>
 </div>
     </div>

 </div>
</body>
</html>

Implementation 1:

insert image description here

Does it feel not beautiful enough? Let’s try using CSS!

CSS code:

Delete the underline of the a tag, delete the unordered origin of the li tag, and display them on one line.

.header{
    width: 100%;
    height: 100px;
    background-color: rgb(207, 238, 238);
    position: relative;
}

.container{
    width: 1226px;
    height: 20px;
    margin: 0 auto;
}

.header .logo{
    float: left;
    margin-top: 25px;
}

.logo a{
    display: block;
    width: 150px;
    height: 150px;
}

.header .list{
    float: left;
    width: 820px;
    height: 88px;
    padding: 12px 0 0 30px;
}

clearfix::after{
    content: '';
    clear: both;
    display: block;
}

a{
    text-decoration: none;
}

.header li{
    float: left;
    list-style: none;
}

.list li{
    padding: 28px 10px 38px ;
    display: block;
    color: rgb(68, 57, 5);
}

 .search{
    float: right;
    width: 296px;
    margin-top: 10px;
    position: absolute;
    top: 28px;
    right: 53px;
}
.search form{
    height: 50px;
    width: 296px;
} 

 .content1{
     display: block;
    width: 223px;
    height: 48px;
    border: 1px solid #e0e0e0;
    padding: 0 10px;
    float:right;
    
}

.search1{
    width: 49px;
    height: 49px;
    float: right;
} 

.list li:hover{
    color: rgb(168, 81, 81);
    font-size:large;
}

Use external import:

<link rel="stylesheet" href="Huizhou Hakka Noodles.css">

Finally, let’s sort it out:

Create an HTML file and enter the following code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="Huizhou Hakka Noodles.css">
  <title>Huizhou Hakka Noodles</title>
</head>
<body>
  <div class="header">
      <div class="container" clearfix>
          <div class="logo">
              <a href="#">
                  <img src="D:\Huizhou Hakka Noodles.jpg" width="150" alt="Huizhou Hakka Noodles">
              </a>
          </div>
          <ul class="list">
              <li>
                  <a href="#">Pig's Feet Noodles</a>
              </li>
              <li>
                  <a href="#">Barbecued pork noodles</a>
              </li>
              <li>
                  <a href="#">Meatball Noodles</a>
              </li>
              <li>
                  <a href="#">Braised Egg Noodles</a>
              </li>
              <li>
                  <a href="#">Vegetarian Noodles</a>
              </li>
              <li>
                  <a href="#">Sakura noodles</a>
              </li>
              <li>
                  <a href="#">Pork Trotter Barbecued Pork Noodles</a>
              </li>
              <li>
                  <a href="#">Braised Pig's Feet and Egg Noodles</a>
              </li>
              <li>
                  <a href="#">Pork Trotter Meatball Noodles</a>
              </li>
              <li>
                  <a href="#">Barbecued pork meatball noodles</a>
              </li>
          </ul>
          <div class="search">
              <form>
                   <input type="submit" value="Search" class="search1">
                  <input type="text" class="content1">
                 
              </form>
  </div>
      </div>

  </div>
</body>
</html>

Create a CSS file and enter the following code.

.header{
  width: 100%;
  height: 100px;
  background-color: rgb(207, 238, 238);
  position: relative;
}

.container{
  width: 1226px;
  height: 20px;
  margin: 0 auto;
}

.header .logo{
  float: left;
  margin-top: 25px;
}

.logo a{
  display: block;
  width: 150px;
  height: 150px;
}

.header .list{
  float: left;
  width: 820px;
  height: 88px;
  padding: 12px 0 0 30px;
}

clearfix::after{
  content: '';
  clear: both;
  display: block;
}

a{
  text-decoration: none;
}

.header li{
  float: left;
  list-style: none;
}

.list li{
  padding: 28px 10px 38px ;
  display: block;
  color: rgb(68, 57, 5);
}

 .search{
  float: right;
  width: 296px;
  margin-top: 10px;
  position: absolute;
  top: 28px;
  right: 53px;
}
.search form{
  height: 50px;
  width: 296px;
} 

.content1{
   display: block;
  width: 223px;
  height: 48px;
  border: 1px solid #e0e0e0;
  padding: 0 10px;
  float:right;
  
}

.search1{
  width: 49px;
  height: 49px;
  float: right;
} 

.list li:hover{
  color: rgb(168, 81, 81);
  font-size:large;
}

Implementation 2:

insert image description here

Move the mouse on the icon to enlarge the font.

Production guide:

Change the position of the logo to the position of your image. The alt attribute is the word used when the image on the web page cannot be displayed.
The a attribute in the "li" tag hyperlinks the web page you want to link to, and the text in the "li" tag is replaced with the text you want
Modify the background color in CSS **.header background-color:** to the color you want.
For the font effects in the "li" tag, modify **.list li:hover** in CSS.

Color change:

.header{
  width: 100%;
  height: 100px;
  background-color: rgb(207, 238, 238);
  position: relative;
}

Label effects:

.list li:hover{
  color: rgb(168, 81, 81);
  font-size:large;
}

This is the end of this article about how to use HTML+CSS to create a top navigation bar menu. For more relevant HTML CSS top navigation bar menu content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

<<: CSS polar coordinates example code

>>: HTML CSS3 does not stretch the image display effect