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

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

王林

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

オリジナル

638 人が閲覧しました

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

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

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

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

以下は HTML および CSS コードの例です:




    
    PHP实现二级导航栏效果
    



    
        
            导航栏1
                
                    子导航1-1
                    子导航1-2
                    子导航1-3
                
            
            导航栏2
                
                    子导航2-1
                    子导航2-2
                    子导航2-3
                
            
            导航栏3
                
                    子导航3-1
                    子导航3-2
                    子导航3-3

ログイン後にコピー

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

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

次は PHP コードの例です:

 ['子导航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 .= '' . /* 添加一级导航栏类名 */
                     '' . $key . '' . /* 添加一级导航栏名称 */
                     ''; /* 添加二级导航栏类名 */
            foreach ($value as $val) {
                $html .= '' . $val . ''; /* 添加二级导航栏名称 */
            }
            $html .= '';
        }
        return $html;
    }

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

ログイン後にコピー

3. 完全なコード

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




    
    PHP实现二级导航栏效果
    



    
        
             ['子导航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 .= '' . /* 添加一级导航栏类名 */
                                 '' . $key . '' . /* 添加一级导航栏名称 */
                                 ''; /* 添加二级导航栏类名 */
                        foreach ($value as $val) {
                            $html .= '' . $val . ''; /* 添加二级导航栏名称 */
                        }
                        $html .= '';
                    }
                    return $html;
                }

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