Implementation of navigation bar and drop-down menu in CSS

1. CSS Navigation Bar

(1) Function of the navigation bar

Being proficient in using the navigation bar is very important for website layout. Using CSS you can convert it into a good-looking navigation bar instead of a boring HTML menu.

(2) Vertical navigation bar

<1>The code is as follows

<!doctype html>
<html>
    <head> 
        <meta charset="utf-8"> 
        <title>Vertical Navigation Bar</title> 
        <link rel="stylesheet" href="daohanglan1.css"/>
    </head>
    <body>
        <ul>
            <li><a class="active" 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>
        <div>
          <h2>Vertical Navigation Bar</h2>
          <h3>Vertical navigation bar vertical navigation bar vertical navigation bar vertical navigation bar vertical navigation bar vertical navigation bar vertical navigation bar</p>
          <p>Vertical navigation bar</p>
          <p>Vertical navigation bar</p>
          <p>Vertical navigation bar</p>
          <p>Vertical navigation bar</p>
          <p>Vertical navigation bar</p>
          <p>Vertical navigation bar</p>
          <p>Vertical navigation bar</p>
        </div>
    </body>
</html>
body{
    margin:0;
}
ul{
    padding:0;
    margin:0;
    list-style-type:none;
    
    width:25%;
    background-color:#f1f1f1;
    
    position:fixed;
    height:100%;
    top:0;
    overflow:auto;
    
    /* border:1px solid #000; */
}
/* ul>li:not(:last-child){
    border-bottom:1px solid #000;
} */
ul a{
    display:block;
    
    text-decoration:none;
    color:#000;
    padding:8px 16px;
    
    text-align:center;
}
li a:hover:not(.active){
    background-color:#555;
    color:white;    
}
a.active{
    background-color:#4caf50;
    color:white;    
}
div{
    margin-left:25%;
    padding:1px 16px;
    height:100px;
    
}

<2>The effect diagram is as follows:

(3) Horizontal navigation bar

<1>The code is as follows:

<!doctype html>
<html>
    <head> 
        <meta charset="utf-8"> 
        <title>Horizontal Navigation Bar</title> 
        <link rel="stylesheet" href="daohanglan2.css"/>
    </head>
    <body>
        <ul>
            <li><a class="active" href="#home">Home</a></li>
            <li><a href="#news">News</a></li>
            <li><a href="#contact">Contact</a></li>
            <li style="float:right"><a href="#about">About</a></li>
        </ul>
        <div class="box">
            <h2>Horizontal Navigation Bar</h2>
            <p>Horizontal navigation bar; horizontal navigation bar; horizontal navigation bar; horizontal navigation bar</p>
            <p>Horizontal navigation bar; horizontal navigation bar; horizontal navigation bar; horizontal navigation bar</p>
            <p>Horizontal navigation bar; horizontal navigation bar; horizontal navigation bar; horizontal navigation bar</p>
            <p>Horizontal navigation bar; horizontal navigation bar; horizontal navigation bar; horizontal navigation bar</p>
            <p>Horizontal navigation bar; horizontal navigation bar; horizontal navigation bar; horizontal navigation bar</p>
            <p>Horizontal navigation bar; horizontal navigation bar; horizontal navigation bar; horizontal navigation bar</p>
            <p>Horizontal navigation bar; horizontal navigation bar; horizontal navigation bar; horizontal navigation bar</p>
            <p>Horizontal navigation bar; horizontal navigation bar; horizontal navigation bar; horizontal navigation bar</p>
            <p>Horizontal navigation bar; horizontal navigation bar; horizontal navigation bar; horizontal navigation bar</p>
            <p>Horizontal navigation bar; horizontal navigation bar; horizontal navigation bar; horizontal navigation bar</p>
            <p>Horizontal navigation bar; horizontal navigation bar; horizontal navigation bar; horizontal navigation bar</p>
            <p>Horizontal navigation bar; horizontal navigation bar; horizontal navigation bar; horizontal navigation bar</p>
            <p>Horizontal navigation bar; horizontal navigation bar; horizontal navigation bar; horizontal navigation bar</p>
            <p>Horizontal navigation bar; horizontal navigation bar; horizontal navigation bar; horizontal navigation bar</p>
            <p>Horizontal navigation bar; horizontal navigation bar; horizontal navigation bar; horizontal navigation bar</p>
            <p>Horizontal navigation bar; horizontal navigation bar; horizontal navigation bar; horizontal navigation bar</p>
            <p>Horizontal navigation bar; horizontal navigation bar; horizontal navigation bar; horizontal navigation bar</p>
            <p>Horizontal navigation bar; horizontal navigation bar; horizontal navigation bar; horizontal navigation bar</p>
            <p>Horizontal navigation bar; horizontal navigation bar; horizontal navigation bar; horizontal navigation bar</p>
            <p>Horizontal navigation bar; horizontal navigation bar; horizontal navigation bar; horizontal navigation bar</p>
            </div>
    </body>
</html>
body{
    margin:0;
}
ul{
    padding:0px;
    margin:0px;
    list-style-type:none;
    background-color:#333;
    overflow:hidden;
    
    position:fixed;
    top:0px;
    width:100%;
}
ul>li{
    float:left;
    border-right:1px solid #fff;
    display:inline;
}
ul>li:last-child{
    border-right:none;
    
}
a{
    padding:14px 16px;
    
    display:block;
    width:60px;
    
    text-align:center;
    
    text-decoration:none;
    color:white;
    
}

li a:hover:not(.active) {
    background-color: #111;
}
    
li a.active {
    color: white;
    background-color: #4CAF50;
}
.box{padding:20px;
margin-top:30px;
background-color:#1abc9c;
height:1500px;}

<2>The effect diagram is as follows:

2. Drop-down menu

(1) Function of drop-down menu

The drop-down menu can make your web page less boring, and you can change the appearance of the web page through CSS, which is also indispensable for web page typesetting.

(2) Drop-down menu

<1>The code is as follows:

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>


    <link rel="stylesheet" type="text/css" href="xialacaidan.css"/>


</head>
<body>


    <div class="dropdown">
        <span>
            Drop-down menu
        <div class="di">
            <ul>
                <li>Hello! </li>
                <li>I'm fine! </li>
                <li>Hello everyone! </li>
            </ul>
        
        </div>
    </div>


</body>
</html>
body{
    margin:0;
    text-align:center;
}
.dropdown{
    
    background-color:green;
    text-align:center;
    padding:20px;
    display:inline-block;
    cursor:pointer;
    position:relative;
}
.di{
    display:none;
    position:absolute;
    top:61px;
    left:0;
}
.di ul{
    list-style:none;
    padding:0;
    margin:0;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.di ul li{
    min-width:104px;
    padding:10px 15px;
    
}
.dropdown:hover{
    background-color:#3e8e41
}
.dropdown:hover .di{
    display:block;
    
}
.di ul li:hover{
    background-color: #f1f1f1
}

<2>The effect diagram is as follows

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<: How to add a column to a large MySQL table

>>: W3C Tutorial (11): W3C DOM Activities