我在php http://www.bootply.com/nZaxpxfiXz中创建动态菜单,就像这个例子一样,我得到了父菜单和子菜单但是多子级别不是
工作,你可以从这张图片看到
这是我的代码
<?php
function curPageURL() {
$pageURL = '';
if ($_SERVER["SERVER_PORT"] != "80") {
$pageURL .= $_SERVER["REQUEST_URI"];
} else {
$pageURL .= $_SERVER["REQUEST_URI"];
}
return $pageURL;
}
function ordered_list($array,$parent_id = 0)
{
$temp_array = array();
foreach($array as $element)
{
if ($element['parent_id'] == $parent_id)
{
$element['subs'] = $ordered_list($array, $element['id']);
$temp_array[] = $element;
}
}
return $temp_array;
}
function bootstrap_menu($array,$parent_id = 0,$parents = array())
{
if($parent_id==0)
{
foreach ($array as $element) {
if (($element['parent_id'] != 0) && !in_array($element['parent_id'],$parents)) {
$parents[] = $element['parent_id'];
}
}
}
$menu_html = '';
foreach($array as $element)
{
if($element['parent_id']==$parent_id)
{
if(in_array($element['id'],$parents))
{
$menu_html .= '<li class="dropdown">';
$menu_html .= '<a href="'.$element['url'].'" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">'.$element['name'].' <span class="caret"></span></a>';
}
else {
$pagenameurl=$element['url'];
$pagename= curPageURL();
$host =$_SERVER['REQUEST_URI'];
$pages = 'boot1.php';
if($host==$pagenameurl){ $act="active";} else { $act=""; }
$menu_html .= '<li class='.$act.'>';
$menu_html .= '<a href="' . $element['url'] . '">' . $element['name'] . '</a>';
}
if(in_array($element['id'],$parents))
{
$menu_html .= '<ul class="dropdown-menu" role="menu">';
$menu_html .= bootstrap_menu($array, $element['id'], $parents);
$menu_html .= '</ul>';
}
$menu_html .= '</li>';
}
}
return $menu_html;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
.marginBottom-0 {margin-bottom:0;}
.dropdown-submenu{position:relative;}
.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
.dropdown-submenu:hover>a:after{border-left-color:#555;}
.dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}
</style>
<style>
.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:focus, .navbar-inverse .navbar-nav>.open>a:hover
{
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top marginBottom-0" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" target="_blank">NewWindow</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<?php
$menu_items = array(
array(
"id" => "1",
"url" => '/boot1.php',
"parent_id" => "0",
"name" => 'Accueil',
"order" => "0",
),
array(
"id" => "32",
"url" => '#',
"parent_id" =>"0",
"name" => 'Nos formations',
"order" => "10",
"sub_level"=>"0"
),
array(
"id" => "33",
"url" => 'http://www.mixcms.dev/bac-professionnel-gestion-adnimistration.html',
"parent_id" => "32",
"name" => 'Bac professionnel : GESTION ADNIMISTRATION',
"order" => "20",
),
array(
"id" => 34,
"url" => 'http://www.mixcms.dev/bac-professionnel-arcu.html',
"parent_id" => 32,
"name" => 'Bac professionnel : ARCU',
"order" => "30",
"sub_level"=>"0"
),
array(
"id" => "35",
"url" => 'http://www.mixcms.dev/bac-professionnel-commerce.html',
"parent_id" => "32",
"name" => 'Bac professionnel : COMMERCE',
"order" => "40",
),
array(
"id" => "36",
"url" => 'http://www.mixcms.dev/les-marques-partenaires.html',
"parent_id" => 32,
"name" => 'Bac professionnel : VENTE',
"order" => 50,
"sub_level"=>"0"
),
array(
"id" => "54",
"url" => 'http://www.mixcms.dev/bac-professionnel-option-comptabilite-et-finance-d-rsquo-entreprise.html',
"parent_id" => "32",
"name" => 'Bac professionnel : OPTION COMPTABILITÉ ET FINANCE D’ENTREPRISE',
"order" => "60",
),
array(
"id" => "55",
"url" => 'http://www.mixcms.dev/bac-technologique-communication-et-gestion-des-ressources-humaines.html',
"parent_id" => "32",
"name" => 'Bac technologique : COMMUNICATION ET GESTION DES RESSOURCES HUMAINES',
"order" => "70",
"sub_level"=>"0"
),
array(
"id" => "39",
"url" => 'http://www.mixcms.dev/presentation.html',
"parent_id" => 0,
"name" => 'Présentation',
"order" => 80,
),
array(
"id" => 40,
"url" => 'http://www.mixcms.dev/historique.html',
"parent_id" => "39",
"name" => 'Historique',
"order" => "90",
),
array(
"id" => "41",
"url" => 'http://www.mixcms.dev/nos-atouts.html',
"parent_id" => "39",
"name" => 'Nos atouts',
"order" => "100",
"sub_level"=>"0"
),
array(
"id" => "56",
"url" => 'http://www.mixcms.dev/notre-projet-educatif.html',
"parent_id" => "39",
"name" => 'Notre Projet Éducatif',
"order" => "110",
),
array(
"id" => "38",
"url" => 'http://www.mixcms.dev/inscriptions.html',
"parent_id" => "0",
"name" => 'Inscriptions',
"order" => "120",
),
array(
"id" => "57",
"url" => 'http://www.mixcms.dev/reglement-scolaire.html',
"parent_id" => "38",
"name" => 'Règlement scolaire',
"order" => "130",
),
array(
"id" => "58",
"url" => 'http://www.mixcms.dev/reglement-financier.html',
"parent_id" => "38",
"name" => 'Règlement financier',
"order" => "140",
),
array(
"id" => "37",
"url" => 'http://www.mixcms.dev/actualites.html',
"parent_id" => "0",
"name" => 'Actualités',
"order" => "150",
),
array(
"id" => "42",
"url" => '/boot2.php',
"parent_id" => "0",
"name" => 'Contact',
"order" => "160",
"sub_level"=>"0"
),
array(
"id" => "59",
"url" => 'http://www.mixcms.dev/acces-pronote.html',
"parent_id" => "0",
"name" => 'Accès ProNote',
"order" => "170",
)
);
$top_menu = bootstrap_menu($menu_items);
echo $top_menu;
?>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<div class="jumbotron">
<h1 class="page-header">Bootstrap 3.0.3<br>
<small>Navbar - Click Dropdown - Sub - Sub - Sub - Sub ...</small></h1>
</div>
<div class="container">
<div class="row">
<h1>You Like It ?</h1>
<br>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function($){
var url = window.location.href;
$('.nav li a[href="'+url+'"]').addClass('active');
});
</script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script>
$(function(){
var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/,'') + "$"); // create regexp to match current url pathname and remove trailing slash if present as it could collide with the link in navigation in case trailing slash wasn't present there
// now grab every link from the navigation
$('.nav li a').each(function(){
// and test its normalized href against the url pathname regexp
if(urlRegExp.test(this.href.replace(/\/$/,''))){
$(this).addClass('active');
}
});
});
</script>
</body>
</html>
此代码中的 sublevel
参数用于多级