suchen

Heim >Backend-Entwicklung >PHP-Tutorial >Wie implementiert man ein PHP-Dropdown-Menü und mehrstufige Spalten? (Code tatsächlicher Test)

Wie implementiert man ein PHP-Dropdown-Menü und mehrstufige Spalten? (Code tatsächlicher Test)

藏色散人
藏色散人Original
2018-08-09 14:11:054431Durchsuche

Bei der Website-Erstellung wird in der Navigationsleiste normalerweise eine Dropdown-Spalte angezeigt. Die PHP-Implementierung dieser Funktion ist nicht so einfach und erfordert eine gewisse Wissensreserve in Bezug auf Datenbanken und PHP. In diesem Artikel wird Ihnen daher auf einfache Weise die funktionale Implementierung des sekundären PHP-Dropdown-Menüs vorgestellt, damit Sie es verstehen und lernen können.

Diese einfache und leicht verständliche Methode wird hauptsächlich durch HTML- und CSS-Code implementiert. Spezifische Beispiele für PHP-Dropdown-Menücode sind wie folgt: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id="nav">
    <ul>
        <li><a href="">首页</a></li>
        <li><a href="">笔记本电脑</a>
            <ul>
                <li><a href="#">索尼</a> </li>
                <li><a href="#">联想</a> </li>
            </ul>
        </li>
        <li><a href="">摄像机</a>
            <ul>
                <li><a href="#">松下</a> </li>
                <li><a href="#">佳能</a> </li>
            </ul>
        </li>
        <li><a href="">联系我们</a></li>
    </ul>
</div>
</body>
</html>

style.css Der Code lautet wie folgt: 

<style>
        *{margin:0;padding: 0;list-style: none;text-decoration: none;}
        #nav{width: 500px;height: 40px;background: #ccc;margin: 0 auto;}
        ul{background: #aaa}
        ul li{float:left; display:block; height: 40px; line-height: 40px; padding: 0 20px; position: relative;}
        ul li:hover{background: #cea;}
        ul li ul li{float: none;}
        /*关键一：将二级菜单设置为display：none;*/
 ul li ul{position: absolute;top:40px;left: 0; display: none;}
        ul li ul li:hover{background: red;}
        /*关键二：在划过二级菜单从属的一级菜单时，设置为display:block;*/
 ul li:hover ul{display: block;}
    </style>

Wie implementiert man ein PHP-Dropdown-Menü und mehrstufige Spalten? (Code tatsächlicher Test)

Dieser Artikel stellt hauptsächlich vor, wie man das sekundäre PHP-Dropdown-Menü auf einfache Weise implementiert. Ich hoffe, dass es Freunden in Not hilfreich sein wird .

[Empfehlungen für verwandte Inhalte]

Vollständiger Code für das sekundäre Dropdown-Menü der PHP-Entwicklungsnavigationsleiste

Sekundäres Dropdown-Menü der PHP-Entwicklungsnavigationsleiste Down-Menü-HTML-Seite

So lesen Sie die Datenbank mit dem PHP-Dropdown-Menü

PHP und jQuery realisieren den Anzeigeeffekt der drei- Dropdown-Menü der Navigationsleiste auf Ebene

PHP-Entwicklung Navigationsleiste sekundäres Dropdown-Menü CSS-Stil

Das obige ist der detaillierte Inhalt vonWie implementiert man ein PHP-Dropdown-Menü und mehrstufige Spalten? (Code tatsächlicher Test). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php jquery css html 数据库
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Warum sind globale Variablen ungültig oder falsch?Nächster Artikel：Warum sind globale Variablen ungültig oder falsch?

In Verbindung stehende Artikel

Mehr sehen