PHP implements secondary navigation bar effect-PHP Problem-php.cn

PHP implements secondary navigation bar effect

王林

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

Original

775 people have browsed it

In the process of website development, the navigation bar is an essential component, which allows users to easily find the information they need and jump to pages conveniently. Especially in large websites, in order to facilitate users' use, it is often necessary to implement the effect of a secondary navigation bar. This article will introduce how to use PHP to achieve the effect of a secondary navigation bar.

1. Front-end page design

When designing the page, we need to first determine the location of the secondary navigation bar. Here, we use the secondary navigation bar as a sub-column under the primary navigation bar, that is, when the mouse hovers over the primary navigation bar, the related secondary navigation bar is automatically expanded.

In order to achieve this effect, we can add a container containing all first-level navigation bars in the HTML code, and add corresponding child elements under the container to represent the second-level navigation bar. When the mouse is hovering over the first-level navigation bar, we need to use JavaScript to expand and collapse the second-level navigation bar by operating CSS properties.

The following are HTML and CSS code examples:

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

Copy after login

2. Back-end code writing

After the front-end page is ready, we need to write PHP code to dynamically generate the second-level Navigation Bar. During the writing process of PHP code, we need to determine the sub-columns of each first-level navigation bar and pass them into the back-end function as an array. The function will dynamically generate a secondary navigation bar based on the array data and return it to the front-end page for display.

The following is a PHP code example:

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

Copy after login

3. Complete code

By combining the front-end page design and the back-end PHP code, we can implement a two-level Navigation bar effect for PHP website. The following is a complete code example:

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

Copy after login

With the above code, we can implement a page effect with a secondary navigation bar through PHP. In actual development, we can modify and optimize accordingly as needed.

The above is the detailed content of PHP implements secondary navigation bar effect. For more information, please follow other related articles on the PHP Chinese website!