Menü mit Bootstrap und JSON [HennWeb]

programmieren:php:snippets:menu1

Diese Seite ist nicht editierbar. Sie können den Quelltext sehen, jedoch nicht verändern. Kontaktieren Sie den Administrator, wenn Sie glauben, dass hier ein Fehler vorliegt.

===== 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:\\
\\
<code css| JSON>
array
(
    [0] => stdClass Object
        (
            [id] => 15
            [title] => Menü1
            [http] => http://www.google.de
            [customSelect] => 1
            [__domenu_params] => stdClass Object
                (
                )

        )

    [1] => stdClass Object
        (
            [id] => 11
            [title] => Menü2
            [superselect] => 2
            [customSelect] => 1
            [children] => Array
                (
                    [0] => stdClass Object
                        (
                            [id] => 9
                            [title] => SubMenü2-1
                            [http] => 
                            [superselect] => 1
                            [customSelect] => 2
                            [__domenu_params] => stdClass Object
                                (
                                )

                            [children] => Array
                                (
                                    [0] => stdClass Object
                                        (
                                            [id] => 10
                                            [title] => SubMenü2-1-1
                                            [http] => 
                                            [superselect] => 1
                                            [customSelect] => select something...
                                            [__domenu_params] => stdClass Object
                                                (
                                                )

                                            [children] => Array
                                                (
                                                    [0] => stdClass Object
                                                        (
                                                            [id] => 16
                                                            [title] => Submenü2-1-1-1
                                                            [customSelect] => select something...
                                                            [__domenu_params] => stdClass Object
                                                                (
                                                                )

                                                        )

                                                    [1] => stdClass Object
                                                        (
                                                            [id] => 19
                                                            [title] => Submenü2-1-1-2x
                                                            [http] => http://www.google.de
                                                            [customSelect] => select something...
                                                            [__domenu_params] => stdClass Object
                                                                (
                                                                )

                                                        )

                                                )

                                        )

                                )

                        )

                    [1] => stdClass Object
                        (
                            [id] => 14
                            [title] => SumMenü2-2
                            [customSelect] => select something...
                            [__domenu_params] => stdClass Object
                                (
                                )

                            [children] => Array
                                (
                                    [0] => stdClass Object
                                        (
                                            [id] => 17
                                            [title] => doMenu List Item. 1
                                            [customSelect] => select something...
                                            [__domenu_params] => stdClass Object
                                                (
                                                )

                                        )

                                    [1] => stdClass Object
                                        (
                                            [id] => 18
                                            [title] => doMenu List Item. 2
                                            [customSelect] => select something...
                                            [__domenu_params] => stdClass Object
                                                (
                                                )

                                        )

                                )

                        )

                )

            [__domenu_params] => stdClass Object
                (
                )

        )

    [2] => stdClass Object
        (
            [title] => Menü3
            [http] => http://www.test.de
            [customSelect] => select something...
            [id] => 12
            [__domenu_params] => stdClass Object
                (
                )

        )

)
</code>


Und hier das Beispiel für das Menü:
<code php| 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>';
		}
	}
}
</code>

programmieren/php/snippets/menu1.txt · Zuletzt geändert: 15/05/2020 13:39 (Externe Bearbeitung)