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
MYSQL implements sample code to prevent duplicate addition when adding shopping cart
Preface Recently, due to work reasons, I was work...
A brief discussion on the solution of Tomcat garbled code and port occupation
Tomcat server is a free and open source Web appli...
MySQL turns off password strength verification
About password strength verification: [root@mysql...
Detailed explanation of the basic knowledge of front-end componentization
Table of contents Basic concepts of components Th...
Detailed example of locating and optimizing slow query sql in MySQL
Table of contents 1. How to locate and optimize s...
Mysql vertical table conversion to horizontal table method and optimization tutorial
1. Vertical table and horizontal table Vertical t...
Selection and thinking of MySQL data backup method
Table of contents 1. rsync, cp copy files 2. sele...
Docker network mode and configuration method
1. Docker Network Mode When docker run creates a ...
Perfect solution to the problem of MySQL shutting down immediately after startup (caused by ibdata1 file corruption)
The mysql on a server in the computer room had be...
Detailed explanation of the relationship between Vue and VueComponent
The following case reviews the knowledge points o...
Detailed explanation of concat related functions in MySQL
1. concat() function Function: Concatenate multip...
9 super practical CSS tips to help designers and developers
A web designer's head must be filled with a lo...
Solve the problem of secure_file_priv null
Add secure_file_priv = ' '； then run cmd ...
Some tips for writing high-performance HTML applications
How can you improve web page performance? Most de...
Analysis of several reasons why Iframe should be used less
The following graph shows how time-consuming it is...