I am making a CSS navigation bar, which is stored in a folder called 'includes'. Basically what I want is, when a link is clicked, for it to become active. Im linking to this folder with "include('includes/header.php');"
My CSS is:
nav ul li a {
font-size:22px;
color:#fff;
height:67px;
line-height:67px;
text-decoration:none;
min-width:101px;
text-align:center;
float:left;
background: grey;
border-right:1px solid black;}
nav ul li a.current, nav ul li a:hover {padding-bottom:5px;}
The content of header.php is:
<header>
<div class="container">
<nav>
<ul>
<li>Home</li>
<li>Services</li>
<li>Blog</li>
<li>Forums</li>
<li>Contact</li>
<li>Account</li>
</ul>
</nav>
How do I go about using this method, and having each link made active when clicked?
You could do something like this for the header
<ul>
<li><a <?php if (isThisTheCurrentPage) echo 'class="current"'?> ...>...</a></li>
<li><a <?php if (isThisTheCurrentPage) echo 'class="current"'?> ...>...</a></li>
<li><a <?php if (isThisTheCurrentPage) echo 'class="current"'?> ...>...</a></li>
...
</ul>
Once I had to do something similar, and I achieved this by setting some variables at the beginning of each php file. Then, the header.php must test these variables in the if statements.
I did something like this in the past very similar to what Romain said:
I named each page something like and included the nav file:
<?php $page = 'one';
require_once'./template/nav.php';?>
Here is the content of my nav file:
<ul class="nav navbar-nav">
<li <?php echo ($page == 'one') ? "class='active'" : ""; ?> >
Home</li>
<li <?php echo ($page == 'two') ? "class='active'" : ""; ?> >Page two</li>
<li <?php echo ($page == 'three') ? "class='active'" : ""; ?> >page three</li>
</ul>
Hope that helps
Related
I want to put my menu in a separate PHP file so when I need to edit it, I only have to edit it once. The problem starts when I want to highlight the active page. Can someone help me to fix it?
<?php $currentPage = basename($_SERVER['SCRIPT_FILENAME']); ?>
Toggle navigation
<li></span> Home</li>
<li></span> About us</li>
<li class="dropdown">
<span class="glyphicon glyphicon-calendar"></span> Services <span class="caret"></span>
<ul class="dropdown-menu">
<li></span> Drivers services</li>
<li></span> Shop services</li>
</ul>
</li>
<li></span> On-line Application</li>
<li></span> Contact us</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="clearfix"> </div>
</div><!-- navbar -->
I find the solution to my question adding this css in styles file:
/* The here ID identifies the current page and applies a white color to the text and a black background as a visual indicator. */
a#here {
background-color: #000 !important;
color: #fff !important;
}
Plus call the menu in each page with following code:
<div> <?php
$file ='includes/menu.php';
if (file_exists($file) && is_readable($file)) {
include($file);
} else {
throw new Exception("$file can't be found");
}
include('includes/menu.php');?>
</div>
A quick and dirty method to achieving this is in each file put the following:
<?php
include("header.php"); // Insert location of header file here
?>
and in your header.php file after creating your head block insert this
<?php $active= substr(basename($_SERVER['SCRIPT_FILENAME']),0, -4); ?> // Page Name
<body <?php echo "class='$active'";?>> // This sets the bodies class to be the page name.
finally in style.css use the following code to set the highlighted feature
// This is an example for my CSS. Insert your own css selector
// In my css i have this which adds a small orange bar to the bottom of the navigation option. I set the opacity to 0 to not display it.
.header nav ul li a:before
{
height: 5px;
background: #ea5c18;
opacity: 0;
}
// Then i set .PageName (the bodies class name) and set that specific nav element to have an opacity of 1.
.PageName .header nav ul li:first-child a:before
{
opacity:1;
}
At the moment I have a website with 5 pages and the main navigation is being displayed using an unordered list. What I'm trying to achieve is for the "active" page to be displayed first in the list.
For example, if I have a these pages: "Home | About | Contact | Blog". When you're on the contact page, this should move to the top of the list, so the menu would than look like this: "Contact | Home | About | Blog".
What's causing me problems is that the menu is being included through php, so there is just one menu for all the pages and through PHP I have made it so that it adds an "active" class to the current page menu item.
I am not really sure what the best solution for this would and would really appreciate any help.
Edit:
This is the navigation page that's being included into each page:
<nav class="large-nav">
<ul>
<li <?php echo ($activePage == 'ourStory') ? "class='active'" : ""; ?> >OUR STORY</li>
<li <?php echo ($activePage == 'services') ? "class='active'" : ""; ?> >SERVICES</li>
<li <?php echo ($activePage == 'projects') ? "class='active'" : ""; ?> >PROJECTS</li>
<li <?php echo ($activePage == 'contact') ? "class='active'" : ""; ?> >CONTACT</li>
<li <?php echo ($activePage == 'upload') ? "class='active'" : ""; ?> ><a style="margin-right: 0;" href="upload.php#top" title="">UPLOAD</a></li>
</ul>
</nav>
Here is a pure CSS way to do it using Flexbox ordering.
ul {
…
display: flex;
flex-direction: column;
}
li[class=active] {
order: -1;
…
}
Demo: http://codepen.io/antibland/pen/ZWjdqL
Support: IE10+, Firefox, Chrome
Jsfiddle link
jQuery:
$(function(){
$("li").on("click", function(){
$('ul').prepend($(this))
})
})
HTML
<ul>
<li>Home</li>
<li>Contact</li>
<li>About</li>
<li>Blog</li>
</ul>
You could do something like this :
$('.large-nav li').each(function() {
if($(this).find('a').attr('href') == location)
{
$('.large-nav ul').prepend($(this))
}
})
so I have been having an issue with some PHP strings that I can't seem to figure out. The goal is to have the "parent" link remain as an active state whilst allowing the dropdown function to contine.
<li class="<?php echo($activePage == "releases" ? "active" : "")?>" class="dropdown">
Press <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li class="<?php echo($activePage == "releases" ? "active" : "") ?>">Releases</li>
<li class="<?php echo($activePage == "clips" ? "active" : "") ?>">Press Clips</li>
<li class="<?php echo($activePage == "assets" ? "active" : "") ?>">Press Assets</li>
</ul>
</li>
So the goal here is to get the PRESS link to show an active state when either of the three releases, clips or assets
You'll notice in the first list I have two classes at the moment. The PHP echo class when infront does display the PRESS link its active state however doesn't allow for any drop down, thus rendering the other three links invisible, when I place the other class in the front, the drop down works but then the PRESS link doesn't show an active state.
Can anyone solve this issue for me? Thanks a lot!
This is the setup I used for a site to make the active parent element stay highlighted, as I walked down the tree:
#navigation ul.nav > li:hover ul a:hover,
#navigation ul.nav > li:hover, #navigation ul.nav > li:hover ul li:hover {
background: #3e4b51 none repeat scroll 0 0 !important;
text-decoration: none;
}
The menu setup is this:
<nav id="navigation" class="col-full" role="navigation">
<ul class="nav">
<li>
HOME
</li>
<li>
Level 1
<ul class="sub-menu">
<li>
Level 2
<ul>
<li>
Level 3
<ul>
<li>
Level 4 Item 1
</li>
<li>
Level 4 Item 2
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 9 years ago.
Improve this question
http://hotelshimlahill.com/demo/
this website I've made in bootstrap,
the header section including nav bar is coming from a separate file called 'header.php'
Now i want to add active class for each page on which user is visiting.
how can i do that? Kindly assist me.
Thankyou.
In your individual page such as about.php, services.php, you can do:
$currentPage = 'about'; // current page is about, do the same for other page
include('header.php');
Then in your header.php, you can check:
<ul class="nav navbar-nav">
<li class="<?php if($currentPage =='about'){echo 'active';}?>" >Home</li>
<li class="<?php if($currentPage =='services'){echo 'active';}?>" >about</li>
</ul>
Or you can try to use jQuery as well:
$(document).ready(function($){
var url = window.location.href;
$('.nav li a[href="'+url+'"]').addClass('active');
});
All menu links are inside ul > li. so, give id to all li. and on each page by using jquery addClass "active" to li.
in you bootstrap css you find this line i think it should be at line no 4841
.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus{
background-color: #5C0000;
color: #FFFFFF;
}
you change this line as
.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus, .navbar-inverse .navbar-nav > li > a.active{
background-color: #5C0000;
color: #FFFFFF;
}
now in your project file find the section where the navigation generated those line
<ul class="nav navbar-nav">
<li>Home</li>
<li>about</li>
<li>services</li>
<li>facilities</li>
<li>booking</li>
<li>testimonials</li>
<li>careers</li>
<li>contact Us</li>
</ul>
then change it as accrodinly
<ul class="nav navbar-nav">
<li><a href="index.php" <?php if($active=='Home') echo "class='active'"; ?>>Home</a></li>
<li><a href="about.php" <?php if($active=='about') echo "class='active'"; ?>>about</a></li>
<li><a href="services.php" <?php if($active=='services') echo "class='active'"; ?>>services</a></li>
<li><a href="facilities.php" <?php if($active=='facilities') echo "class='active'"; ?>>facilities</a></li>
<li><a href="reservations.php" <?php if($active=='booking') echo "class='active'"; ?>>booking</a></li>
<li><a href="testimonials.php" <?php if($active=='testimonials') echo "class='active'"; ?>>testimonials</a></li>
<li><a href="careers.php" <?php if($active=='careers') echo "class='active'"; ?>>careers</a></li>
<li><a href="contactUs.php" <?php if($active=='contact') echo "class='active'"; ?>>contact Us</a></li>
</ul>
then you have to a litle bit change in every files that you have in navigation link
such as
index.php
add this line at the top of the file that i mention on the navigation link
<?php $active ='Home'; ?>
and for about.php
<?php $active ='about'; ?>
I think it of course select of your active page
thnaks
I am using a PHP include that features my header content. For my navigation section I am using a list which just features text. I am using a small bit of php on the list items which basically states whatever the current page is, have an image displayed over that list item within the navigation. Below is what I am 'trying' to achieve:
As you can see, I want that blue shaped image placed over the top of the current page list item.
But below is what I have achieved and you will notice that the image is displayed but not like it should. I have used absolute positioning on the .current class which displays the whole image, however I cannot use absolute position on the image because then it wont display properly on another list item. What can I do?
Below is the relevant CSS and HTML/PHP:
<div id="navbar">
<ul>
<li><a <?php if (strpos($_SERVER['PHP_SELF'], 'index.php')) echo 'class="current"';?> href="#">Home</a></li>
<li><a <?php if (strpos($_SERVER['PHP_SELF'], 'shows.php')) echo 'class="current"';?> href="pages/shows.php">Shows</a></li>
<li><a <?php if (strpos($_SERVER['PHP_SELF'], 'classes.php')) echo 'class="current"';?> href="pages/classes.php">Classes</a></li>
<li><a <?php if (strpos($_SERVER['PHP_SELF'], 'noticeboard.php')) echo 'class="current"';?> href="pages/noticeboard.php">Notice Board</a></li>
<li><a <?php if (strpos($_SERVER['PHP_SELF'], 'about.php')) echo 'class="current"';?> href="pages/about.php">Our Story</a></li>
<li><a <?php if (strpos($_SERVER['PHP_SELF'], 'contact.php')) echo 'class="current"';?> href="pages/contact.php">Contact</a></li>
</ul>
.current {
width:138px;
height:57px;
background-image: url('../images/current.png');
background-repeat: no-repeat;
}
the <li> element is restricting the size of your <a> tag.
set the size of the individual <li> items to match the size of your tag and you will see the entire thing.
Modified code:
<div id="navbar">
<ul>
<li><a <?php if (strpos($_SERVER['PHP_SELF'], 'index.php')) echo 'class="current"';?> href="#">Home</a></li>
<li><a <?php if (strpos($_SERVER['PHP_SELF'], 'shows.php')) echo 'class="current"';?> href="pages/shows.php">Shows</a></li>
<li><a <?php if (strpos($_SERVER['PHP_SELF'], 'classes.php')) echo 'class="current"';?> href="pages/classes.php">Classes</a></li>
<li><a <?php if (strpos($_SERVER['PHP_SELF'], 'noticeboard.php')) echo 'class="current"';?> href="pages/noticeboard.php">Notice Board</a></li>
<li><a <?php if (strpos($_SERVER['PHP_SELF'], 'about.php')) echo 'class="current"';?> href="pages/about.php">Our Story</a></li>
<li><a <?php if (strpos($_SERVER['PHP_SELF'], 'contact.php')) echo 'class="current"';?> href="pages/contact.php">Contact</a></li>
</ul>
</div>
#navbar ul li {
width:138px;
height:57px;
}
.current {
width:138px;
height:57px;
background-image: url('../images/current.png');
background-repeat: no-repeat;
}
For obvious reasons, the background image of an element cannot overflow the element itself. Therefore, if you're putting the background image on your A tag, you need to make sure that the A tag is big enough to fit the background. You could try something like this:
A {
display: inline-block;
width: 138px;
height: 57px;
}
You'll have to adjust all your other CSS to position things properly.