将 html 导航菜单转换为动态 php
Convert html nav menu into dynamic php
我在 html 中得到了这个导航菜单,我需要将它转换成 php。我尝试使用 php 数组和 foreach,但我坚持使用子项。我现在不知道该怎么办。有什么想法吗?
这就是我到目前为止所做的。
为父项创建一个数组。
//Nav Items
$navItems = array(
array(
slug => "index.php",
title => "Home"
),
array(
slug => "cruise-partners.php",
title => "Cruise Partners"
),
array(
slug => "destinations.php",
title => "Destinations"
),
array(
slug => "cruise-deals.php",
title => "Cruise Deals"
),
array(
slug => "cruise-type.php",
title => "Cruise Type"
),
array(
slug => "river-cruise.php",
title => "River Cruise"
),
array(
slug => "luxury.php",
title => "Luxury"
),
array(
slug => "contact.php",
title => "Contacts"
)
);
?>
使用 foreach 并回显它们
<div class="containermargins clearfix">
<nav class="hmenu"data-responsive-menu="true"data-responsive-levels="">
<div class="responsivemenu collapse-button">
<div class="container-inner">
<div class="menuitem ">
<a data-toggle="collapse"data-target=".hmenu .collapse-button + .navbar-collapse"href="#"onclick="return false;"><span></span></a>
</div>
</div>
</div>
<div class="navbar-collapse collapse">
<div class="horizontalmenu clearfix">
<div class="container-inner">
<ul class="menu nav nav-pills nav-justified">
`<?php foreach ($navItems as $item) {
echo '<li class="menuitem submenu-icon-only toplevel-item"><a class="active" href=\"$item[slug]\">$item[title]</a></li>';
} ?>`
</ul>
</div>
</div>
这是我的 html 导航菜单。
<div class="containermargins clearfix">
<nav class="hmenu"data-responsive-menu="true"data-responsive-levels="">
<div class="responsivemenu collapse-button">
<div class="container-inner">
<div class="menuitem ">
<a data-toggle="collapse"data-target=".hmenu .collapse-button + .navbar-collapse"href="#"onclick="return false;"><span></span></a>
</div>
</div>
</div>
<div class="navbar-collapse collapse">
<div class="horizontalmenu clearfix">
<div class="container-inner">
<ul class="menu nav nav-pills nav-justified">
<li class="menuitem submenu-icon-only toplevel-item">
<aclass="active"title=" Direction - Tailor-made Holidays"href="./home.html">Home</a>
<div class="menu-popup ">
<ul class="menu no-margins">
<li class="menuitem sub-item sub-item">
<a title="About Us"href="./home/about-us.html">About Us</a>
</li>
<li class="menuitem sub-item sub-item">
<a title="FAQ"href="./home/faq.html">FAQ</a>
</li>
</ul>
</div>
</li>
<li class="menuitem submenu-icon-only toplevel-item">
<a title=" Partners"href="./partners.html">Partners</a>
<div class="menu-popup ">
<ul class="menu no-margins">
<li class="menuitem sub-item sub-item">
<a title="Carnival"href="./partners/carnivals.html">Carnivals</a>
</li>
<li class="menuitem sub-item sub-item">
<a title="Celebrity"href="./partners/Celebrity.html">Celebrity</a>
<div class="menu-popup ">
<ul class="menu no-margins">
<li class="menuitem sub-item sub-item">
<a title="Third Level 1"href="./partners/Celebrity/third-level-one.html">Third Level 1</a>
</li>
</ul>
</div>
</li>
<li class="menuitem sub-item sub-item">
<a title="Cunard"href="./partners/cunard.html">Cunard</a>
</li>
<li class="menuitem sub-item sub-item">
<a title="Holland America Line"href="./partners/holland-america-line.html">Holland America Line</a>
</li>
<li class="menuitem sub-item sub-item">
<a title="Norwegian"href="./partners/norwegian.html">Norwegian</a>
</li>
<li class="menuitem sub-item sub-item">
<a title="Princess"href="./partners/princess.html">Princess</a>
</li>
<li class="menuitem sub-item sub-item">
<a title="Star Clippers"href="./partners/star-clippers.html">Star Clippers</a>
</li>
<li class="menuitem sub-item sub-item">
<a title="PO"href="./partners/p-and-o.html">PO</a>
</li>
<li class="menuitem sub-item sub-item">
<a title="Royal Caribbean"href="./partners/royal-caribbean.html">Royal Caribbean</a>
</li>
</ul>
</div>
</li>
<li class="menuitem toplevel-item">
<a title="Destinations"href="./destinations.html">Destinations</a>
</li>
<li class="menuitem toplevel-item">
<a title=" Deals"href="./deals.html"> Deals</a>
</li>
<li class="menuitem toplevel-item">
<a title=" Type"href="./type.html"> Type</a>
</li>
<li class="menuitem toplevel-item">
<a title="River "href="./river-.html">River </a>
</li>
<li class="menuitem toplevel-item">
<a title="Luxury"href="./luxury.html">Luxury</a>
</li>
<li class="menuitem toplevel-item">
<a title="Contacts"href="./contacts.html">Contacts</a>
</ul>
</div>
</div>
</div>
</nav>
您需要重组数组以包含子项。您可以使用 Short Array Syntax ,我在嵌套很多时更喜欢它。
$navItems =
[
[
'title' => 'First Option'
'slug' => 'first-option'
'sub' => [
'title' => 'First Option Sub'
'slug' => 'first-option-sub'
],
[
'title' => 'First Option Sub 2'
'slug' => 'first-option-sub-2'
]
],
[
'title' => 'First Option'
'slug' => 'first-option'
'sub' => [
'title' => 'First Option Sub'
'slug' => 'first-option-sub'
]
]
]
实际显示子项时,您需要遍历 $navItem
数组并检查是否存在 'sub'。如果它存在,只需以相同的方式循环它。
我发现很难理解你的HTML,所以这可能不是完全相同的结构,但它应该给你思路。
<?php foreach ($navItems as $item) { ?>
<li class="menuitem submenu-icon-only toplevel-item">
<a class="active" href="/<?= $item['slug'] ?>">
<?= $item['title'] ?>
</a>
</li>
<?php if (isset($item['sub']) { ?>
<?php foreach($item['sub'] as $subItem) { ?>
<li class="sub-item>
<a href="/<? $subItem['slug'] ?>">
<?= $subItem['title'] ?>
</a>
</li>
<?php } ?>
<?php } ?>
<?php } ?>
您可以创建一个包含子项目的嵌套数组,并使用 recursive function.
遍历它,这样您就可以根据需要添加任意数量的子级别。
$navItems = array(
array(
"slug" => "index.php",
"title" => "Home"
),
array(
"slug" => "cruise-partners.php",
"title" => "Cruise Partners",
"subitems" => array(
array(
"slug"=>"x.html",
"title"=>"sub-item.html"
)
)
),
array(
"slug" => "destinations.php",
"title" => "Destinations"
),
array(
"slug" => "cruise-deals.php",
"title" => "Cruise Deals"
),
array(
"slug" => "cruise-type.php",
"title" => "Cruise Type",
),
array(
"slug" => "river-cruise.php",
"title" => "River Cruise"
),
array(
"slug" => "luxury.php",
"title" => "Luxury"
),
array(
"slug" => "contact.php",
"title" => "Contacts"
)
);
function drawMenu($items){
echo "<ul>";
foreach($items as $item){
echo "<li><a href='".$item['slug']."'>".$item['title']."</a>";
if(isset($item['subitems'])){
echo "<ul>";
drawMenu($item['subitems']);
echo "</ul>";
}
echo "</li>";
}
echo "</ul>";
}
drawMenu($navItems);
我在 html 中得到了这个导航菜单,我需要将它转换成 php。我尝试使用 php 数组和 foreach,但我坚持使用子项。我现在不知道该怎么办。有什么想法吗?
这就是我到目前为止所做的。
为父项创建一个数组。
//Nav Items $navItems = array( array( slug => "index.php", title => "Home" ), array( slug => "cruise-partners.php", title => "Cruise Partners" ), array( slug => "destinations.php", title => "Destinations" ), array( slug => "cruise-deals.php", title => "Cruise Deals" ), array( slug => "cruise-type.php", title => "Cruise Type" ), array( slug => "river-cruise.php", title => "River Cruise" ), array( slug => "luxury.php", title => "Luxury" ), array( slug => "contact.php", title => "Contacts" ) ); ?>
使用 foreach 并回显它们
<div class="containermargins clearfix"> <nav class="hmenu"data-responsive-menu="true"data-responsive-levels=""> <div class="responsivemenu collapse-button"> <div class="container-inner"> <div class="menuitem "> <a data-toggle="collapse"data-target=".hmenu .collapse-button + .navbar-collapse"href="#"onclick="return false;"><span></span></a> </div> </div> </div> <div class="navbar-collapse collapse"> <div class="horizontalmenu clearfix"> <div class="container-inner"> <ul class="menu nav nav-pills nav-justified"> `<?php foreach ($navItems as $item) { echo '<li class="menuitem submenu-icon-only toplevel-item"><a class="active" href=\"$item[slug]\">$item[title]</a></li>'; } ?>` </ul> </div> </div>
这是我的 html 导航菜单。
<div class="containermargins clearfix"> <nav class="hmenu"data-responsive-menu="true"data-responsive-levels=""> <div class="responsivemenu collapse-button"> <div class="container-inner"> <div class="menuitem "> <a data-toggle="collapse"data-target=".hmenu .collapse-button + .navbar-collapse"href="#"onclick="return false;"><span></span></a> </div> </div> </div> <div class="navbar-collapse collapse"> <div class="horizontalmenu clearfix"> <div class="container-inner"> <ul class="menu nav nav-pills nav-justified"> <li class="menuitem submenu-icon-only toplevel-item"> <aclass="active"title=" Direction - Tailor-made Holidays"href="./home.html">Home</a> <div class="menu-popup "> <ul class="menu no-margins"> <li class="menuitem sub-item sub-item"> <a title="About Us"href="./home/about-us.html">About Us</a> </li> <li class="menuitem sub-item sub-item"> <a title="FAQ"href="./home/faq.html">FAQ</a> </li> </ul> </div> </li> <li class="menuitem submenu-icon-only toplevel-item"> <a title=" Partners"href="./partners.html">Partners</a> <div class="menu-popup "> <ul class="menu no-margins"> <li class="menuitem sub-item sub-item"> <a title="Carnival"href="./partners/carnivals.html">Carnivals</a> </li> <li class="menuitem sub-item sub-item"> <a title="Celebrity"href="./partners/Celebrity.html">Celebrity</a> <div class="menu-popup "> <ul class="menu no-margins"> <li class="menuitem sub-item sub-item"> <a title="Third Level 1"href="./partners/Celebrity/third-level-one.html">Third Level 1</a> </li> </ul> </div> </li> <li class="menuitem sub-item sub-item"> <a title="Cunard"href="./partners/cunard.html">Cunard</a> </li> <li class="menuitem sub-item sub-item"> <a title="Holland America Line"href="./partners/holland-america-line.html">Holland America Line</a> </li> <li class="menuitem sub-item sub-item"> <a title="Norwegian"href="./partners/norwegian.html">Norwegian</a> </li> <li class="menuitem sub-item sub-item"> <a title="Princess"href="./partners/princess.html">Princess</a> </li> <li class="menuitem sub-item sub-item"> <a title="Star Clippers"href="./partners/star-clippers.html">Star Clippers</a> </li> <li class="menuitem sub-item sub-item"> <a title="PO"href="./partners/p-and-o.html">PO</a> </li> <li class="menuitem sub-item sub-item"> <a title="Royal Caribbean"href="./partners/royal-caribbean.html">Royal Caribbean</a> </li> </ul> </div> </li> <li class="menuitem toplevel-item"> <a title="Destinations"href="./destinations.html">Destinations</a> </li> <li class="menuitem toplevel-item"> <a title=" Deals"href="./deals.html"> Deals</a> </li> <li class="menuitem toplevel-item"> <a title=" Type"href="./type.html"> Type</a> </li> <li class="menuitem toplevel-item"> <a title="River "href="./river-.html">River </a> </li> <li class="menuitem toplevel-item"> <a title="Luxury"href="./luxury.html">Luxury</a> </li> <li class="menuitem toplevel-item"> <a title="Contacts"href="./contacts.html">Contacts</a> </ul> </div> </div> </div> </nav>
您需要重组数组以包含子项。您可以使用 Short Array Syntax ,我在嵌套很多时更喜欢它。
$navItems =
[
[
'title' => 'First Option'
'slug' => 'first-option'
'sub' => [
'title' => 'First Option Sub'
'slug' => 'first-option-sub'
],
[
'title' => 'First Option Sub 2'
'slug' => 'first-option-sub-2'
]
],
[
'title' => 'First Option'
'slug' => 'first-option'
'sub' => [
'title' => 'First Option Sub'
'slug' => 'first-option-sub'
]
]
]
实际显示子项时,您需要遍历 $navItem
数组并检查是否存在 'sub'。如果它存在,只需以相同的方式循环它。
我发现很难理解你的HTML,所以这可能不是完全相同的结构,但它应该给你思路。
<?php foreach ($navItems as $item) { ?>
<li class="menuitem submenu-icon-only toplevel-item">
<a class="active" href="/<?= $item['slug'] ?>">
<?= $item['title'] ?>
</a>
</li>
<?php if (isset($item['sub']) { ?>
<?php foreach($item['sub'] as $subItem) { ?>
<li class="sub-item>
<a href="/<? $subItem['slug'] ?>">
<?= $subItem['title'] ?>
</a>
</li>
<?php } ?>
<?php } ?>
<?php } ?>
您可以创建一个包含子项目的嵌套数组,并使用 recursive function.
遍历它,这样您就可以根据需要添加任意数量的子级别。
$navItems = array(
array(
"slug" => "index.php",
"title" => "Home"
),
array(
"slug" => "cruise-partners.php",
"title" => "Cruise Partners",
"subitems" => array(
array(
"slug"=>"x.html",
"title"=>"sub-item.html"
)
)
),
array(
"slug" => "destinations.php",
"title" => "Destinations"
),
array(
"slug" => "cruise-deals.php",
"title" => "Cruise Deals"
),
array(
"slug" => "cruise-type.php",
"title" => "Cruise Type",
),
array(
"slug" => "river-cruise.php",
"title" => "River Cruise"
),
array(
"slug" => "luxury.php",
"title" => "Luxury"
),
array(
"slug" => "contact.php",
"title" => "Contacts"
)
);
function drawMenu($items){
echo "<ul>";
foreach($items as $item){
echo "<li><a href='".$item['slug']."'>".$item['title']."</a>";
if(isset($item['subitems'])){
echo "<ul>";
drawMenu($item['subitems']);
echo "</ul>";
}
echo "</li>";
}
echo "</ul>";
}
drawMenu($navItems);