CSS+HTML to realize the top navigation bar function
|
Implementation of navigation bar, fixed top navigation bar, and secondary menu implementation effect diagram:
Update 2018/11/16: New code implementation (optimized layout):
<html>
<head>
<style type="text/css">
.top{
/* Set width, height, background color */
height: auto; /*Change the height to automatic height*/
width:100%;
margin-left: 0;
background:rgb(189, 181, 181);
position: fixed; /*Fixed at the top*/
top: 0;/*The distance from the top is 0*/
margin-bottom: 5px;
}
.top ul{
/* Clear the default style of the ul tag */
width: auto;/*The width is also changed to automatic*/
list-style-type: none;
white-space:nowrap;
overflow: hidden;
margin-left: 5%;
/* margin-top: 0; */
padding: 0;
}
.top li {
float:left; /* Make the li content float horizontally, that is, arrange it horizontally*/
margin-right:2%; /* The distance between two li s*/
position: relative;
overflow: hidden;
}
.top li a{
/* Set the link content display format */
display: block; /* Displaying the link as a block element makes the entire link area clickable*/
color:white;
text-align: center;
padding: 3px;
overflow: hidden;
text-decoration: none; /* remove underline */
}
.top li a:hover{
/* The background turns black when the mouse is selected*/
background-color: #111;
}
.top ul li ul{
/* Set up the secondary menu */
margin-left: -0.2px;
background:rgb(189, 181, 181);
position: relative;
display: none; /* Hide the contents of the secondary menu by default*/
}
.top ul li ul li{
/* Display of secondary menu li content*/
float:none;
text-align: center;
}
.top ul li:hover ul{
/* When the mouse selects the secondary menu content*/
display: block;
}
body{
background:#eff3f5;
}
</style>
<body>
<div class="top">
<center>
<ul>
<li><a href="#">First Level Menu</a></li>
<li><a href="#">First Level Menu</a></li>
<li><a href="#">First Level Menu</a></li>
<li><a href="#"><b>First Level Menu</b></a></li>
<li><a href="#">First Level Menu</a></li>
<li>
<a href="#">First level menu</a>
<ul>
<li><a href="#">Secondary Menu</a></li>
<li><a href="#">Secondary Menu</a></li>
</ul>
</li>
</ul>
</center>
</div>
</body>
</head>
</html>The original code implementation below (there is a problem with the layout of the navigation page when the page is zoomed in and out):
<html>
<head>
<style type="text/css">
.top{
/* Set width, height, background color */
height: 50px;
width:100%;
background:rgb(189, 181, 181);
position: fixed; /*Fixed at the top*/
top: 0;/*The distance from the top is 0*/
}
.top ul{
/* Clear the default style of the ul tag */
width: 80%;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.top li {
float:left; /* Make the li content float horizontally, that is, arrange it horizontally*/
margin-right:50px; /* Distance between two li*/
}
.top li a{
/* Set the link content display format */
display: block; /* Displaying the link as a block element makes the entire link area clickable*/
color:white;
text-align: center;
padding: 14px 16px;
text-decoration: none; /* remove underline */
}
.top li a:hover{
/* The background turns black when the mouse is selected*/
background-color: #111;
}
.top ul li ul{
/* Set up the secondary menu */
width: auto;
background:rgb(189, 181, 181);
position: absolute;
display: none; /* Hide the contents of the secondary menu by default*/
}
.top ul li ul li{
/* Display of secondary menu li content*/
margin-right:0;
float:none;
text-align: center;
}
.top ul li:hover ul{
/* When the mouse selects the secondary menu content*/
display: block;
}
</style>
<body>
<div class="top">
<center>
<ul>
<li><a href="#">First Level Menu</a></li>
<li><a href="#">First Level Menu</a></li>
<li><a href="#">Episode Menu</a></li>
<li><a href="#"><b>First Level Menu</b></a></li>
<li><a href="#">First Level Menu</a></li>
<li>
<a href="#">First level menu</a>
<ul>
<li><a href="#">Secondary Menu</a></li>
<li><a href="#">Secondary Menu</a></li>
</ul>
</li>
</ul>
</center>
</div>
</body>
</head>
</html>This is the end of this article about how to use CSS+HTML to implement the top navigation bar function. For more relevant CSS top navigation bar content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future! |
<<: JavaScript immediate execution function usage analysis
>>: 0.1 seconds worth! A brief discussion on the problem of speeding up the front-end web pages
Recommend
Example code for implementing beautiful clock animation effects with CSS
I'm looking for a job!!! Advance preparation:...
Example of how to implement a 2-column layout in HTML (fixed width on the left, adaptive width on the right)
HTML implements 2-column layout, with fixed width...
How to write a picture as a background and a link (background picture plus link)
The picture is used as the background and the lin...
Example of how to deploy a Django project using Docker
It is also very simple to deploy Django projects ...
How to deploy k8s in docker
K8s k8s is a cluster. There are multiple Namespac...
JS cross-domain XML--with AS URLLoader
Recently, I received a requirement for function ex...
el-table in vue realizes automatic ceiling effect (supports fixed)
Table of contents Preface Implementation ideas Ef...
MySQL 8.0.18 installation and configuration method graphic tutorial
This article records the installation and configu...
Ubuntu Basic Tutorial: apt-get Command
Preface The apt-get command is a package manageme...
Nginx proxy forwarding implementation code uploaded by Alibaba Cloud OSS
Preface Because the mini program upload requires ...
CSS sets Overflow to hide the scroll bar while allowing scrolling
CSS sets Overflow to hide the scroll bar while al...
Introduction to Linux environment variables and process address space
Table of contents Linux environment variables and...
Use of kubernetes YAML files
Table of contents 01 Introduction to YAML files Y...
Complete steps to implement location punch-in using MySQL spatial functions
Preface The project requirement is to determine w...
How to implement HTML to detect that input is complete and automatically fill in the next content
In the previous article, we have realized the sim...