I'm having a bit of trouble trying to get my head around some php code.
To explain:
I have a navbar made from bootstrap.
I want this nav bar to change it's active class depending on the page.
I have a subnav within the navbar with an li class of 'dropdown'.
When this page is active this li class wants to change to 'dropdown active'
When other pages are active, they just want a simple class of 'active'.
My code is as follows:
PHP:
$pageLoc = 'where';
$nav_items = array('index'=>'Home', 'where'=>'Where?', 'appeals'=>'Current Appeals', 'news'=>'Latest News', 'events'=>'Events', 'dontate'=>'Dontate', );
$nav_sub = array('africa'=>'Africa', 'bangladesh'=>'Bangladesh', 'gaza'=>'Palestine/Gaza', 'kashmir'=>'Kashmir', 'pakistan'=>'Pakistan', 'uk'=>'United Kingdom' );
foreach ($nav_items as $nav_href=>$nav_title) {
if ($pageLoc == $nav_href) && ($pageLoc == 'where') {
echo '<li class="dropdown active">' . $nav_title . '</li>';
}
elseif ($pageHref == $nav_href) && ($pageLoc == 'no') {
echo '<li class="dropdown">' . $nav_title . '</li>';
}
elseif ($pageHref == $nav_href) {
echo '<li class="active">' . $nav_title . '</li>';
}
else {
echo '<li>' . $nav_title . '</li>';
}
}
Navbar:
<ul class="nav pull-right">
<li class="pull-right">
<a class="btn-danger" href="donate"><i class="icon-medkit"> DONATE!</i></a>
</li>
</ul>
<ul class="nav pull-right">
<li class="">
Home
</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">Where we operate</li>
<li class="divider"></li>
<li>Africa</li>
<li>Bangladesh</li>
<li>Palestine/Gaza</li>
<li>Kashmir</li>
<li>Pakistan</li>
</ul>
</li>
<li class="">
Current Appeals
</li>
<li class="">
Latest News
</li>
<li class="">
Events
</li>
</ul>
I am aware that this php is generating a syntax error. I am no pro unfortunately! :( This is
what I originally had:
foreach ($nav_items as $nav_href=>$nav_title) {
if ($pageHref == $nav_href) {
echo '<li class="active">' . $nav_title . '</li>';
}
else {
echo '<li>' . $nav_title . '</li>';
}
}
You've written:
if ($pageLoc == $nav_href) && ($pageLoc == 'where')
It should say:
if ($pageLoc == $nav_href && $pageLoc == 'where')
On a more general note, the absence of detailed debugging information is a pain, but there are workarounds. For example, if you delete half of the code and try to run it again*, does it still give a syntax error? If so, delete a bit more and see what happens; if not, undelete some and see if it works. Keep trying this and narrowing it down until you find where the error is.
*(obviously, don't delete in such a way that you create syntax errors; for example, if you delete the end of an if clause including the }, you'll get non-matching brackets.)
Related
I have a php/mysql driven menu. I am trying to add an active class to the menu item whenever the URI reflects that menu item (basically, when I am on that page) but every example I find is with a menu that is not populated through an array or repeater like mine.
How can manipulate the active class you see below so that it shows only when I am on that page?
Here is my menu
<?php
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
if($row['id'] == 2){
// below is the active class that is now being populated accross all items equally
echo '<li class="nav-item dropdown active">';
echo '<a href="#" class="nav-link dropdown-toggle animated fadeIn animation-delay-7" data-toggle="dropdown" data-hover="dropdown" role="button" aria-haspopup="true" aria-expanded="false" data-name="services">';
echo $row["pagename"];
echo '<i class="zmdi zmdi-chevron-down"></i>';
echo '</a>';
// create a new list
echo '<ul class="dropdown-menu">';
// loop second/submenu query results
while($sub_row = $result2->fetch_assoc()) {
echo '<li>';
echo '' . $sub_row["pagename"] . '';
echo '</li>';
}
echo "</ul>";
echo '</li>';
} else { // for all other menu links
echo '<li class="nav-item dropdown active">';
echo '' . $row["pagename"] . '';
echo '</li>';
}
}
} else {
echo "0 results";
}
?>
The screenshot below shows the result after it renders. Notice the active class highlighted in yellow, it is added to every item in my main menu (the way I have it coded, which it's wrong of course). The green is the $sub_row["link"] (to answer Mark's question below
Notice, the active class is only needed to be added programmatically on the main menu. (the else portion of my code).
The screenshot below shows how the active class affects the menu item if the user was in the www.domain.com/how-it-works.php page. The active class contians the styles to make the menu item appear that way.
Thanks in advance
Hard to test with not having the DB outputs to match against mate but try this, basically you want an if statement to get the current page URL and match it against the url you get back from the DB.
<?php
if ($result->num_rows > 0) {
$pageURL = str_replace('/', '', $_SERVER['REQUEST_URI']);
$homeURL = $_SERVER['REQUEST_URI'];
// output data of each row
while($row = $result->fetch_assoc()) {
if($row['id'] == 2){ ?>
<li class="nav-item dropdown">
<a href="" class="nav-link dropdown-toggle animated fadeIn animation-delay-7" data-toggle="dropdown" data-hover="dropdown" role="button" aria-haspopup="true" aria-expanded="false" data-name="services">
<?php echo $row["pagename"];?>
<i class="zmdi zmdi-chevron-down"></i>
</a>
<ul class="dropdown-menu">
<?php while($sub_row = $result2->fetch_assoc()) {?>
<li>
<a href="<?php echo $sub_row["link"]; ?>" class="dropdown-item">
<?php echo $sub_row["pagename"] ?>
</a>
</li>
<?php } ?>
</ul>
</li>
<?php
} else if($row['id'] == 1){ ?>
<li class="nav-item dropdown <?php echo ($homeURL == $row["link"])? 'active' : '';?>">
<a href="<?php echo $row["link"]; ?>" class="nav-link dropdown-toggle animated fadeIn animation-delay-7">
<?php echo $row["pagename"]; ?>
</a>
</li>
<?php
} else { ?>
<li class="nav-item dropdown <?php echo ($pageURL == $row["link"])? 'active' : '';?>">
<a href="<?php echo $row["link"]; ?>" class="nav-link dropdown-toggle animated fadeIn animation-delay-7">
<?php echo $row["pagename"]; ?>
</a>
</li>
<?php }
}
} else {
echo "0 results";
}
?>
Edit:
Bit that gets the current page url is:
$pageURL = end(explode('/', $_SERVER['REQUEST_URI']));
Bit that does the check is (this is just a shorthand if statement:
<?php echo ($pageURL == $row["link"])? 'active' : '';?>
I'd like to add condition to my code so that after click on label it link me to other page. Now this code link to other article on the website. So I guess what should I add to get from my label to other page.
Thank you for answers!
My code is below:
<ul class="nav nav-tabs aboutUsTabs nav-justified" role="tablist">
<?php foreach ($this->items as $key=>$item ){
if($item['children']){ ?>
<li role="presentation" class="<?php if($item['menu']->id==$this->pageId || $item['menu']->id==$this->parentId){ echo 'active'; } ?>"><?php echo $item['menu']->title;?></li>
<?php }else{ ?>
<li role="presentation" class="<?php if($item['menu']->id==$this->pageId || $item['menu']->id==$this->parentId){ echo 'active'; } ?>"><?php echo $item['menu']->title;?></li>
<?php } ?>
<?php } ?>
</ul>
All this start/stop of PHP code hurts my eyes! Anyways, linking to other pages is done with tags. Not quite sure I understand your question, but you could (if you mean labels for form elements) do something like this;
<label for=""> Something Meaningful </label>
I'm sorry, but I took the liberty to clean up your code a little. Hopefully this will make it more readable;
<ul class="nav nav-tabs aboutUsTabs nav-justified" role="tablist">
<?php
foreach ($this->items as $key=>$item ){
$active = NULL;
if($item['menu']->id==$this->pageId || $item['menu']->id==$this->parentId){
$active = 'active';
}
$menu = NULL;
if($item['menu']->id==$this->pageId || $item['menu']->id==$this->parentId){
$menu = 'active';
}
if($item['children']){
echo'<li role="presentation" class="'.$active.'">
'.$item['menu']->title.'
</li>';
}else{
echo'<li role="presentation" class="'.$menu.'">
'.$item['menu']->title.'
</li>';
}
}
?>
</ul>
For your comment question, if you know what item needs a different value, it could be the title f.ex. then you can check against that value and change the output of your element. Maybe something like;
if($item['children']){
if($item['title'] == 'Unique Identifier for your element') {
// In here you could manipulate the output of that one item you want to exclude/change
} else {
// Your normal output
echo'<li role="presentation" class="'.$active.'">
'.$item['menu']->title.'
</li>';
}else{ ... }
And even better would be to perform the check beforehand, so maybe something like;
$link = '#about-us-page-'.$item['menu']->id;
if($item['title'] == "That identifier") {
$link = 'somethingElse';
}
and then change the value of your href tag to;
'.$item['menu']->title.'
I have coded a sidebar navigation and added loop in <li> for brand class. which has extracted from database!
Below is the code of Sidebar Navigation.
Problem is <li class='active'> has enabled with all li. i only wanted to enable to active with opened page of site. How to break down li using loop?
<div class="col-sm-2">
<nav class="nav-sidebar">
<ul class="nav">
<li>Home</li>
<?php
try {
$brands = Brand::get_brands();
foreach ($brands as $b) {
echo("<li class='active'><a href='" . BASE_URL . "products/products.php?brandID=$b->brandID'>$b->brand_name</a></li>");
}
} catch (Exception $ex) {
echo("<li>" . $ex->getMessage() . "</li>");
}
?>
<li class="nav-divider"></li>
<li><i class="glyphicon glyphicon-off"></i> Sign in</li>
</ul>
</nav>
</div>
Image of sidebar screenshot: Sidebar Navigation Screenshot
Based on the links you make, I assume that your URL looks something like yoursite.com/products/products.php?brandID=150. You can use the brandID from the URL by calling $_GET['brandID'].
So we check if it is set and compare the value to the brandID inside the loop.
<div class="col-sm-2">
<nav class="nav-sidebar">
<ul class="nav">
<li>Home</li>
<?php
try {
$brands = Brand::get_brands();
foreach ($brands as $b) {
// adding this line:
$class = ( isset($_GET['brandID']) and $_GET['brandID'] == $b->brandID) ? ' class="active"' : '';
echo("<li".$class."><a href='" . BASE_URL . "products/products.php?brandID=$b->brandID'>$b->brand_name</a></li>");
}
} catch (Exception $ex) {
echo("<li>" . $ex->getMessage() . "</li>");
}
?>
<li class="nav-divider"></li>
<li><i class="glyphicon glyphicon-off"></i> Sign in</li>
</ul>
</nav>
</div>
I have issues displaying a dropdown menu generated by a recursive function using a database. The parents are shown correctly below the items, but not as nav items, but just as a basic list.
Here's the image with how it actually looks:
And here's how it SHOULD look:
Some relevant code:
Model:
<?php
class New_menu_model extends CI_Model {
function get_domains() {
$result = $this->db->get ( 'domenii' );
return $result->result_array();
}
}
function recursive($parent, $result) {
$has_children = false;
foreach ( $result as $key => $value ) {
if ($value ['parent'] == $parent) {
if ($has_children === false && $parent) {
$has_children = true;
echo '<ul>' . "\n" ;
}
echo '<li>' . "\n";
echo '' . $value ['nume_domeniu'] . '' . " \n";
echo "\n";
recursive ( $key + 1, $result );
echo "</li>\n";
}
}
if ($has_children === true && $parent)
echo "</ul>\n";
}
?>
View:
<li class="dropdown"><?php echo recursive(0, $menu); ?></li>
Thanks!
It should be something like:
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<?php echo recursive(0, $menu); ?>
</ul>
</li>
...and check echo '<ul>' . "\n" ; , it could be echo '<ul class="dropdown-menu">' . "\n" ; so the code should be:
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<?php echo recursive(0, $menu); ?>
</li>
I created a custom menu called "sub-top-nav" and now I'd like to override the html output. In particular I would like to add an unique class to each item like.
This is how it looks atm:
<div class="clear-block block block-menu" id="block-menu-menu-sub-top-nav">
<div class="content">
<ul class="menu">
<li class="leaf first"><a title="Test 1" href="/test1">Test 1</a></li>
<li class="leaf"><a title="Test 2" href="/test2">Test 2</a></li>
<li class="leaf active-trail"><a class="active" title="Test 3" href="/test3">Test 3</a></li>
<li class="leaf last"><a title="Test 4" href="/test4">Test 4</a></li>
</ul>
</div>
</div>
And I'd like to change it into:
<div class="clear-block block block-menu" id="block-menu-menu-sub-top-nav">
<div class="content">
<ul class="menu">
<li class="leaf test1 first"><a title="Test 1" href="/test1">Test 1</a></li>
<li class="leaf test2"><a title="Test 2" href="/test2">Test 2</a></li>
<li class="leaf test3 active-trail"><a class="active" title="Test 3" href="/test3">Test 3</a></li>
<li class="leaf test4 last"><a title="Test 4" href="/test4">Test 4</a></li>
</ul>
</div>
</div>
This would give me more styling power.
Any idea how that works?
Thanks in advance!
Drupal 7 uses theme_menu_link instead of theme_menu_item
<?php
function theme_menu_link(array $variables) {
$element = $variables['element'];
$sub_menu = '';
if ($element['#below']) {
$sub_menu = drupal_render($element['#below']);
}
$output = l($element['#title'], $element['#href'], $element['#localized_options']);
return '<li' . drupal_attributes($element['#attributes']) . '>' . $output . $sub_menu . "</li>\n";
}
?>
I got it to work now. This piece of code might help someone else as well!
It goes into yourtheme/template.php
function phptemplate_menu_item($link, $has_children, $menu = '', $in_active_trail = FALSE, $extra_class = NULL) {
$class = ($menu ? 'expanded' : ($has_children ? 'collapsed' : 'leaf'));
if (!empty($extra_class))
$class .= ' '. $extra_class;
if ($in_active_trail)
$class .= ' active-trail';
$class .= ' ' . preg_replace('/[^a-zA-Z0-9]/', '', strtolower(strip_tags($link)));
return '<li class="'. $class .'">'. $link . $menu ."</li>\n";
}
After looking through the API I finally found an easy solution to tag the root menu with the same class (this is useful to style only the top level menus uniquely, while maintaining them dynamically friendly). Simply use the plid instead of mlid. I noticed the plid is always 0 for top level menus.
function theme_menu_link(array $variables) {
$element = $variables['element'];
$sub_menu = '';
$element['#attributes']['class'][] = 'menu-' . $element['#original_link']['plid'];
if ($element['#below']) {
$sub_menu = drupal_render($element['#below']);
}
$output = l($element['#title'], $element['#href'], $element['#localized_options']);
$count = 1;
return '<li' . drupal_attributes($element['#attributes']) . '>' . $output . $sub_menu . "</li>\n";
}
You can use the theme_menu_item function in your theme's template.php to do pretty much whatever you want to those menu items, including adding classes, ID's, etc.