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
Detailed explanation of the difference between chown and chmod commands in Linux
In Linux system, both chmod and chown commands ca...
Details on overriding prototype methods in JavaScript instance objects
Table of contents In JavaScript , we can usually ...
How to check the version of Kali Linux system
1. Check the kali linux system version Command: c...
HTML code text box limit input text box becomes gray limit text box input
Method 1: Set the readonly attribute to true. INPU...
Detailed explanation of Vue components
<body> <div id="root"> <...
Detailed explanation of how to query fields containing '%' in MySQL like (ESCAPE usage)
In the SQL like statement, for example SELECT * F...
MySQL transaction, isolation level and lock usage example analysis
This article uses examples to describe MySQL tran...
How to add rounded borders to div elements
As shown below: CSS CodeCopy content to clipboard...
js version to realize calculator function
This article example shares the specific code of ...
Detailed steps for debugging VUE projects in IDEA
To debug js code, you need to write debugger in t...
Docker deployment of Flask application implementation steps
1. Purpose Write a Flask application locally, pac...
Tutorial on compiling and installing MySQL 5.7.17 from source code on Mac
1. Download and unzip to: /Users/xiechunping/Soft...
MySQL sorting principles and case analysis
Preface Sorting is a basic function in databases,...
Implement a simple search engine based on MySQL
Table of contents Implementing a search engine ba...
Detailed explanation of some settings for Table adaptation and overflow
1. Two properties of table reset: ①border-collaps...