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>';
		}
	}
}
Diese Website verwendet Cookies. Durch die Nutzung der Website stimmen Sie dem Speichern von Cookies auf Ihrem Computer zu. Außerdem bestätigen Sie, dass Sie unsere Datenschutzbestimmungen gelesen und verstanden haben. Wenn Sie nicht einverstanden sind, verlassen Sie die Website.Weitere Information
programmieren:php:snippets (137 views) · Zuletzt geändert: 15/05/2020 14:39 von conny