Rumah > Artikel > pembangunan bahagian belakang > PHP melaksanakan kesan bar navigasi sekunder
PHP melaksanakan kesan bar navigasi sekunder
- 王林asal
- 2023-05-07 12:11:07753semak imbas
Dalam proses pembangunan tapak web, bar navigasi merupakan komponen penting, yang membolehkan pengguna mencari maklumat yang mereka perlukan dengan mudah dan melompat ke halaman dengan mudah. Terutamanya dalam laman web yang besar, untuk memudahkan penggunaan pengguna, selalunya perlu untuk melaksanakan kesan bar navigasi sekunder. Artikel ini akan memperkenalkan cara menggunakan PHP untuk mencapai kesan bar navigasi sekunder.
1. Reka bentuk halaman hujung hadapan
Apabila mereka bentuk halaman, kita perlu terlebih dahulu menentukan lokasi bar navigasi kedua. Di sini, kami menggunakan bar navigasi sekunder sebagai sub-lajur di bawah bar navigasi utama, iaitu, apabila tetikus melayang di atas bar navigasi utama, bar navigasi sekunder yang berkaitan dikembangkan secara automatik.
Untuk mencapai kesan ini, kami boleh menambah bekas yang mengandungi semua bar navigasi peringkat pertama dalam kod HTML dan menambah elemen anak yang sepadan di bawah bekas untuk mewakili bar navigasi peringkat kedua. Apabila tetikus melayang di atas bar navigasi peringkat pertama, kami perlu menggunakan JavaScript untuk mengembangkan dan meruntuhkan bar navigasi peringkat kedua dengan mengendalikan sifat CSS.
Berikut ialah contoh kod HTML dan 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. Penulisan kod bahagian belakang
Selepas halaman muka depan siap, kita perlu menulis kod PHP untuk menjana bar Navigasi peringkat kedua secara dinamik. Semasa proses menulis kod PHP, kita perlu menentukan sub-lajur setiap bar navigasi peringkat pertama dan menghantarnya ke dalam fungsi hujung belakang sebagai tatasusunan. Fungsi ini akan menjana bar navigasi sekunder secara dinamik berdasarkan data tatasusunan dan mengembalikannya ke halaman hujung hadapan untuk paparan.
Berikut ialah contoh kod 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 Lengkapkan kod
Dengan menggabungkan reka bentuk halaman hadapan dan kod PHP bahagian belakang, kami boleh melaksanakan. kesan bar Navigasi dua peringkat untuk tapak web PHP. Berikut ialah contoh kod lengkap:
<!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>
Dengan kod di atas, kami boleh melaksanakan kesan halaman dengan bar navigasi sekunder melalui PHP. Dalam pembangunan sebenar, kita boleh mengubah suai dan mengoptimumkan sewajarnya mengikut keperluan.
Atas ialah kandungan terperinci PHP melaksanakan kesan bar navigasi sekunder. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!