I have a navbar with the following layout.
<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>
I have created a php array and foreach statement to put on every page on the website. When on a specific page, that page in the menu has the following Nav Item. I alter the $page depending on what page and that changes the active class.
I have written a nested array that works with the navbar however, when the active page is a page from the SubNav, I want both the dropdown item eg / Where? AND the SubNav to have the active class.
I have the following, however when on the Africa page for example, the Where? item is active, but not the Africa menu item aswell. I would like both of the menu items to be active.
I currently have the following:
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>';
}
}
This outputs:
<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>
Can anyone alter my php so I can achieve what I would like? With my knowledge this is as far as I can take it :( Thanks ![What I would like the navbar to do on the output. BOTH the Where and the SubNav have the active class.][1]
Image is here: http://i.stack.imgur.com/BYkJi.png Both the Where and the subnav item are active and have the active classes.
Based your code set $page
to be "/where/Bangladesh" when the sub item Bangladesh should be active. Maybe create $page
from the REQUEST_URI. Now you could set the active classes by checking: starts $page
with '/where' and/or does $page
match the subitem in the end:
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>';
}
NOTE: To get the menu effects from your image you have to add the "nav-pills" to your menu, see also: http://twitter.github.io/bootstrap/components.html#navs
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.