Главная » PHP » Преобразуйте html nav menu в динамическое переполнение стека

Преобразуйте html nav menu в динамическое переполнение стека

Я получил это меню навигации в HTML, и мне нужно преобразовать его в PHP. Я попытался с массивом php и foreach, но я застрял на подпунктах. Я сейчас не могу понять, что мне делать. Есть идеи?

Это то, что я делал до сих пор.

  1. Создайте массив для родительских элементов.

    //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")

);

?>

  2. Используйте 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>

-1

Решение

Вы можете создать вложенный массив с подпунктами и перебрать его с помощью рекурсивная функция.
Таким образом, вы можете добавить столько подуровней, сколько вам нужно.

$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);
2

Другие решения

Вам нужно будет реструктурировать свой массив, чтобы включить подэлементы. Вы можете использовать Синтаксис короткого массива который я предпочитаю, когда много.

$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 } ?>
1

Источник
По вопросам рекламы [email protected]
Web-Answers © 2024 Наверх