Implementation of Navigation Bar and Dropdown Menu in CSS

Time:2019-8-9

CSS Navigation Bar

(1) The role of navigation bar

Skillful use of 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

The < 1 > code is as follows

<!doctyre 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 page</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</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 results are as follows:

(3) Horizontal navigation bar

<1> The code is as follows:

<!doctyre 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 page</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 results are as follows:

2. Dropdown menu

(1) The function of drop-down menu

Drop-down menu can make your web pages not boring, you can change the beauty of the web pages through css, which is also an essential part of web page typesetting.

(2) Dropdown 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
        </span>
        <div class="di">
            <ul>
                <li> Hello! </li>
                <li> Hello! </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 results are as follows

The above is the whole content of this article. I hope it will be helpful to everyone’s study, and I hope you will support developpaer more.

Recommended Today

Implementation of PHP Facades

Example <?php class RealRoute{ public function get(){ Echo’Get me’; } } class Facade{ public static $resolvedInstance; public static $app; public static function __callStatic($method,$args){ $instance = static::getFacadeRoot(); if(!$instance){ throw new RuntimeException(‘A facade root has not been set.’); } return $instance->$method(…$args); } // Get the Facade root object public static function getFacadeRoot() { return static::resolveFacadeInstance(static::getFacadeAccessor()); } protected […]