PHP는 보조 탐색 모음 효과를 구현합니다.
- 王林원래의
- 2023-05-07 12:11:07753검색
웹사이트 개발 과정에서 탐색 모음은 사용자가 필요한 정보를 쉽게 찾고 페이지로 편리하게 이동할 수 있도록 하는 필수 구성 요소입니다. 특히 대규모 웹사이트에서는 사용자의 이용을 용이하게 하기 위해 보조 네비게이션 바의 효과를 구현해야 하는 경우가 많습니다. 이 기사에서는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!