I have stuck in a code. I am building a website which has lots of inner page. i include "sidebar.php" and place my side navigation in this file.
<div class="side-nav">
<ul>
<li>Calls
<ul>
<li>Call Record</li>
<li>Call Logs</li>
<li>Live Call Intercept</li>
<li>Voicemail</li>
</ul>
</li>
<li>SMS
<ul>
<li>SMS Feature</li>
<li>Redirect SMS</li>
</ul>
</li>
</ul>
</div>
Now i want to high light "record-calls" li when "record-calls.php" page is open and other list don't show any backgrounds.
There is only 1 sidebar.php which is including in every page.
You can simply use if condition
if(stristr($_SERVER['PHP_SELF'],'record-calls.php'))
{
//highlight it
}
Thanks
There are some methods you can use to highlight current page on the sidebar menu. I don't know your structure. In this case, I would suggest get the current URL by php and check if, for example, record-calls is included in it or not. Something like that:
<li <?php if(strpos('record-calls', $current_url) !== false) echo "class='current'"; ?>>Call Record</li>
Set some unique class on your <body> for a given page and use it to style the relevant part of your menu.
Exemples (not pretty, but I use your actual HTML) :
.record-calls side-nav li li:first-child { /* highlight styles */ }
.call-logs side-nax li li:first-child + li { /* highlight styles */ }
etc...
Related
I am trying to make a dynamic header in which header link classes update automatically when the page changes. so, like if the user in on index then HOME on header shows in red and if he is on folio page then folio shows in red and so on.
my code.
<?php
switch(basename($_SERVER['PHP_SELF'])){
case "index.php":
$index_hover = "act-link";
break;
case "portfolio.php":
$folio_hover = "act-link";
break;
}
?>
<style>
.act-link {color: red}
</style>
<div class="nav-holder">
Home
Folio
</div>
This code works as expected but the issues say I have 30 links in the header then it's not handy. so I want to make it dynamic so that it detects the page and update as per the need.
Thanks
From your question i think you want to add custom class in navigation menu associated with page
You can do it using php and javascript as well
Using PHP
<?php
function addActiveClass($page){
$url_array = explode('/', $_SERVER['REQUEST_URI']) ;
$url = end($url_array);
if($page == $url){
echo 'act-link'; //class name in css
}
}
?>
<ul>
<li><a class="<?php addActiveClass('home.php');?>" href="http://localhost/Home.php">Home</a></li>
<li><a class="<?php addActiveClass('aboutus.php');?>" href="http://localhost/aboutus.php">About us</a></li>
<li><a class="<?php addActiveClass('contactus.php');?>" href="http://localhost/contactus.php">Contact us</a></li>
</ul>
Here i have added function on every anchor tag addActiveClass which adds class 'act-link' depending on argument passed
Using javascript(jquery)
$(document).ready(function() {
var pathname = window.location.pathname;
$('ul > li > a[href="'+pathname+'"]').parent().addClass('act-link');
})
<ul class="nav">
<li>Home</li>
<li>About us</li>
<li>Contact us</li>
</ul>
I have used jquery here if you want you can write code is core js as well
let me know if there is confusion
I'm trying to figure out how to add a css class to a <li> tag in my menu navigation. I'm using a template that gets included on every page of site. In the template is the menu navigation code. I need to set the css class on the <li> for the corresponding active page using PHP_SELF I presume?
Navigation looks like this
And this is what it should look like when the page is displayed that corresponds to the page that was clicked in the navigation menu.
Here is the navigation menu code
<!-- MENU BEGIN -->
<div id="menu">
<ul id="nav">
<li>Home</li>
<li <?php echo $class_current; ?>>Technician</li>
<li <?php echo $class_current; ?>>Programming</li>
</ul>
</div>
<!-- MENU END -->
Here is the PHP function I am trying to create
function classCurrent(){
if(dirname($_SERVER['PHP_SELF']) == true) {
echo ' class="current"';
}
else {
echo '';
}
$current = classCurrent();
return $current;
}
I know this is possible, I just can't figure it all out yet.
You may try specifying some base class that has variables for the corresponding menus. So like if you are requesting the technician page:
Class Activmenu {
public $technician = true;}
alternatively you may use superglobal variables but this is safer. And in the menu you can check for the true item
if(Activemenu->technician)? echo'class="activeclass"' : 0;
Checking urls you will run into problems, if later on you have to modify your url structure.
So it is really simple actually to do this. All that needs to be done is have a variable set on the active page above the <html> tag preferably.
Example:
<?php $currentPage = 'technician';
<html>
So now we have this variable set on the technician page above the html tag. Now to call it in the template page on the navigation menu <li> all that needs to be done is the following.
<?php if ($currentPage=="technician") echo " class=\"current\""; ?>
Now just need to repeat this step for each page of the website.
This was also answered here PHP navigation menu
and a real good tutorial on how to do it is here http://alistapart.com/article/keepingcurrent
As a result the navigation code will end up looking something like this
<!-- MENU BEGIN -->
<div id="menu">
<ul id="nav">
<li<?php if ($currentPage=="home") echo " class=\"current\""; ?>>Home</li>
<li<?php if ($currentPage=="technician") echo " class=\"current\""; ?>>Technician</li>
<li<?php if ($currentPage=="programming") echo " class=\"current\""; ?>>Programming</li>
</ul>
</div>
<!-- MENU END -->
I seem to run into this problem frequently and can never find a solution. I have a Wordpress site with a top navigation. Since this is in my header.php, and used on all pages, I cannot hardcode my active menu state for each page.
How can I dynamically set the activate state to work for each page?
Here is my current nav code:
<nav id="main-menu" class="padbot">
<ul id="ce">
<li class="cemenu">About</li>
<li class="cemenu">Consulting</li>
<li class="cemenu">Intelligence</li>
<li class="cemenu">Academy</li>
<li class="cemenu">Blog</li>
<li class="cemenu">Contact</li>
</ul>
I've already setup a CSS class called "active" that has my active state properties. Ideally, what I'm looking for is when your on the "About" page (or any of the other pages), the class I created for the active state will be appended to the current li classes's.
Example:
<li class="cemenu active">About</li>
Thanks!
you could try something along the lines of
<li class="cemenu<?php echo ($_SERVER['PHP_SELF'] == '/about' ? ' active' : '');?>">About</li>
You can do this way:
This will add the active class to the <a> which contains the page from the url.
$(function(){
var url = window.location.href;
var page = url.substr(url.lastIndexOf('/')+1);
$('.cemenu a[href*="'+page+'"]').addClass('active');
});
and if you want to add class to its parent li the replace the last line to this and css class should be like this:
.active a{
css
properties
for active li's a
}
// using closest
$('.cemenu a[href*="'+page+'"]').closest('li').addClass('active');
or
// using parent
$('.cemenu a[href*="'+page+'"]').parent('li').addClass('active');
just tryout the fiddle here
First, there is a css pseudo class prepared for styling 'active' links :
a:active {css}
For your situation, you would have to add this class to your styling :
.active a, a:active {css}
But your needs seems more on the PHP side than the CSS, perhaps someone else will help you with that part. There would be a javascript solution with jQuery, finding the actual location then inject a css selector to the proper element.
Check this article and this other one about wordpress. It will help you.
Stack Overflow references :
How do I target each menu different items on active state in Wordpress
How to add Active states and icons in wordpress wp_nav_menu()
Loosing Nav Active State in Wordpress Dynamic Menu
google search
try something like this:
<?php $pages = array('about' => 'About Us', 'blog' => 'blog') ?>
<ul>
<?php foreach($pages as $url => $page): ?>
<?php $isActive = $_SERVER["REQUEST_URI"] == $url ?>
<li<?php echo $isActive ? ' class="active"' : '' ?>>
<?php echo $page ?>
</li>
<?php endforeach ?>
</ul>
It may be worth looking into using wordpres functions such as get_page_link which would be nicer than using the Server super global as that's not nice. This would also fail if you have wordpress in a folder and not the document root, it's just a simple example to get you started :)
You can try like this
<li class="<?php
if($this_page=='Home'){
echo 'active';
}
?>">
Home
</li>
<li class="<?php
if($this_page=='Contact'){
echo 'active';
}
?>">
Contact
</li>
And then in your home page
$this_page='Home';
And in your contact page
$this_page='Contact';
You could use preg_replace() to add class="active" like this:
ob_start();
echo '<ul>
<li>Page 1</li>
<li>Page 2</li>
</ul>';
$output = ob_get_clean();
$pattern = '~<li><a href="'.$url.'">~';
$replacement = '<li class="active"><a href="'.$url.'">';
echo preg_replace($pattern, $replacement, $output);
I created a page with an header. This header.php has the following format:
<?php
$index_admin = "/test/index_test.php";
...
?>
<div id="button">
<ul>
<li>test</span></li>
...
</ul>
</div>
where
$currentpath = basename(__FILE__)
setted in every page before
include "header.php"
So when I open the page index_test I have the class buttonon, which changes the color of my link (so it's displaied as active).
Now I'd like to create an hidden submenu of the li which looks like:
<li>test</span></li>
<ul style="display:none">
<li>...</li>
which is displaied only if I go only over the
<li>
with
<onmouseover:"callfunctiontoshowthesubmenu">.
There I am.
My problem is: when I open a page listed on the submenu, I want to keep the submenu displayed. How can I do that?
Which is the fastest way?
In my html page, I use a PHP include to insert my site-wide header:
<?php include 'header.php'; ?>
Here is the code in header.php:
<div id="header">
<div id="navigation">
<ul>
<li>home</li>
<li>about us</li>
<li>competition</li>
<li>media</li>
<li>sponsors</li>
<li>contact us</li>
</ul>
</div>
</div>
Here is the CSS in the header of the HTML document:
#nav_about { color:#4c005c; }
The "active" class in the inserted code is to change the color of that link to signify what page you are on. That functions fine, as "active" is defined in the CSS document linked to the html file. I want to modify the color of a particular link depending on what page it is included in. Thing is, the CSS on that page (the one defining #nav_about) does not apply when I test it out. The include works fine though.
In summary, I need to find a way to modify a site-wide snippet of HTML that is inserted via a PHP include with CSS on that page it is inserted in.
I am new to HTML and PHP, so I assume it is some lack of knowledge here.
A simple way to do change the class of the HTML element based on the current page you are on in PHP might look something like this:
<?php
$nav_links = array(
'/index.php' => array('id' => 'nav_home', 'label' => 'Home'),
'/about_us.php' => array('id' => 'nav_about', 'label' => 'About Us'),
// and so on for each link
);
?>
<div id="header">
<div id="navigation">
<ul>
<?php
foreach ($nav_links as $href => $link_info) {
if ($_SERVER['REQUEST_URI'] === $href) {
?>
<li><?php echo $link_info['label']; ?></li>
<?php
} else {
?>
<li><?php echo $link_info['label']; ?></li>
<?php
}
}
?>
</ul>
</div>
</div>
Here you would just apply class=active for the link that corresponds to the currently viewed page. This also makes it really easy to separate out you page/link configuration if you so desire.
Sounds like a selector specificity issue. What's the CSS for your navigation links?
If it's something like #navigation li {color: #abc}, that will take priority over the #nav_about selector.
Selector specificity is ranked by the number of ids, classes, and elements in each.
1 id + 1 element > 1 id.
Increase the specificity of the #nav_about selector (e.g. change it to #navigation #nav_about) and you should be fine.
Try using the traditional way, inside the PHP tags,
<?php
echo "<link rel='stylesheet' href='css-filename.css' type='text/css'>";
?>