HennWeb

Buch erstellen
Diese Seite zum Buch hinzufügen
Buch erstellen
Diese Seite aus Buch entfernen
Menü mit Bootstrap und JSON

Um ein Menü dynamisch zu erstellen, habe ich mich dazu entschieden die Menüstruktur im JSON Format abzulegen. Man kann diese in einen String umwandeln und beliebig in eine Datenbank ablegen.
Hier mal ein Beispiel für die JSON Struktur:
JSON
Und hier das Beispiel für das Menü:
menu.php
<html>
<head>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
	<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
 
	<style>
	/* CSS für Dropdown */
	.dropdown-submenu {
	  position: relative;
	}
 
	.dropdown-submenu a::after {
	  transform: rotate(-90deg);
	  position: absolute;
	  right: 6px;
	  top: .8em;
	}
 
	.dropdown-submenu .dropdown-menu {
	  top: 0;
	  left: 100%;
	  margin-left: .1rem;
	  margin-right: .1rem;
	}
	</style>
 
</head>
<body>
<?
/* Beispiel1 JSON */
// $menu ='[{"id":15,"title":"Menü1","customSelect":"1","__domenu_params":{}},{"id":11,"title":"Menü2","http":"","superselect":"2","customSelect":"1","children":[{"id":9,"title":"SubMenü2-1","http":"","superselect":"1","customSelect":"2","__domenu_params":{},"children":[{"id":10,"title":"SubMenü2-1-1","http":"","superselect":"1","customSelect":"select something...","__domenu_params":{}}]},{"id":14,"title":"SumMenü2-2","customSelect":"select something...","__domenu_params":{}}],"__domenu_params":{}},{"title":"Menü3","customSelect":"select something...","id":12,"__domenu_params":{}}]';
 
/* Beispiel2 JSON */
//$menu = '[{"id":15,"title":"Menü1","customSelect":"1","__domenu_params":{}},{"id":11,"title":"Menü2","http":"","superselect":"2","customSelect":"1","children":[{"id":9,"title":"SubMenü2-1","http":"","superselect":"1","customSelect":"2","__domenu_params":{},"children":[{"id":10,"title":"SubMenü2-1-1","http":"","superselect":"1","customSelect":"select something...","__domenu_params":{},"children":[{"id":16,"title":"Submenü2-1-1-1","customSelect":"select something...","__domenu_params":{}}]}]},{"id":14,"title":"SumMenü2-2","customSelect":"select something...","__domenu_params":{}}],"__domenu_params":{}},{"title":"Menü3","customSelect":"select something...","id":12,"__domenu_params":{}}]';
 
/* Beispiel3 JSON */
$menu = '[{"id":15,"title":"Menü1","http":"http://www.google.de","customSelect":"1","__domenu_params":{}},{"id":11,"title":"Menü2","superselect":"2","customSelect":"1","children":[{"id":9,"title":"SubMenü2-1","http":"","superselect":"1","customSelect":"2","__domenu_params":{},"children":[{"id":10,"title":"SubMenü2-1-1","http":"","superselect":"1","customSelect":"select something...","__domenu_params":{},"children":[{"id":16,"title":"Submenü2-1-1-1","customSelect":"select something...","__domenu_params":{}},{"id":19,"title":"Submenü2-1-1-2x","http":"http://www.google.de","customSelect":"select something...","__domenu_params":{}}]}		]},{"id":14,"title":"SumMenü2-2","customSelect":"select something...","__domenu_params":{},"children":[{"id":17,"title":"doMenu List Item. 1","customSelect":"select something...","__domenu_params":{}},{"id":18,"title":"doMenu List Item. 2","customSelect":"select something...","__domenu_params":{}}]}],"__domenu_params":{}},{"title":"Menü3","http":"http://www.test.de","customSelect":"select something...","id":12,"__domenu_params":{}}]';
$menu = json_decode($menu);		// Array
?>
 
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
	<div class="collapse navbar-collapse" id="navbarNavDropdown">
	<?
		echo '<ul class="navbar-nav">';
		foreach ($menu as $key => $hauptmenu)
		{
			if ( isset($hauptmenu->children ))
			{
				echo '<li class="nav-item dropdown">';
				echo '<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">'.$hauptmenu->title.'</a>				';
				echo '<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">				';
				foreach($hauptmenu->children as $subkey =>$submenu) {
					if( isset($submenu->children) )
					{
						echo '<li class="dropdown-submenu">';
						echo '<a class="dropdown-item dropdown-toggle" href="#">'.$submenu->title.'d</a>';
						echo '<ul class="dropdown-menu">';
						renderChildren($submenu->children);
						echo '</ul></li>';
					} else {
						echo '<li><a class="dropdown-item" href="#">'.$submenu->title.'</a></li>';
					}
				}
				echo '</ul></li>';
			} else {
				$link = ( isset($hauptmenu->http) ) ? $hauptmenu->http : "";
				echo '<li class="nav-item"><a class="nav-link" href="'.$link.'">'.$hauptmenu->title.'</a></li>';
			}
		}  
		echo '</ul>';
	?>
	</div>
</nav>
<h4 class="text-center"><br>funktionierendes Beispiel: recursives Menü mit Daten aus JSON Datei</h4>
 
 
<script>
// Treemenü Function für Bootstraß
$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
  if (!$(this).next().hasClass('show')) {
    $(this).parents('.dropdown-menu').first().find('.show').removeClass('show');
  }
  var $subMenu = $(this).next('.dropdown-menu');
  $subMenu.toggleClass('show');
 
 
  $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
    $('.dropdown-submenu .show').removeClass('show');
  });
  return false;
});
</script>
</body>
</html>
 
 
<?
// recursives Ausführen von Untermenüs
function renderChildren(array $children){
	foreach($children as $child){
		if ( isset($child->children) )
		{
			echo '<li class="dropdown-submenu">';
				echo '<a class="dropdown-item dropdown-toggle" href="#">'.$child->title.'d</a>';
				echo '<ul class="dropdown-menu">';
					renderChildren($child->children);
				echo "</ul>";
			echo "</li>";
		} else {
			$link = ( isset($child->http) ) ? $child->http : "";
			echo '<li><a class="dropdown-item" href="'.$link.'">'.$child->title.'</a></li>';
		}
	}
}