我有一个导航栏,布局如下:
<ul>
<li>
<a href="#">Nav Item 1</a>
</li>
<li class="dropdown">
<a href="/where" class="dropdown-toggle disabled" data-toggle="dropdown">
Where? <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li class="nav-header"> SUBNAV HEADER </li>
<li class="divider"></li>
<li><a href="#">SubNav 1</a></li>
<li><a href="#">SubNav 2</a></li>
</ul>
</li>
<li>
<a href="#">Nav Item 2</a>
</li>
<li>
<a href="#">Nav Item 3</a>
</li>
我已经创建了一个php数组和foreach语句放在网站上的每个页面上。当在特定页面上时,菜单中的该页具有以下导航项。我根据页面更改$page,这就改变了活动类。
我已经写了一个嵌套的数组,与导航栏的工作,但是,当活动页面是从SubNav页面,我想这两个下拉项目eg/在哪里?并且子导航具有活动类。
我有以下内容,但是当在非洲页面上时,例如,Where?项是活动的,但非洲菜单项也不是。我希望这两个菜单项都是活动的。
我目前有以下文件:
echo '<ul class="nav pull-right">';
$nav_items = array('/'=>'Home', '/where'=>'Where?', '/appeals'=>'Current Appeals', '/news'=>'Latest News', '/events'=>'Events' );
$default_subnav = '<a href="/where" class="dropdown-toggle disabled" data-toggle = "dropdown">where?<b class="caret"></b></a>' . "n". '<ul class="dropdown-menu"><li class="nav-header"> SUBNAV HEADER </li><li class="divider"></li>';
$sub_nav = array( 'africa'=>'Africa', 'bangladesh'=>'Bangladesh', 'gaza'=>'Palestine/Gaza', 'kashmir'=>'Kashmir', 'pakistan'=>'Pakistan', 'uk'=>'United Kingdom' );
foreach ($nav_items as $nav_href=>$nav_title) {
if ($nav_href != '/where') {
if ($page == $nav_href) {
echo '<li class="active"><a href="'. $nav_href . '">' . $nav_title . '</a></li>' . "n";
} else {
echo '<li><a href="'. $nav_href . '">' . $nav_title . '</a></li>' . "n";
}
}
else {
if ($page == $nav_href) {
echo '<li class="active dropdown">' . $default_subnav . "n";
} else {
echo '<li class = "dropdown">' . $default_subnav . "n";
}
foreach ($sub_nav as $sub_item=>$value) {
echo '<li><a href="../where/' . $sub_item . '">' . $value . '</a></li>' . "n";
}
echo '</ul></li>';
}
}
这个输出: <ul class="nav pull-right"><li class="active"><a href="/">Home</a></li>
<li class = "dropdown"><a href="/where" class="dropdown-toggle disabled" data-toggle = "dropdown">where?<b class="caret"></b></a>
<ul class="dropdown-menu"><li class="nav-header"> SUBNAV HEADER </li><li class="divider"></li>
<li><a href="../where/africa">Africa</a></li>
<li><a href="../where/bangladesh">Bangladesh</a></li>
<li><a href="../where/gaza">Palestine/Gaza</a></li>
<li><a href="../where/kashmir">Kashmir</a></li>
<li><a href="../where/pakistan">Pakistan</a></li>
<li><a href="../where/uk">United Kingdom</a></li>
</ul></li><li><a href="/appeals">Current Appeals</a></li>
<li><a href="/news">Latest News</a></li>
<li><a href="/events">Events</a></li></ul>
任何人可以改变我的php,所以我可以实现我想要什么?就我所知,这是我所能做到的。谢谢我希望导航栏在输出上做什么。Where和SubNav都有活动类[1]
图片在这里:https://i.stack.imgur.com/BYkJi.pngWhere和subnav项都是活动的,并且具有活动的类。
基于您的代码设置$page
为b.e。"/where/Bangladesh",分项孟加拉国应是有效的。也许从REQUEST_URI创建$page
。现在您可以通过检查来设置活动类:用'/where'启动$page
和/或$page
是否匹配最后的子项:
else {
if ($page == $nav_href) {
echo '<li class="active dropdown">' . $default_subnav . "n";
} else {
echo '<li class = "dropdown'.(preg_match('/^/where/',$page)?' active':'').'">' . $default_subnav . "n";
}
foreach ($sub_nav as $sub_item=>$value) {
echo '<li class="'.(preg_match('//'.str_replace('/','/',$value).'$/',$page)?'active':'').'"><a href="../where/' . $sub_item . '">' . $value . '</a></li>' . "n";
}
echo '</ul></li>';
}
注意:要从您的图像中获得菜单效果,您必须添加"导航药丸"到您的菜单,参见:http://twitter.github.io/bootstrap/components.html#navs