0

I am making a website as part of a college assignment. I have a navigation list for my pages styled using CSS so when a page is selected the link appears bold with an image beside. I was wanting to keep the style of this menu however move this part of the html code to a .php file and just include it on each of the pages for code re-use.

Easy enough to do however because I have a class set to determine which page is selected an change the look of the link how would I go about passing this to the PHP file - Is it possible?

Code snippets below...

HTML list currently:

<ul>
    <li class="selected"><a href="index.html">Home</a></li>
    <li><a href="login.html">Members Login</a></li>
    <li><a href="#">Music Categories</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>

CSS for the selected page:

nav ul li.selected a
{
color:#fff;
font-weight:bold;
background:url(images/music_note2.png) center left no-repeat;
}

Is there some sort of code I can use the pass the name of the page? Appologies I have never used php. Not sure if it matters but later on I will need to also hide or show certain links on the menu depending on whether the user is logged in

ToniHopkins
  • 369
  • 3
  • 11
  • 30
  • You talk about PHP code yet you don't show any at all. – Pitchinnate Nov 21 '13 at 15:44
  • @pitchinnate as mentioned in the question im moving from using a html navigation to php. I hadnt yet made one incase this wasnt possible to do. I had searched on the internet but wasnt getting any relevant information back – ToniHopkins Nov 21 '13 at 15:48

2 Answers2

3

You can do it in just css if you want to. Just add a class to the body of every page like home to home, contact to contact, etc.

<body class="home">    // for home page
   ...

<body class="contact">    // for contact page
   ...

Then you add the same classes to your navigation like:

<ul>
    <li class="home"><a href="index.html">Home</a></li>
    <li class="login"><a href="login.html">Members Login</a></li>
    <li class="music"><a href="#">Music Categories</a></li>
    <li class="contact"><a href="#">Contact Us</a></li>
</ul>

Now you can highlight your active menu item like:

.home .home a,
.login .login a,
.music .music a,
.contact .contact a {
  color:#fff;
  font-weight:bold;
  background:url(images/music_note2.png) center left no-repeat;
}
jeroen
  • 91,079
  • 21
  • 114
  • 132
  • 1
    Oh I like it. I'll give this a go now – ToniHopkins Nov 21 '13 at 15:50
  • 1
    That's actually quite elegant ... it would fall over if this was in some kind of master view pulled in for every page through an MVC framework (but then there would probably be a $_GET var to identify the page that you could use to determine the class). – CD001 Nov 21 '13 at 16:10
  • @CD001 I find it works quite well for primary navigation; for secondary navigation or more complicated things I tend to add `active` classes with php like in MarcB's answer. – jeroen Nov 21 '13 at 16:32
2

Simplest method is to simply set a variable that your included menu file checks for:

<?php
$cur_page = 'home';
include('menu.php');

and then in menu.php

<li<?php echo ($cur_page == 'home') ? ' class="selected"' : '' ?>><a href etc.....
<li<?php echo ($cur_page == 'members') ? ' class="selected"' : '' ?>> etc....
Marc B
  • 356,200
  • 43
  • 426
  • 500