Menu lungsur turun CSS
Gunakan CSS untuk mencipta kesan yang memaparkan menu lungsur turun apabila tetikus dialihkan ke atas.
Menu lungsur turun asas
Apabila tetikus bergerak ke atas elemen yang ditentukan, menu lungsur turun akan muncul.
Instance
<!DOCTYPE html>
<html>
<head>
<title> PHP中文网（php.cn）</title>
<meta charset="utf-8">
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgb(83, 251, 185);
padding: 12px 16px;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<div class="dropdown">
<span>鼠标移动到我这！</span>
<div class="dropdown-content">
<p> PHP中文网（php.cn）</p>
<p>www.php.cn</p>
</div>
</div>
</body>
</html>Jalankan program dan cuba
Analisis instance
Bahagian HTML:
Kita boleh menggunakan mana-mana elemen HTM untuk membuka menu lungsur, seperti: <span>, atau elemen <butang>
Gunakan elemen bekas (seperti <div>) untuk mencipta kandungan menu lungsur turun dan letakkannya di mana-mana yang anda mahu.
Gunakan elemen <div> untuk membalut elemen ini dan gunakan CSS untuk menggayakan kandungan lungsur turun.
Bahagian CSS: Kelas lungsur turun
menggunakan position:relative, yang akan menetapkan kandungan menu lungsur untuk diletakkan di sudut kanan bawah butang lungsur ( menggunakan kedudukan:mutlak). Kelas
.dropdown-content ialah menu lungsur turun sebenar. Ia disembunyikan secara lalai dan akan dipaparkan selepas tetikus bergerak ke elemen yang ditentukan. Ambil perhatian bahawa nilai lebar min ditetapkan kepada 160px. Anda boleh mengubah suainya mengikut kehendak anda. Nota: Jika anda ingin menetapkan kandungan lungsur turun supaya konsisten dengan lebar butang lungsur, anda boleh menetapkan lebar kepada 100% (tetapan limpahan:auto boleh tatal pada saiz skrin kecil).
Kami menggunakan atribut box-shadow untuk menjadikan menu lungsur turun kelihatan seperti "kad".
:pemilih tuding digunakan untuk memaparkan menu lungsur apabila pengguna menggerakkan tetikus ke atas butang lungsur.
Menu lungsur turun
Buat menu lungsur turun dan benarkan pengguna memilih item dalam senarai Kami menambah pautan ke senarai lungsur turun dan menetapkan gaya:
<!DOCTYPE html>
<html>
<head>
<title>PHP中文网(php.cn)</title>
<meta charset="utf-8">
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
<body>
<h2>下拉菜单</h2>
<p>鼠标移动到按钮上打开下拉菜单。</p>
<div class="dropdown">
<button class="dropbtn">下拉菜单</button>
<div class="dropdown-content">
<a href="http://www.php.cn">PHP中文网 1</a>
<a href="http://www.php.cn">PHP中文网 2</a>
<a href="http://www.php.cn">PHP中文网 </a>
</div>
</div>
</body>
</html>Jalankan program untuk mencubanya<. 🎜>
Penjajaran kandungan lungsur turun
kiriapung:kiri;
kananfloat:right;
Instance
<!DOCTYPE html>
<html>
<head>
<title>PHP中文网(php.cn)</title>
<meta charset="utf-8">
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
right: 0;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
<body>
<h2>下拉内容的对齐方式</h2>
<p>left 和 right 属性指定了下拉内容是从左到右或从右到左。</p>
<div class="dropdown" style="float:left;">
<button class="dropbtn">左</button>
<div class="dropdown-content" style="left:0;">
<a href="#">PHP中文网 1</a>
<a href="#">PHP中文网 2</a>
<a href="#">PHP中文网 3</a>
</div>
</div>
<div class="dropdown" style="float:right;">
<button class="dropbtn">右</button>
<div class="dropdown-content">
<a href="#">PHP中文网 1</a>
<a href="#">PHP中文网 2</a>
<a href="#">PHP中文网 3</a>
</div>
</div>
</body>
</html>Jalankan program dan berikannya cubaLagi contoh
Contoh ini menunjukkan cara menambah menu lungsur ke bar navigasi.<!DOCTYPE html>
<html>
<head>
<title>PHP中文网(php.cn)</title>
<meta charset="utf-8">
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #111;
}
.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="">主页</a></li>
<li><a href="">新闻</a></li>
<div class="dropdown">
<a href="#" class="dropbtn">下拉菜单</a>
<div class="dropdown-content">
<a href="#">链接 1</a>
<a href="#">链接 2</a>
<a href="#">链接 3</a>
</div>
</div>
</ul>
<p>鼠标移动到 "下拉菜单" 链接先显示下拉菜单。</p>
</body>
</html>Jalankan program dan cubaContoh
Cara menambah gambar dalam drop -menu bawah.<!DOCTYPE html>
<html>
<head>
<title>PHP中文网（php.cn）</title>
<meta charset="utf-8">
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown:hover .dropdown-content {
display: block;
}
.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<p>移动鼠标到图片上显示下拉内容。</p>
<div class="dropdown">
<img src="https://img.php.cn/upload/course/000/000/006/580837363b987802.jpg" alt="Trolltunga Norway" width="100" height="50">
<div class="dropdown-content">
<img src="https://img.php.cn/upload/course/000/000/006/580837363b987802.jpg" alt="Trolltunga Norway" width="400" height="200">
<div class="desc">PHP中文网（php.cn）</div>
</div>
</div>
</body>
</html>Jalankan program dan cuba