Highlight current item in the heading php - php

So I was wondering how do you highlight the current page in the heading of the website. I used the include method to call the heading in all of the pages, but how do I highlight the current page while maintaining the include method in every page.
HEADER.PHP
<div id="site-content">
<header class="site-header">
<div class="container">
<a href="index.php" id="branding">
<img src="images/logo.png" alt="Company Name" class="logo" width="100">
<div class="branding-copy">
<h1 class="site-title" style="font-size:60px;">Benedicto Law</h1>
<small class="site-description">Justice In Words</small>
</div>
</a>
<nav class="main-navigation">
<button type="button" class="menu-toggle"><i class="fa fa-bars"></i></button>
<ul class="menu">
<li class="menu-item">Home</li>
<li class="menu-item">Attorney</li>
<li class="menu-item">Service</li>
<li class="menu-item">Contact</li>
</ul>
</nav>
<nav class="mobile-navigation"></nav>
</div>
</header> <!-- .site-header -->
then I only used
<?php include_once('header.php') ?> for calling it to other pages.
I wanted it to highlight the current menu item where the user is in.
For example:
The user pressed Attorney button the Attorney button in the heading should have a highlight.
Any help is appreciated thanks

You have at least 2 options.
1. Pass the data in PHP manually
Before your include(header statement, create a variable for the onPage and set it. Then use it in your include.
For example:
<?php
$onPage = 'attorney';
include_once('header.php') ?>
Then in header.php, check for it like this:
<li class="menu-item <?php if ($onPage == 'attorney') echo 'active'; ?>">Attorney</li>
2. Automatically detect it
In header.php
$onPage = $_SERVER['PHP_SELF'];
// make sure it's getting just the page, no directory
$onPage= explode("/",$onPage);
$onPage = $onPage[count($onPage-1)];
// remove .php and make sure its lower case
$onPage = str_replace(".php", "", strtolower($onPage));
// for /directory/Attorney.php this will give you 'attorney'
The check for it like before
<li class="menu-item <?php if ($onPage == 'attorney') echo 'active'; ?>">Attorney</li>

Related

How to make navbar constant across multiple pages?

I have looked at prevous questions about this and people say php and have not found an answer. how do I convert my navbar to php and use it in multiple html pages. Could someone tell me how to do so? I am currently taking a codecademy course on php and it is really hard for me to understand so please be patient.
<div class="tabs">
<ul>
<a href="http://degraphic-design.dunked.com/contact-me" style="text-decoration:none">
<li class="contact">Contact</li>
</a>
<li class="dropdown">Shop</li>
<li class="forum">Forum</li>
<a href="index.html" style="text-decoration:none">
<li class="about">About</li>
</a>
<li class="team">Team</li>
<a href="http://degraphic-design.dunked.com/" style="text-decoration:none">
<li class="portfolio">Portfolio</li>
</a>
</ul>
</div>
Say you have about.php and home.php in the root of your website. Create a directory called partials (or whatever), go into partials and put the contents of your navigation HTML in a file called nav.php. Then in about.php and home.php, use this where you want to include the navigation code
<?php include 'partials/nav.php'; ?>
Here is one way (extremly basic):
Create a PHP file called index.php
<!DOCTYPE html>
<html>
<body>
<header>
<?php
include 'header.php';
/**
* say you wanted a different header for shop
* if($_GET['page'] === 'shop') {
* include 'header-shop.php';
* } else {
* include 'header.php';
*}
*/
?>
</header>
<div id="main">
<?php
include $_GET['page'].'.php'; // assuming your storing your pages in same path as index
?>
</div>
<footer>
<?php
include 'footer.php';
?>
</footer>
</body>
</html>
Then a header.php
<div class="tabs">
<ul>
<li>Contact</li>
<li>Shop</li>
</ul>
</div>
And create your page files contact.php, shop.php ect.
Updated to a slightly more elaborate example to give you the idea.

bootstrap php navigation bar highlight active

I have a problem with highlighting using php include.
Here's my navigation bar:
<?php
echo '
<link rel="stylesheet" href="css/index-css.css" type="text/css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/womsy/index.php">Womsy</a>
</div>
<ul class="nav navbar-nav">
<li <?php echo $active[1] ?>Home</li>
<li <?php echo $active[2] ?>Blog</li>
<li <?php echo $active[3] ?>Projects</li>
<li <?php echo $active[4] ?>Contact</li>
<li class="active">About</li>
</ul>
</div>
</nav>';
$active[$current] = "class=active";
?>
I made this with bootstrap, and am trying to highlight via this: http://webdevjunk.com/coding/css/17/php-menu-includes-with-css-style-to-highlight-active-page-link/
<?php
$current = 1;
include 'php/menu.php';
?>
This is what I use on the page, but it doesn't highlight, but when I change the class in the <li> it does work.
Can someone help me figure this out?
function setActive($pageName)
{
if (stripos($_SERVER['REQUEST_URI'], $pageName)) {
echo 'class="active"';
}
}
//$pageName will be home ,blog,projects and contacts
Declare page variable at the very top of each individual page.
Example: <? $page="home";?> goes at top of homepage and <? $page="blog";?> would go on top of blog page, etc.
For each list item in your menu add if statement with corresponding variable and active class.
Example: <ul><li class="<?if($page=="home"){?>active<?}?>"><b>Home</b></li><li class="<?if($page=="blog"){?>active<?}?>"><b>Blog</b></li></ul>
What this does is assign each page a variable. The variable is compared in the if statements in the nav bar to determine which li gets the active class.

How to properly implement a structured menu in php

my goal is to tweak/replace the existing wordpress php menu code, having as a start point, this html/css/js menu structure in codepen:
Home / Portfolio / About and going down in Portfolio structure, another page having Home / Portfolio projects.
In a few words, I've registered in script-calls.php the mynewmenu.js file with the following sequence
js:
// mynewmenu implementation
jQuery(function($){
var height, index, prevIndex
$('nav ul li').mouseover(function(e){
//Set the aesthetics (similar to :hover)
$('nav ul li').removeClass('hovered');
$(this).addClass('hovered');
//Gets relevant data required for scrolling of menuRight
height = $("#menuRight").css("height").replace('px','');
index = $(this).index();
//If the category button (from the navlist) has changed
if (index != prevIndex){
$("#menuRight").stop();
$("#menuRight").animate({"scrollTop":height*index}, 800, 'easeOutBounce'); //This requires jQuery UI for easing options.
prevIndex = index;
}
});
});
I've created the desired menu structure (assigning different menus to different pages as u'll see here) and I've identified the php that manage the existing menu structure:
<!-- Start Header -->
...
<div class="myrow max_width ">
<div class="small-5 <?php if ($header_style == 'style2') { echo 'medium-8'; } else { echo 'medium-4';} ?> columns menu-holder">
<?php $full_menu_true = ($menu_mobile_toggle_view == 'style2' && $header_style == 'style2');?>
<?php if ($full_menu_true) { ?>
<nav id="full-menu" role="navigation">
<?php if ($page_menu) { ?>
<?php wp_nav_menu( array( 'menu' => $page_menu, 'depth' => 2, 'container' => false, 'menu_class' => 'full-menu', 'walker' => new thb_mobileDropdown ) ); ?>
<?php } else if(has_nav_menu('nav-menu')) { ?>
<?php wp_nav_menu( array( 'theme_location' => 'nav-menu', 'depth' => 2, 'container' => false, 'menu_class' => 'full-menu', 'walker' => new thb_mobileDropdown ) ); ?>
<?php } else { ?>
<ul class="full-menu">
<li>Please assign a menu from Appearance -> Menus</li>
</ul>
<?php } ?>
/* I think that <div id='menuRight'> html sequences *translated*
in *php* should begin here in a conditional manner: *if* we find ourself on the
Home page, should be activated Home / Portfolio / About sequence and also if we
are on the Portfolio page, we should receive the menu 2, generated by Home / Portfolio
projects sequence. More details below. */
</nav>
<?php } ?>
<?php if ($header_search != 'off') { do_action( 'thb_quick_search' ); } ?>
<?php if ($header_cart != 'off') { do_action( 'thb_quick_cart' ); } ?>
<a href="#" data-target="open-menu" class="mobile-toggle<?php if (!$full_menu_true) { ?> always<?php } ?>">
<div>
<span></span><span></span><span></span>
</div>
</a>
</div>
</div>
</header>
<!-- End Header -->
At this point, my question is, how can I implement into the header.php the following html sequences that generate the rollover images linked to the menu buttons, keeping in mind that there are different sections, each menu with his section as follow. Home / Portfolio / About:
<nav>
<ul>
...
</ul>
<div id='menuRight'>
<div>
Home
<img src='http://images5.fanpop.com/image/photos/31100000/random-space-space-31155586-598-398.jpg'>
</img>
</div>
<div>
Portfolio
<img src='http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg'>
</img>
</div>
<div>
About
<img src='http://images5.fanpop.com/image/photos/31100000/random-space-space-31155586-598-398.jpg'>
</img>
</div>
</div>
</nav>
and menu 2, Home / Portfolio projects:
<nav>
<ul>
...
</ul>
<div id='menuRight'>
<div>
Home
<img src='http://images5.fanpop.com/image/photos/31100000/random-space-space-31155586-598-398.jpg'>
</img>
</div>
<div>
Fiva
<img src='http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg'>
</img>
</div>
<div>
Caterham
<img src='http://images5.fanpop.com/image/photos/31100000/random-space-space-31155586-598-398.jpg'>
</img>
</div>
<div>
Mobile
<img src='http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg'>
</img>
</div>
</div>
</nav>
I left intentionally the css out of discussion because, that's another chapter of this code tweak.
LE: I have to mention that the rollover image effect activated by the menu buttons, will be enough (and make sense) for it to be available, only on the Home page and Portfolio page of the site. I think that It could be very tricky to achieve the same effect when we have a project page opened (let's say FIVA) and have the mouse over another project button for example.
LE2: regarding the rollover images, I am not looking for a fancy php code that's supposed to grab a preview of the last project or something; a php code that allows me to predefine image source links like we have in the above html menu sections, will be just fine, taking in consideration the fact that these images will not be replaced so often.
LE3: Pure experimental, and please correct me, I was just thinking, using include PHP function to call two separate html files in header.php (including in these the above described menu 1 and 2 sections) could be the beginning of a workaround?
<!-- Start Header -->
...
<div class="myrow max_width ">
...
<ul class="full-menu">
<li>Please assign a menu from Appearance -> Menus</li>
</ul>
<?php } ?>
<?php
/* But there still should be a php code, that call the
html sections *if* we are on Homepage or Portfolio page.
Something like:
Php instructions, if Home page */
include('menu1section.html');
// and also php instructions, if Portfolio page
include('menu2section.html');
?>
</nav>
<?php } ?>
<?php if ($header_search != 'off') { do_action( 'thb_quick_search' ); } ?>
...
</div>
</header>
<!-- End Header -->
Any thoughts? Thank you,
I'm not a wordpress dev, but it seems to me you need a way to detect the active category/post/page? you are on... it's difficult to understand your data structures from looking at the website.
<!-- Start Header -->
...
<div class="myrow max_width ">
...
<ul class="full-menu">
<li><a href="<?php echo get_admin_url().'nav-menus.php'; ?>">
Please assign a menu from Appearance -> Menus
</a></li>
</ul>
<?php } ?>
<?php
$thisCat = get_category(get_query_var('cat'));
switch ($thisCat->name) {
case 'Home':
echo "Home test";
break;
case 'Portfolio':
echo "portfolio test";
break;
case 'About Us':
echo "About Us test";
break;
}
?>
....
<!-- End Header -->
Revised my answer to give you a better idea of what test I'm referring too.

