Making top navigation bar menu with HTML + CSS

Time:2021-7-19

Making of navigation bar:

Technical requirements:

  •  CSS
  • HTML tags

To achieve the goal:

Making navigation bar menu

Code analysis:

  • Basic style cleanup
  • No sequence origin deletion
  • Underline delete
  • Center text by default
  • A tag sets block level elements
  • Modification of a state by pseudo class selector

Step by step:

Three column layout: use floating

Logo column; Select column; Search column

Logo section:

IMG tag, import image, a tag hyperlink, IMG import image, prevent image distortion, width and height set one

<div class="logo">
              <a href="#">
                  < img SRC = "D: \" Huizhou Hakka noodles. JPG "width =" 150 "ALT =" Huizhou Hakka noodles ">
              </a>
          </div>

Selection bar: UL > Li tab

List label, a label, hyperlink

<ul class="list">
              <li>
                  Pig feet</a>
              </li>
              <li>
                  Barbecued pork noodles</a>
              </li>
              <li>
                  Meat ball noodles</a>
              </li>
              <li>
                  The noodles with marinated eggs</a>
              </li>
              <li>
                  < a = "Chen" > zhaimian</a>
              </li>
              <li>
                  Cherry Blossom noodles</a>
              </li>
              <li>
                  Pork feet barbecued noodles</a>
              </li>
              <li>
                  Pig's feet marinated egg noodles</a>
              </li>
              <li>
                  Pig's feet meatball noodles</a>
              </li>
              <li>
                  Barbecued Pork Ball noodles</a>
              </li>
          </ul>

Search bar:

Font form, input attribute, input box and button

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

Implementation analysis:

First of all, a head box of the site is set in the body. There is a central box in the head 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
</head>
<body>
 <div class="header">
     <div class="container" clearfix>
         <div class="logo">
             <a href="#">
                 <img src= "D:\ desktop Internet plus entrepreneurship contest / Huizhou Hakka noodles material / WeChat pictures" 20210423194229. JPG "width =" 150 "ALT =" Huizhou Hakka noodle ">"
             </a>
         </div>
         <ul class="list">
             <li>
                 Pig feet</a>
             </li>
             <li>
                 Barbecued pork noodles</a>
             </li>
             <li>
                 Meat ball noodles</a>
             </li>
             <li>
                 The noodles with marinated eggs</a>
             </li>
             <li>
                 < a = "Chen" > zhaimian</a>
             </li>
             <li>
                 Cherry Blossom noodles</a>
             </li>
             <li>
                 Pork feet barbecued noodles</a>
             </li>
             <li>
                 Pig's feet marinated egg noodles</a>
             </li>
             <li>
                 Pig's feet meatball noodles</a>
             </li>
             <li>
                 Barbecued Pork Ball 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:

在这里插入图片描述

Isn’t it beautiful enough? Let’s try CSS!

CSS code:

Delete a label underline, delete Li no sequence origin, display 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: larger;
}

Use external import:

< link rel = "stylesheet" a

Finally, let’s sort 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" a
  < title > Huizhou Hakka noodles
</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>
                  Pig feet</a>
              </li>
              <li>
                  Barbecued pork noodles</a>
              </li>
              <li>
                  Meat ball noodles</a>
              </li>
              <li>
                  The noodles with marinated eggs</a>
              </li>
              <li>
                  < a = "Chen" > zhaimian</a>
              </li>
              <li>
                  Cherry Blossom noodles</a>
              </li>
              <li>
                  Pork feet barbecued noodles</a>
              </li>
              <li>
                  Pig's feet marinated egg noodles</a>
              </li>
              <li>
                  Pig's feet meatball noodles</a>
              </li>
              <li>
                  Barbecued Pork Ball 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: larger;
}

Implementation 2:

在这里插入图片描述

Move the mouse icon, the font can become larger.

Production strategy:

  • Change the position of the logo to the position of your picture. Alt attribute is the word when the picture on the web page cannot be displayed.
  • The a attribute in the “Li” tag hyperlinks the page you want to link to, and the text in the “Li” tag is replaced with the text you want
  • Change the background color in CSS * *. Header to the color you want.
  • For the special effect of font in “Li” label, modify * *. List Li: hover * * in CSS.
     

Discoloration:


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

Tag effects:


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

So far, this article about html + CSS to achieve the top navigation bar menu production is introduced here. For more relevant HTML CSS top navigation bar menu content, please search previous articles of developer or continue to browse the following related articles. I hope you can support developer more in the future!