Benutzer-Werkzeuge

Webseiten-Werkzeuge


programmieren:php:snippets:menu1

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
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
                (
                )
 
        )
 
)

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>';
		}
	}
}
Cookies helfen bei der Bereitstellung von Inhalten. Diese Website verwendet Cookies. Mit der Nutzung der Website erklären Sie sich damit einverstanden, dass Cookies auf Ihrem Computer gespeichert werden. Außerdem bestätigen Sie, dass Sie unsere Datenschutzerklärung gelesen und verstanden haben. Wenn Sie nicht einverstanden sind, verlassen Sie die Website. Weitere Information
programmieren:php:snippets (57 views) · Zuletzt geändert: 15/05/2020 14:39 von conny