在網站開發過程中，導覽列是一個必不可少的元件，它能夠讓使用者輕鬆地找到需要的資訊並且方便地進行頁面跳轉。特別是在大型網站中，為了方便使用者的使用，往往需要實現二級導覽列的效果。本文將介紹如何使用 PHP 來實現二級導覽列的效果。
一、前端頁面設計
在設計頁面時，我們需要先確定二級導覽列的位置。這裡，我們將二級導覽列作為一級導覽列下的子欄目，即在滑鼠懸浮在一級導覽列上時，自動展開相關的二級導覽列。
為了實現這樣的效果，我們可以在 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>二、後端程式碼寫
在前端頁面準備好之後，我們需要寫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);
?>三、完整程式碼
#將前端頁面設計和後端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中文網其他相關文章！
