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
Detailed explanation of key uniqueness of v-for in Vue
Table of contents 1. DOM Diff 2. Add key attribut...
A complete record of the process of building mobile applications using Vue Native
Table of contents Preface Features of Vue Native ...
HTML n ways to achieve alternate color code sample code
This article mainly introduces the sample code of...
Pull-down refresh and pull-up loading components based on Vue encapsulation
Based on Vue and native javascript encapsulation,...
Detailed explanation of two methods to solve a bug in the justify-content: space-between alignment of flex layout
When setting display:flex, justify-content: space...
Design Theory: Hierarchy in Design
<br />Original text: http://andymao.com/andy...
Detailed explanation of the use of React.cloneElement
Table of contents The role of cloneElement Usage ...
Table paging function implemented by Vue2.0+ElementUI+PageHelper
Preface I have been working on some front-end pro...
How to redirect to https through nginx load balancing
Copy the certificate and key on the web scp -rp -...
You really need to understand the use of CSS variables var()
When a web project gets bigger and bigger, its CS...
Detailed explanation of adding click event in echarts tooltip in Vue
Table of contents need Workaround 1. Set tooltip ...
Detailed use of Echarts in vue2 vue3
Table of contents 1. Installation 2. Use Echarts ...
Detailed explanation of the problem of mixed use of limit and sum functions in MySQL
Preface Today, after synchronizing the order data...
HTML tag meta summary, HTML5 head meta attribute summary
Preface meta is an auxiliary tag in the head area...
How to set up swap partition SWAP in Linux 7.7
The Swap partition of the Linux system, that is, ...