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
Recommend
Several ways to easily traverse object properties in JS
Table of contents 1. Self-enumerable properties 2...
Detailed explanation of how to query fields containing '%' in MySQL like (ESCAPE usage)
In the SQL like statement, for example SELECT * F...
Detailed explanation of virtual DOM in Vue source code analysis
Why do we need virtual dom? Virtual DOM is design...
MySQL study notes on handling duplicate data
MySQL handles duplicate data Some MySQL tables ma...
Comprehensive understanding of html.css overflow
Comprehensive understanding of html.css overflow ...
mysql5.7.18.zip Installation-free version configuration tutorial (windows)
This is the installation tutorial of mysql5.7.18....
Use JS to operate files (FileReader reads --node's fs)
Table of contents JS reads file FileReader docume...
js canvas to realize the Gobang game
This article shares the specific code of the canv...
Do you know how to use vue-cropper to crop pictures in vue?
Table of contents 1. Installation: 2. Use: 3. Bui...
A brief analysis of the differences between undo, redo and binlog in MySQL
Table of contents Preface 【undo log】 【redo log】 【...
Cross-domain issues in front-end and back-end separation of Vue+SpringBoot
In the front-end and back-end separation developm...
Detailed explanation of the code between the MySQL master library binlog (master-log) and the slave library relay-log
Main library binlog: # at 2420 #170809 17:16:20 s...
vsCode generates vue templates with one click
1. Use the shortcut Ctrl + Shift + P to call out ...
Front-end JavaScript thoroughly understands function currying
Table of contents 1. What is currying 2. Uses of ...
How to create a swap partition file in Linux
Introduction to Swap Swap (i.e. swap partition) i...