Hide a <li tab if a condition is met [duplicate]

This question already has answers here:
Hiding a Div using php
(6 answers)
Closed 1 year ago.
I have a foreach look that checks if user has a picture or not. If the user doesn't have the picture I want to hide a <li> tab that shows the picture.
Inside my else how do I say, for this user hide tab 2?
I tried using echo 'id="tabHeader_2" style:"visibility:hidden"; but that doesn't work. I need a reference to that tab2, don't I?
<div id="picture<?php echo $i ?>" style="display: none;">
<?php
$picture = $user->pic;
if(isset($picture))
{
// show picture.
}
else
{
// hide tab2
}
?>
</div>
Then the list of tabs:
<div class="profiles">
<div id="tabContainer">
<div class="tabs">
<ul>
<li id="tabHeader_1"> Profile </li>
<li id="tabHeader_2"> Picture </li>
</ul>
</div>
<div id="tabsContent">
<div class="tabpage" id="tabpage_1"></div>
<div class="tabpage" id="tabpage_2"></div>
</div>
<script src="<?php echo Yii::app()->theme->baseUrl; ?>/js/tabs.js"></script>
</div>
</div>
Picture of what the page looks like:
I am not 100% sure about your code, but you are using isset() which would not be correct, because you set the variable right behind that check so it will be set 100% of the time. You will want to check empty() or is_file() perhaps, depends on what is in that variable.
<!-- This display: none seems strange if you are going to show the wrapped elements -->
<div id="picture<?php echo $i ?>" style="display: none;">
<?php
$picture = $user->pic;
if(!empty($picture)) {
// show picture.
}
else {
// hide tab2
}
?>
</div>
If you put the real code, it would be easier to see how you are laying out your elements.
Do Like This :-
<div class="tabs">
<ul>
<?php
$i = 1;
foreach($yourarray as $key => $value){
if(isset($value) && $value != '')
?>
<li id="tabProfileHeader<?php echo $i;?>"> Profile </li>
<li id="tabPictureHeader<?php echo $i;?>"> Picture </li>
<?php
$i++;
}
?>
</ul>
</div>

