Hi
I am going to highlight a menu item according to the page that is reading currently, when user click on different page through the menu, that menu item will be highlighted, example is http://templates.joomlart.com/ja_pyrite/index.php?option=com_content&view=article&id=44&Itemid=53.
If I use PHP/jQuery to check the url and highlight the menu, it will be good if the url look like "http://example.com/contact", but the example above is bad.
If I don't going to check the url and highlight the menu item, could someone give me a idea/method that can be done with the same effect?
Thank you
I found this on 960 Development, been googling for a while for this, so happy when I finally found it!
<ul class="sub-nav" >
<?php
$full_name = $_SERVER['PHP_SELF'];
$name_array = explode('/',$full_name);
$count = count($name_array);
$page_name = $name_array[$count-1];
?>
<li><a class="<?php echo ($page_name=='where-to-buy.php')?'active':'';?>" href="where-to-buy.php">WHERE TO BUY</a></li>
<li><a class="<?php echo ($page_name=='about.php')?'active':'';?>" href="about.php">ABOUT US</a></li>
<li><a class="<?php echo ($page_name=='contact.php')?'active':'';?>" href="contact.php">CONTACT US</a></li>
It is working fully for me, get the pages I need to be "active" to be active and dosent active any of thoes who got the class when I'm in another page!
Take a look at it!
Edit:
Even if you got a (in this example) contact.php?person=John, it will "active" the contact.php link!
do something like this
<div id="nav_menu">
<?php
$currentFile = $_SERVER['REQUEST_URI'];
$pages = array(
array("file" => "/index.php", "title" => "Home"),
array("file" => "/about.php", "title" => "About Us"),
array("file" => "/schedule.php", "title" => "Schedule")
);
$menuOutput = "<ul>";
foreach ($pages as $page) {
$activeAppend = ($page["file"] == $currentFile) ? " id='active' " : "class='nav_button'";
$currentAppend = ($page["file"] == $currentFile) ? " id='current' " : "class='nav_button'";
$menuOutput .= "<li " . $currentAppend . ">"
. "<a href='" . $page["file"] . "' id='".$page["id"]."'>" . $page["title"] ."</a>"
. "</li>";
}
$menuOutput .= "</ul>";
echo $menuOutput;
?>
</div>
i hope you get the idea, i had this on stackoverflow a while ago but i forgot what was the question
edit:
here i finnally found the original question
In the HTML code you use to generate your navigation, add some PHP logic that will add a selected class to the button of the page that you are currently on. Then just add some CSS for the selected class.
Can you do something like this? It should select any link that points at the current page - so you can apply whatever you like to highlight it.
$('a[href="'+window.location+'"]').addClass('menu-highlight');
A good technique is to add a specific class or id attribute to body element and then style it in CSS. It requires minimum of server side programming and keeps all the presentation logic in CSS as it should be done.
<style>
.contact #contact { background:#000; }
...
</style>
<body class="contact">
<ul>
<li id="homepage">Homepage</li>
...
<li id="contact">Contact</li>
</ul>
...
Related
this is my second question here, first one was resolved quite quickly and I appreciate any help I get. Here's the thing:
I have a folder views in which I have a folder named _global in which I have my beforeContent.php and afterContent.php those are my header and footer of actual Web pages. The main content in my pages is set in other view folders and I have no problem there.
I have this script in my beforeContent.php (this one shows my navbar):
<?php if (Session::exists('user_id')): ?>
<?php include 'app/views/_global/menu-session.php'; ?>
<?php else: ?>
<?php include 'app/views/_global/menu-no-session.php'; ?>
<?php endif; ?>
basically, if a user is logged in, it will show menu-session.php, if there's no user logged in, it will show menu-no-session.php.
my menu-session has this in it:
<ul>
<li><a <?php if ($FoundRoute['Controller'] == 'Main') echo
'class="active";'?> href="<?php echo Configuration::BASE_URL; ?>">Home</a>
</li>
<li><a <?php if ($FoundRoute['Controller'] == 'Overview') echo
'class="active";'?> href="<?php echo Configuration::BASE_URL; ?
>overview">Overview</a></li>
</ul>
it has more tabs, but you get the point.
I had to use this function that chooses the controller that will decide if the page is active or not. basically: If i'm on a page Overview, the script asks if the active Controller is named 'Overview' and if it is, it will select the tab as class="active".
However, this is wrong: my teacher said I can't have scripts in my view files (it's not wrong, it's just bad practice) and I need another method of doing this:
So, I created a method class Misc.php with a function Misc::url:
public static function url($link, $text){
echo '<a href="' . Configuration::BASE_URL . $link . '">' . $text .
'</a>';
}
this way my menu-session can just be:
<ul>
<li>Misc::url('', 'Home')</li>
<li>Misc::url('overview', 'Overview')</li>
</ul>
Now: I need a correct function in Misc.php where I have the >>> $FoundRoute['Controller'] <<< if statement implanted, something like:
Misc::urlWithActive($link, $text){
if ($foundRoute['Controller] = *thiscontroller*) {
echo '<a href="' . Configuration::BASE_URL . $link . '">' . $text .
'</a>';
}
I actually don't know how to write that.
I Really hope you guys understand what I need to do here and help me.
I saw a few tutorial about this problem but none of them satisfied me. I want to highlight the single element of my list which matches the page that I'm browsing. I created the code with php, is a wordpress based website, and the code actually works because when I echo the uri which I'm on it will display the right uri, but the if statement I created to add a class when I'm on the website won't output anything.. and I don't understand why.. anyway.. here's the code:
header.php
<ul class="nav nav-pills sliding" id="Jcollapse">
<li class="<?php if ($current == "/why-chickapea/"){ echo "current";}?>"><span>Why Chickapea?</span></li>
<li class="<?php if ($current == "/our-pasta/"){ echo "current";}?>"><span>Our story</span></li>
<li class="<?php if ($current == "/shop-chickapea/"){ echo "current";}?>"><span>Shop</span></li>
<li class="<?php if ($current == "/recipes/"){ echo "current";}?>"><span>Recipes</span></li>
<li class="<?php if ($current == "/blog/"){ echo "current";}?>"><span>Blog</span></li>
</ul>
In each page I added a php snippet:
<?php $current = $_SERVER["REQUEST_URI"]; ?>
If I echo the var $current I will obtain the right url in this format: /pagename/
At the end I style the class current with a yellow color
.current {
color:yellow;
}
.current a {
color:yellow;
}
Does anyone know where my mistake is?
this is the page website: choosechickapea.com
As you can see the class that my code will generate is empty, but if I echo each value the uri I will obtain is the right one
The simplest explanation would be, that you print the header before $current is set.
The second simplest explanation is different scopes, meaning either you set $current in a non-global scope or you read it in a non-global scope, and those two (whatever they are) are different. Since someone said wordpress, I guess there is some encapsulation into functions (thus changing the scope). Using the global keyword may be a solution, but a dirty one. But since you're already avoiding wordpress functions ...
The actual code is:
Before declaring in the header the if statement, SET the value of the variable. If you'll declare in the body, even before loading the header with a, for example require once or in wordpress:
<?php get_header(); ?>
It won't work, the variable has to be set in the header like this:
<?php $current = $_SERVER["REQUEST_URI"]; ?>
<header class="navbar-fixed-top">
<ul class="nav nav-pills sliding">
<li class="<?php if ($current == "/your-url/"){ echo "current";}?>"><span>your url</span></li>
<li class="<?php if ($current == "/other-url/"){ echo "current";}?>"><span>/other url/</span></li>
</ul>
</header>
I am using a bootstrap pagination menu on my website to navigate from one page to another page.
I copied the pagination menu from :
http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_pagination_active&stacked=h
and added this to all pages of my website .
It's works fine and I can set the Active Status using:
<li class="active">
1</li>
according to the page link where the code is.
For some reasons ,I want to have only one menu file and include it to all pages .
Is there a way to automatically add ".active" class to the links in included menu?
menu.php
<ul class="pagination">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
Please help!
You can do it depending on your setup. In javascript, using jQuery for example:
var currentPage = 2; //say the page is defined like this
$('.pagination li').eq((currentPage-1)).addClass('active');
If you generating pages server side, for example in PHP
$currentPage = 2;
$output = '<ul class="pagination">';
//iterating pages
if($pageNum == $currentPage){
$output .= <li><a class="active" href="pages/'+$pageNum+'.php">'+$pageNum+'</a></li>
} else {
$output .= '<li>'+$pageNum+'</li>';
}
$output .= '</ul>'
echo $output;
What i'm trying to do is quite simple as concept, but i'm not that good with php and the joomla framework.
Currently the home menu-item is generated like this:
<li class="item-101 current active">
<a class="hide-text" href="#some-link">Home</a>
</li>
What i'd like to achieve is to insert an <i> element inside only the home menu-item, something like this:
<li class="item-101 current active">
<a class="hide-text" href="#some-link"><i class="icon-home"></i>Home</a>
</li>
How can i achieve this? I'm using Joomla! 2.5 atm
I guess it's possible do something like "if this menu-item is the home link then add this code inside the <a> tags" but i really don't know how to do it, my php is not strong enough :P
Note: i'm doing this to achieve a simple home-icon instead of the litteral home menu-item.
As the classes syntax could suggest, i'm using the twitter bootstrap css-framework, but i've implemented the Icomoon font-set (as in joomla 3.0) instead of the tbs Glyph-icons sprites images.
Unfortunately, using font-based icons, text rules are applied to the icons also, and that is the reason i'm trying to insert a custom element inside the <a> tag, so that i can override the hide-text class hiding the home-icon.
Thanks for any suggestion!
Have a look in the template file of the menu module.
/modules/mod_menu/tmpl/default.php
The template builds the HTML for the menu module.
I just checked how it works in Joomla 2.5, and in the /modules/mod_menu/tmpl/default.php template the list is build. If you want to add to only the home link you'll have to add a little bit of code. Something like this :
if($item->home == '1'){ $item->title = '<i class="icon-home"></i>' . $item->title; };
Insert this just under the foreach loop and have a go, it should look something like this :
foreach ($list as $i => &$item) :
// THIS ADDS THE <i> to only the HOME LINK
if($item->home == '1'){ $item->title = '<i class="icon-home"></i>' . $item->title; };
$class = 'item-'.$item->id;
if ($item->id == $active_id) {
$class .= ' current';
}
Good Luck ;)
I have been following this guide as well, (Thanks Gruber and Mark Vink) but using the glyphicons instead of IcoMoon. I found there to be a syntax error in the example above. The version hat worked for me was
foreach ($list as $i => &$item) {
if($item->home == '1')$item->title = '<span class="glyphicon glyphicon-home" aria-hidden="true"></span>' .$item->title;
$class = 'item-' . $item->id
etc...
Well lets try to explain am sorry about my english.
I have some xml files where I get the url from with some php scripts
everything goes right the only prob is i want to change the li BGcolor of the selected link like in css :active or giving only that link eg a class="current"
this below make dynamically the urls to the data
echo "<ul><li ><a href='?xml1=".$xmlGet."&link=".$link." '>".$slide->title."</a></li></ul><br/>";
with the above i get a list of links not only one like below as urls
http://localhost/html5/playerEnd/hoofdstuks.php?xml1=chapter_3733&link=1
http://localhost/html5/playerEnd/hoofdstuks.php?xml1=chapter_3733&link=2
http://localhost/html5/playerEnd/hoofdstuks.php?xml1=chapter_3733&link=3
etc etc
and it display as menu like this
link 1
link 2
link 3
link 4
etc etc
each link load a different data to my page when clicked so i want the one clicked to be active like an other color or something.
Use $_GET['link'] to find out which link has been clicked. Then add a class to the link which corresponds to this. You'll have to define the active class.
$linkID = $_GET['link'];
echo "<ul><li ><a href='?xml1=".$xmlGet."&link=".$link." '";
if ($linkID == $link) { echo " class=\"active\" "; }
echo ">".$slide->title."</a></li></ul><br/>";
And if you want the li to have the class (as asked in comments):
$linkID = $_GET['link'];
echo "<ul><li";
if ($linkID == $link) { echo " class=\"active\" "; }
echo "><a href='?xml1=".$xmlGet."&link=".$link."'>".$slide->title."</a></li></ul><br/>";