PHP はセカンダリ ナビゲーション バー効果を実装します
- 王林オリジナル
- 2023-05-07 12:11:07753ブラウズ
Web サイト開発のプロセスにおいて、ナビゲーション バーは重要なコンポーネントであり、ユーザーが必要な情報を簡単に見つけてページに簡単に移動できるようにします。特に大規模な Web サイトでは、ユーザーが使いやすくするために、多くの場合、セカンダリ ナビゲーション バーの効果を実装する必要があります。この記事では、PHP を使用してセカンダリ ナビゲーション バーの効果を実現する方法を紹介します。
1. フロントエンド ページのデザイン
ページをデザインするときは、最初に 2 番目のナビゲーション バーの位置を決定する必要があります。ここでは、セカンダリ ナビゲーション バーをプライマリ ナビゲーション バーの下のサブ列として使用します。つまり、マウスをプライマリ ナビゲーション バーの上に置くと、関連するセカンダリ ナビゲーション バーが自動的に展開されます。
この効果を実現するには、HTML コードにすべての第 1 レベルのナビゲーション バーを含むコンテナを追加し、そのコンテナの下に第 2 レベルのナビゲーション バーを表す対応する子要素を追加します。マウスが第 1 レベルのナビゲーション バー上にある場合、JavaScript を使用して CSS プロパティを操作して第 2 レベルのナビゲーション バーを展開したり折りたたんだりする必要があります。
以下は 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 コードを記述する必要があります。第 2 レベルのナビゲーション バーを動的に生成します。 PHP コードの作成プロセス中に、各第 1 レベルのナビゲーション バーのサブ列を決定し、それらを配列としてバックエンド関数に渡す必要があります。この関数は、配列データに基づいて 2 番目のナビゲーション バーを動的に生成し、表示のためにフロントエンド ページに返します。
次は 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 Web サイトの 2 レベルのナビゲーション バー効果。以下は完全なコード例です:
<!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 を介して 2 番目のナビゲーション バーを備えたページ効果を実装できます。実際の開発では、必要に応じて修正や最適化を行うことができます。
以上がPHP はセカンダリ ナビゲーション バー効果を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。