PHP는 보조 탐색 모음 효과를 구현합니다.-PHP 문제-php.cn

PHP는 보조 탐색 모음 효과를 구현합니다.

王林

풀어 주다： 2023-05-07 12:11:07

원래의

786명이 탐색했습니다.

웹사이트 개발 과정에서 탐색 모음은 사용자가 필요한 정보를 쉽게 찾고 페이지로 편리하게 이동할 수 있도록 하는 필수 구성 요소입니다. 특히 대규모 웹사이트에서는 사용자의 이용을 용이하게 하기 위해 보조 네비게이션 바의 효과를 구현해야 하는 경우가 많습니다. 이 기사에서는 PHP를 사용하여 보조 탐색 모음의 효과를 얻는 방법을 소개합니다.

1. 프런트 엔드 페이지 디자인

페이지를 디자인할 때 먼저 보조 탐색 모음의 위치를 결정해야 합니다. 여기서는 보조 탐색 모음을 기본 탐색 모음 아래의 하위 열로 사용합니다. 즉, 마우스를 기본 탐색 모음 위로 가져가면 관련 보조 탐색 모음이 자동으로 확장됩니다.

이 효과를 얻으려면 HTML 코드의 모든 첫 번째 수준 탐색 모음을 포함하는 컨테이너를 추가하고 컨테이너 아래에 해당 하위 요소를 추가하여 두 번째 수준 탐색 모음을 나타낼 수 있습니다. 첫 번째 수준 탐색 모음 위로 마우스를 가져갈 때 JavaScript를 사용하여 CSS 속성을 조작하여 두 번째 수준 탐색 모음을 확장 및 축소해야 합니다.

다음은 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 코드를 작성해야 합니다. PHP 코드를 작성하는 동안 각 첫 번째 수준 탐색 모음의 하위 열을 결정하고 이를 백엔드 함수에 배열로 전달해야 합니다. 이 함수는 배열 데이터를 기반으로 보조 탐색 모음을 동적으로 생성하고 이를 프런트 엔드 페이지에 반환하여 표시합니다.

다음은 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 웹 사이트를 구현할 수 있습니다. 다음은 전체 코드 예입니다.

<!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를 통해 보조 탐색 모음을 사용하여 페이지 효과를 구현할 수 있습니다. 실제 개발에서는 필요에 따라 적절하게 수정하고 최적화할 수 있습니다.

위 내용은 PHP는 보조 탐색 모음 효과를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!