PHP implémente l'effet de barre de navigation secondaire-Problème PHP-php.cn

PHP implémente l'effet de barre de navigation secondaire

王林

Libérer： 2023-05-07 12:11:07

original

775 Les gens l'ont consulté

Dans le processus de développement d'un site Web, la barre de navigation est un élément essentiel, qui permet aux utilisateurs de trouver facilement les informations dont ils ont besoin et d'accéder facilement aux pages. Surtout dans les grands sites Web, afin de faciliter l'utilisation des utilisateurs, il est souvent nécessaire de mettre en œuvre l'effet d'une barre de navigation secondaire. Cet article explique comment utiliser PHP pour obtenir l'effet d'une barre de navigation secondaire.

1. Conception de la page frontale

Lors de la conception de la page, nous devons d'abord déterminer l'emplacement de la barre de navigation secondaire. Ici, nous utilisons la barre de navigation secondaire comme sous-colonne sous la barre de navigation principale, c'est-à-dire que lorsque la souris survole la barre de navigation principale, la barre de navigation secondaire associée est automatiquement développée.

Afin d'obtenir cet effet, nous pouvons ajouter un conteneur contenant toutes les barres de navigation de premier niveau dans le code HTML et ajouter les éléments enfants correspondants sous le conteneur pour représenter la barre de navigation de deuxième niveau. Lorsque la souris survole la barre de navigation de premier niveau, nous devons utiliser JavaScript pour développer et réduire la barre de navigation de deuxième niveau en exploitant les propriétés CSS.

Voici des exemples de code HTML et CSS :

<!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>

Copier après la connexion

2. Écriture de code back-end

Une fois la page front-end prête, nous devons écrire du code PHP pour générer dynamiquement la barre de navigation secondaire. Pendant le processus d'écriture du code PHP, nous devons déterminer les sous-colonnes de chaque barre de navigation de premier niveau et les transmettre à la fonction back-end sous forme de tableau. La fonction générera dynamiquement une barre de navigation secondaire basée sur les données du tableau et la renverra à la page frontale pour affichage.

Ce qui suit est un exemple de code PHP :

<?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);
?>

Copier après la connexion

3. Code complet

En combinant la conception de la page front-end et le code PHP back-end, nous pouvons implémenter un site Web PHP avec un effet de barre de navigation secondaire. Ce qui suit est un exemple de code complet :

<!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>

Copier après la connexion

Avec le code ci-dessus, nous pouvons implémenter un effet de page avec une barre de navigation secondaire via PHP. Dans le développement réel, nous pouvons modifier et optimiser en conséquence selon les besoins.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!