PHP implementiert den sekundären Navigationsleisteneffekt-PHP-Problem-php.cn

PHP implementiert den sekundären Navigationsleisteneffekt

王林

Freigeben： 2023-05-07 12:11:07

Original

787 Leute haben es durchsucht

Im Website-Entwicklungsprozess ist die Navigationsleiste eine wesentliche Komponente, die es Benutzern ermöglicht, die benötigten Informationen leicht zu finden und bequem zu Seiten zu springen. Insbesondere bei großen Websites ist es zur Erleichterung der Benutzernutzung häufig erforderlich, den Effekt einer sekundären Navigationsleiste zu implementieren. In diesem Artikel wird erläutert, wie Sie mit PHP den Effekt einer sekundären Navigationsleiste erzielen.

1. Front-End-Seitendesign

Beim Entwerfen der Seite müssen wir zunächst die Position der sekundären Navigationsleiste bestimmen. Hier verwenden wir die sekundäre Navigationsleiste als Unterspalte unter der primären Navigationsleiste. Das heißt, wenn die Maus über die primäre Navigationsleiste fährt, wird die zugehörige sekundäre Navigationsleiste automatisch erweitert.

Um diesen Effekt zu erzielen, können wir im HTML-Code einen Container hinzufügen, der alle Navigationsleisten der ersten Ebene enthält, und entsprechende untergeordnete Elemente unter dem Container hinzufügen, um die Navigationsleiste der zweiten Ebene darzustellen. Wenn sich die Maus über der Navigationsleiste der ersten Ebene befindet, müssen wir JavaScript verwenden, um die Navigationsleiste der zweiten Ebene durch Bedienen von CSS-Eigenschaften zu erweitern und zu reduzieren.

Das Folgende sind HTML- und CSS-Codebeispiele:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>PHP实现二级导航栏效果</title>
    <style>
        /* 定义一级导航栏样式 */
        #nav-container {
            background-color: #333; /* 设置背景色 */
            color: #fff; /* 设置文字颜色 */
            padding: 10px; /* 设置内边距 */
        }
        #nav-container ul {
            list-style: none; /* 取消列表样式 */
            margin: 0; /* 取消外边距 */
            padding: 0; /* 取消内边距 */
            display: flex; /* 使用 flex 布局 */
        }
        #nav-container li {
            margin-right: 20px; /* 设置每个导航栏之间的距离为20像素 */
            position: relative; /* 设置导航栏为相对定位 */
        }
        /* 定义二级导航栏样式 */
        .sub-nav {
            display: none; /* 初始时二级导航栏不可见 */
            position: absolute; /* 设置为绝对定位 */
            top: 50px; /* 距离顶部50像素 */
            left: 0; /* 距离左侧为0 */
            background-color: #333; /* 背景色为灰色 */
            color: #fff; /* 字体颜色为白色 */
            padding: 10px; /* 设置内边距 */
        }
        /* 当鼠标悬浮在导航栏上时展开二级导航栏 */
        .dropdown:hover .sub-nav {
            display: block;
        }
    </style>
</head>
<body>
    <div id="nav-container">
        <ul>
            <li><a href="#">导航栏1</a>
                <ul class="sub-nav">
                    <li><a href="#">子导航1-1</a></li>
                    <li><a href="#">子导航1-2</a></li>
                    <li><a href="#">子导航1-3</a></li>
                </ul>
            </li>
            <li><a href="#">导航栏2</a>
                <ul class="sub-nav">
                    <li><a href="#">子导航2-1</a></li>
                    <li><a href="#">子导航2-2</a></li>
                    <li><a href="#">子导航2-3</a></li>
                </ul>
            </li>
            <li><a href="#">导航栏3</a>
                <ul class="sub-nav">
                    <li><a href="#">子导航3-1</a></li>
                    <li><a href="#">子导航3-2</a></li>
                    <li><a href="#">子导航3-3</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

Nach dem Login kopieren

2. Backend-Code schreiben

Nachdem die Frontend-Seite fertig ist, Wir müssen PHP-Code schreiben, um dynamisch eine sekundäre Navigationsleiste zu generieren. Während des Schreibprozesses von PHP-Code müssen wir die Unterspalten jeder Navigationsleiste der ersten Ebene bestimmen und sie als Array an die Back-End-Funktion übergeben. Die Funktion generiert dynamisch eine sekundäre Navigationsleiste basierend auf den Array-Daten und gibt sie zur Anzeige an die Front-End-Seite zurück.

