masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

Menu lungsur turun CSS

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

kiri

apung:kiri;

kanan

float: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 cuba

Lagi 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 cuba

Contoh

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




Meneruskan pembelajaran
||
<!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> <h2>下拉图片</h2> <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>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492928 permainan