CSS navigation with PHP include

Question

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');"

enter image description here

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><a href="index.php">Home</a></li>
      <li><a href="services.php">Services</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="/forum/index.php">Forums</a></li>
      <li><a href="contact.php">Contact</a></li>
      <li><a href="#">Account</a></li>
    </ul>
</nav>

How do I go about using this method, and having each link made active when clicked?

Could you share some of the content of your header.php code? — Dragony
– Dragony, Commented Jan 5, 2014 at 15:13
<header> <div class="container"> <h1><a href="index.php">FictionSolutions</a></h1> <nav> <ul> <li><a href="index.php">Home</a></li> <li><a href="services.php">Services</a></li> <li><a href="#">Blog</a></li> <li><a href="/forum/index.php">Forums</a></li> <li><a href="contact.php">Contact</a></li> <li><a href="#">Account</a></li> </ul> </nav> </div> </header> — Conrad M
– Conrad M, Commented Jan 5, 2014 at 15:15

Romain Pellerin · Accepted Answer · 2014-01-05 15:19:21Z

1

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.

answered Jan 5, 2014 at 15:19

Romain Pellerin

2,4803 gold badges29 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Abu Nooh · Accepted Answer · 2014-01-05 15:26:35Z

0

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'" : ""; ?> >
<a href="http://example.com">Home</a></li>
<li <?php echo ($page == 'two') ? "class='active'" : ""; ?> ><a
href="http://example.com/page-two">Page two</a></li>
<li <?php echo ($page == 'three') ? "class='active'" : ""; ?> ><a
href="http://example.com/page-three">page three</a></li>
</ul>

Hope that helps

answered Jan 5, 2014 at 15:26

Abu Nooh

8564 gold badges14 silver badges45 bronze badges

Collectives™ on Stack Overflow

CSS navigation with PHP include

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related