How to have the class="selected" depending on what the current page/url is

This is my first post so forgive as I am just new in the world of web development.
Normally, when I try to make a website, I create a file called header.html and footer.html so that I only change data once in all of the pages rather than having multiple same headers on many html files. And include them all in a php file together with the content and the php codes that comes per page.
Now my problem is because I only have 1 header, the css is designed in a way that whatever the current menu/tab is, it will be marked as "selected" so that its obvious to the user what page they are currently in.
My question is how do I solve this problem:
1.) To have the class="selected" depending on what the current page/url is.
<!--Menu Starts-->
<div class="menu">
<div id="smoothmenu" class="ddsmoothmenu">
<ul>
<li>Home</li>
<li>About </li>
<li>Services </li>
<li>Features</li>
<li>Support
<ul>
<li>Support 1</li>
<li>Support 2</li>
</ul>
</li>
</ul>
</div>
</div>
<!-- Menu Ends--!>
Thank You :)
If you're looking for a non-javascript / php approach...
First you need to determine which nav-link should be set as active and then add the selected class. The code would look something like this
HTML within php file
Call a php function inline within the hyperlink <a> markup passing in the links destination request uri
<ul>
<li><a href="index.php" <?=echoSelectedClassIfRequestMatches("index")?>>Home</a></li>
<li><a href="about.php" <?=echoSelectedClassIfRequestMatches("about")?>>About</a> </li>
<li><a href="services.php" <?=echoSelectedClassIfRequestMatches("services")?>>Services</a> </li>
<li><a href="features.php" <?=echoSelectedClassIfRequestMatches("features")?>>Features</a></li>
<li>Support
<ul>
<li><a href="support1.php" <?=echoSelectedClassIfRequestMatches("support1")?>>Support 1</a></li>
<li><a href="support2.php" <?=echoSelectedClassIfRequestMatches("support2")?>>Support 2</a></li>
</ul>
</li>
</ul>
PHP function
The php function simply needs to compare the passed in request uri and if it matches the current page being rendered output the selected class
<?php
function echoSelectedClassIfRequestMatches($requestUri)
{
$current_file_name = basename($_SERVER['REQUEST_URI'], ".php");
if ($current_file_name == $requestUri)
echo 'class="selected"';
}
?>
You could ID each link and use JavaScript/Jquery to add the selected class to the appropriate link.
<!--Menu Starts-->
<div class="menu">
<div id="smoothmenu" class="ddsmoothmenu">
<ul>
<li id="home-page">Home</li>
<li id="about-page">About </li>
<li id="services-page">Services </li>
<li id="features-page">Features</li>
<li id="support-page">Support
<ul>
<li id="support1-page">Support 1</li>
<li id="support2-page">Support 2</li>
</ul>
</li>
</ul>
</div>
</div>
<!-- Menu Ends--!>
On your content page use jQuery to do something like:
$(document).ready(function(){
$("#features-page").addClass("selected");
});
Another method you could use is:
Add class element based on the name of the page
Give each link a separate id then use jQuery on the individual pages.
<li>Home</li>
<li>About </li>
<li>Services </li>
<li>Features</li>
<li>Support
<ul>
<li>Support 1</li>
<li>Support 2</li>
</ul>
</li>
On the services page:
$(document).ready(function(){
$("#services").addClass("selected");
});
Or even better as robertc pointed out in the comments, there is no need to even bother with the id's just make the jquery this:
$(document).ready(function(){
$("[href='services.php']").addClass("selected");
});
One variant on Chris's approach is to output a particular class to identify the page, for example on the body element, and then use fixed classes on the menu items, and a CSS rule that targets them matching. For example, this page:
<DOCTYPE HTML>
<head>
<title>I'm the about page</title>
<style type="text/css">
.about .about,
.index .index,
.services .services,
.features .features {
font-weight: bold;
}
</style>
</head>
<body class="<?php echo basename(__FILE__, ".php"); ?>">
This is a menu:
<ul>
<li>Home</li>
<li>About </li>
<li>Services </li>
<li>Features</li>
</ul>
</body>
...is pretty light on dynamic code, but should achieve the objective; if you save it as "about.php", then the About link will be bold, but if you save it as "services.php", then the Services link will be bold, etc.
If your code structure suits it, you might be able to simply hardcode the page's body class in the page's template file, rather than using any dynamic code for it. This approach effectively gives you a way of moving the "logic" for the menu system out of the menu code, which will always remain the same for every page, and up to a higher level.
As an added bonus, you can now use pure CSS to target other things based on the page you're on. For example, you could turn all the h1 elements on the index.php page red just using more CSS:
.index h1 { color: red; }
You can do it from simple if and PHP page / basename() function..
<!--Menu Starts-->
<div class="menu">
<div id="smoothmenu" class="ddsmoothmenu">
<ul>
<li><a href="index.php" <?php if (basename($_SERVER['PHP_SELF']) == "index.php") { ?> class="selected" <?php } ?>>Home</a></li>
<li><a href="about.php" <?php if (basename($_SERVER['PHP_SELF']) == "about.php") { ?> class="selected" <?php } ?>>About</a> </li>
<li><a href="services.php" <?php if (basename($_SERVER['PHP_SELF']) == "services.php") { ?> class="selected" <?php } ?>>Services</a> </li>
<li><a href="features.php" <?php if (basename($_SERVER['PHP_SELF']) == "features.php") { ?> class="selected" <?php } ?>>Features</a></li>
</ul>
</div>
</div>
Sorry for my bad English, however may be it could help. You can use jQuery for this task. For this you need to match the page url to the anchor of menu and then add class selected to it. for example the jQuery code would be
jQuery('[href='+currentURL+']').addClass('selected');

Categories