Das Folgende ist ein PHP-Codebeispiel:

<?php
    /* 定义导航栏数组 */
    $nav = [
        '导航栏1' => ['子导航1-1', '子导航1-2', '子导航1-3'],
        '导航栏2' => ['子导航2-1', '子导航2-2', '子导航2-3'],
        '导航栏3' => ['子导航3-1', '子导航3-2', '子导航3-3']
    ];

    /* 定义函数动态生成二级导航栏 */
    function generateSubNav($nav) {
        $html = ''; /* 定义存储 HTML 代码的变量 */
        foreach ($nav as $key => $value) {
            $html .= '<li class="dropdown">' . /* 添加一级导航栏类名 */
                     '<a href="#">' . $key . '</a>' . /* 添加一级导航栏名称 */
                     '<ul class="sub-nav">'; /* 添加二级导航栏类名 */
            foreach ($value as $val) {
                $html .= '<li><a href="#">' . $val . '</a></li>'; /* 添加二级导航栏名称 */
            }
            $html .= '</ul></li>';
        }
        return $html;
    }

    /* 调用函数并输出 HTML 代码 */
    echo generateSubNav($nav);
?>

Nach dem Login kopieren

3. Vollständiger Code

Durch die Kombination des Front-End-Seitendesigns und des Back-Ends Mit PHP-Code können wir eine PHP-Website mit sekundärem Navigationsleisteneffekt implementieren. Das Folgende ist ein vollständiges Codebeispiel:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>PHP实现二级导航栏效果</title>
    <style>
        /* 定义一级导航栏样式 */
        #nav-container {
            background-color: #333; /* 设置背景色 */
            color: #fff; /* 设置文字颜色 */
            padding: 10px; /* 设置内边距 */
        }
        #nav-container ul {
            list-style: none; /* 取消列表样式 */
            margin: 0; /* 取消外边距 */
            padding: 0; /* 取消内边距 */
            display: flex; /* 使用 flex 布局 */
        }
        #nav-container li {
            margin-right: 20px; /* 设置每个导航栏之间的距离为20像素 */
            position: relative; /* 设置导航栏为相对定位 */
        }
        /* 定义二级导航栏样式 */
        .sub-nav {
            display: none; /* 初始时二级导航栏不可见 */
            position: absolute; /* 设置为绝对定位 */
            top: 50px; /* 距离顶部50像素 */
            left: 0; /* 距离左侧为0 */
            background-color: #333; /* 背景色为灰色 */
            color: #fff; /* 字体颜色为白色 */
            padding: 10px; /* 设置内边距 */
        }
        /* 当鼠标悬浮在导航栏上时展开二级导航栏 */
        .dropdown:hover .sub-nav {
            display: block;
        }
    </style>
</head>
<body>
    <div id="nav-container">
        <ul>
            <?php
                /* 定义导航栏数组 */
                $nav = [
                    '导航栏1' => ['子导航1-1', '子导航1-2', '子导航1-3'],
                    '导航栏2' => ['子导航2-1', '子导航2-2', '子导航2-3'],
                    '导航栏3' => ['子导航3-1', '子导航3-2', '子导航3-3']
                ];

                /* 定义函数动态生成二级导航栏 */
                function generateSubNav($nav) {
                    $html = ''; /* 定义存储 HTML 代码的变量 */
                    foreach ($nav as $key => $value) {
                        $html .= '<li class="dropdown">' . /* 添加一级导航栏类名 */
                                 '<a href="#">' . $key . '</a>' . /* 添加一级导航栏名称 */
                                 '<ul class="sub-nav">'; /* 添加二级导航栏类名 */
                        foreach ($value as $val) {
                            $html .= '<li><a href="#">' . $val . '</a></li>'; /* 添加二级导航栏名称 */
                        }
                        $html .= '</ul></li>';
                    }
                    return $html;
                }

                /* 调用函数并输出 HTML 代码 */
                echo generateSubNav($nav);
            ?>
        </ul>
    </div>
</body>
</html>

Nach dem Login kopieren

Mit dem obigen Code können wir über PHP einen Seiteneffekt mit einer sekundären Navigationsleiste implementieren. In der tatsächlichen Entwicklung können wir bei Bedarf entsprechend modifizieren und optimieren.

Das obige ist der detaillierte Inhalt vonPHP implementiert den sekundären Navigationsleisteneffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!