Dropdown menu with children


#1

Hallo,
i’m createing menu with bootstrap dropdown.
It works almost fine, but i have two link to the same site, with child sites and without.

This is the code:

<?php $items = $pages->visible(); if($items->count()): ?>
<nav class="navbar menutop navbar-expand-lg text-right navbar-dark">
	<a class="navbar-brand" href="#"><img src="assets/images/logo.png" class="my-2"></a>
	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
	<span class="navbar-toggler-icon"><img src="assets/images/hamburger.svg" width="20px"></span>
	</button>

		<div class="collapse navbar-collapse" id="navbarNav">
			<ul class="navbar-nav ml-auto rightmenu">
				<?php foreach($items as $item): ?>
				<li class="nav-item mx-2">
					<a class="nav-link <?php e($item->isOpen(), ' class="active"') ?>" href="<?= $item->url() ?>"><?= $item->title()->html() ?></a>
				</li>
					<?php
					$children = $item->children()->visible();
					if($children->count() > 0):
					?>
					<li class="nav-item dropdown">
					<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><?= $item->title()->html() ?></a>

					<div class="dropdown-menu" aria-labelledby="navbarDropdown">
					<?php foreach($children as $child): ?>
						<a class="dropdown-item" href="<?= $child->url() ?>"><?= $child->title()->html() ?></a>
					<?php endforeach ?>
					</div>
					<?php endif ?>
		  			</li>
		 		<?php endforeach ?>

			</ul>

		</div>
	</nav><?php endif ?>

Maybe someone can help?


#2

You need an if-else statement here and you check has to happen earlier:

<?php $items = $pages->visible(); 
if($items->count()): ?>
<nav class="navbar menutop navbar-expand-lg text-right navbar-dark">
  <a class="navbar-brand" href="#"><img src="assets/images/logo.png" class="my-2"></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"><img src="assets/images/hamburger.svg" width="20px"></span>
  </button>
  
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav ml-auto rightmenu">
      <?php foreach($items as $item): ?>
        <?php $children = $item->children()->visible();
        if(!$children->count()): ?>
          <li class="nav-item mx-2">
            <a class="nav-link <?php e($item->isOpen(), ' class="active"') ?>" href="<?= $item->url() ?>"><?= $item->title()->html() ?></a>
          </li>
        <?php else: ?>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><?= $item->title()->html() ?></a>
            
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <?php foreach($children as $child): ?>
                <a class="dropdown-item" href="<?= $child->url() ?>"><?= $child->title()->html() ?></a>
              <?php endforeach ?>
            </div>
            
          </li>
        <?php endif ?>  
      <?php endforeach ?>
    
    </ul>
  
  </div>
</nav>
<?php endif ?>

#3

aha, ok i understand, thank you so much :slight_smile: