PHP はセカンダリナビゲーションバー効果を実装します-PHPの問題-php.cn

PHP はセカンダリナビゲーションバー効果を実装します

王林

リリース： 2023-05-07 12:11:07

オリジナル

757 人が閲覧しました

Web サイト開発のプロセスにおいて、ナビゲーションバーは重要なコンポーネントであり、ユーザーが必要な情報を簡単に見つけてページに簡単に移動できるようにします。特に大規模な Web サイトでは、ユーザーが使いやすくするために、多くの場合、セカンダリナビゲーションバーの効果を実装する必要があります。この記事では、PHP を使用してセカンダリナビゲーションバーの効果を実現する方法を紹介します。

1. フロントエンドページのデザイン

ページをデザインするときは、最初に 2 番目のナビゲーションバーの位置を決定する必要があります。ここでは、セカンダリナビゲーションバーをプライマリナビゲーションバーの下のサブ列として使用します。つまり、マウスをプライマリナビゲーションバーの上に置くと、関連するセカンダリナビゲーションバーが自動的に展開されます。

この効果を実現するには、HTML コードにすべての第 1 レベルのナビゲーションバーを含むコンテナを追加し、そのコンテナの下に第 2 レベルのナビゲーションバーを表す対応する子要素を追加します。マウスが第 1 レベルのナビゲーションバー上にある場合、JavaScript を使用して CSS プロパティを操作して第 2 レベルのナビゲーションバーを展開したり折りたたんだりする必要があります。

以下は HTML および 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>

ログイン後にコピー

2. バックエンドコードの記述

フロントエンドページの準備ができたら、PHP コードを記述する必要があります。第 2 レベルのナビゲーションバーを動的に生成します。 PHP コードの作成プロセス中に、各第 1 レベルのナビゲーションバーのサブ列を決定し、それらを配列としてバックエンド関数に渡す必要があります。この関数は、配列データに基づいて 2 番目のナビゲーションバーを動的に生成し、表示のためにフロントエンドページに返します。

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

ログイン後にコピー

3. 完全なコード

フロントエンドページのデザインとバックエンドの PHP コードを組み合わせることで、次のことを実装できます。 PHP Web サイトの 2 レベルのナビゲーションバー効果。以下は完全なコード例です:

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

ログイン後にコピー

上記のコードを使用すると、PHP を介して 2 番目のナビゲーションバーを備えたページ効果を実装できます。実際の開発では、必要に応じて修正や最適化を行うことができます。

以上がPHP はセカンダリナビゲーションバー効果を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。