Simple Organism
Turning Menus On and Off with PHP
Earlier in this tutorial we were able to turn menu items on and off using CSS making our document pseudo-dynamic. In order to turn on and off the buttons in the main menu we used the following in our stylesheet.
body#about #main-menu li.about a,
body#portfolio #main-menu li.portfolio a,
body#news #main-menu li.news a,
body#contact #main-menu li.contact a
{
background: #521508;
}
If we were to add more sections and more topics, our clean little stylesheet will become quite cumbersome. Since we are already passing variables to our document using PHP, why not have those variables perform double-duty? On top of our document we are saying that this section is "Recent News" using the variable...
Using the variable "Recent News", we want to tell our document, if this section is "Recent News", turn on the "Recent News" button. Do you follow? It's the same logic we used previously with CSS. Currently we are using a different class/ID for each list item. Wouldn't it be much cleaner to simply use one class/ID for each list item? There's no doubt that's the way to go so open up your stylesheet and find...
body#about #main-menu li.about a,
body#portfolio #main-menu li.portfolio a,
body#news #main-menu li.news a,
body#contact #main-menu li.contact a
{
background: #521508;
}
remove it and replace that whole chunk of code with just this...
{
background: #521508;
}
You'll notice we are not using the "body" tag ID in order to tell the document what section we're in so jump into "index.php" and remove...
And while we're there, we might as well remove the "class" since we won't need that anymore either.
All that's left is the <body> tag making the code that much cleaner. For all you jargon artists out there, it's called "Reverse Engineering". Creating all the code necessary then trimming it down. If we take another look at our stylesheet you'll notice we've added a new list item ID. We need to replace the classes we currently have for each button in the main menu with this ID. Change this...
<ul>
<li class="home"><a href="#">Home</a></li>
<li class="about"><a href="#">About</a></li>
<li class="portfolio"><a href="#">Portfolio</a></li>
<li class="news"><a href="#">Recent News</a></li>
<li class="contact"><a href="#">Contact</a></li>
</ul>
</div>
To this...
<ul>
<li id="active-section"><a href="#">Home</a></li>
<li id="active-section"><a href="#">About</a></li>
<li id="active-section"><a href="#">Portfolio</a></li>
<li id="active-section"><a href="#">Recent News</a></li>
<li id="active-section"><a href="#">Contact</a></li>
</ul>
</div>
Getting slimmer! Obviously if we have the same ID for each list item and we said if this section is "Recent News" turn on the list item with ID "active-section" they would all turn on. We can't have that, it destroys the point of showing visitors where they are. We want only the button who's section we are in to have the ID "active-section". Here's a graphical representation of what we want to achieve.
We already have our variable "Recent News" being passed into our document, our stylesheet knows to give the button with the ID "active-section" a different background color so all that's left it to tell each list item to use the ID "active-section" only if the variable equals that section. Now replace...
with...
Telling the document to give the list item the ID "active-section" only if the variable is "Recent News".
I wouldn't worry too much about the syntax of PHP unless you want to learn more about programming. The one thing to note is the backslashes (\) in the ID. The reason we used those is since PHP and most programming languages use quotes (") to contain a string we need to make sure that our code doesn't use the quotes for the ID when parsing. It's called "escaping" a charactor so if you see this again, you'll know why.
Next, following the same format, change the rest of the buttons giving each it's own unique ID. Keep it simple but remember, we are also using that variable for other elements like the page title so nothing cryptic.
<li<?php if ($thisSection=="About Us") echo " id=\"active-section\""; ?>><a href="#">About Us</a></li>
<li<?php if ($thisSection=="Portfolio") echo " id=\"active-section\""; ?>><a href="#">Portfolio</a></li>
<li<?php if ($thisSection=="Recent News") echo " id=\"active-section\""; ?>><a href="#">Recent News</a></li>
<li<?php if ($thisSection=="Contact") echo " id=\"active-section\""; ?>><a href="#">Contact</a></li>
Great! One down, topics to go. Since this has already been explained how to use the variables to turn on links, we'll finish this pretty quick. Change all the topic ID's from this...
<ul>
<li id="topic-1"><a href="#">Topic One</a></li>
<li id="topic-2"><a href="#">Topic Two</a></li>
<li id="topic-3"><a href="#">Topic Three</a></li>
<li id="topic-4"><a href="#">Topic Four</a></li>
<li id="topic-5"><a href="#">Topic Five</a></li>
<li id="topic-6"><a href="#">Topic Six</a></li>
</ul>
</div>
To this...
<ul>
<li<?php if ($thisTopic=="Topic One") echo " id=\"active-topic\""; ?>><a href="#">Topic One</a></li>
<li<?php if ($thisTopic=="Topic Two") echo " id=\"active-topic\""; ?>><a href="#">Topic Two</a></li>
<li<?php if ($thisTopic=="Topic Three") echo " id=\"active-topic\""; ?>"><a href="#">Topic Three</a></li>
<li<?php if ($thisTopic=="Topic Four") echo " id=\"active-topic\""; ?>><a href="#">Topic Four</a></li>
<li<?php if ($thisTopic=="Topic Five") echo " id=\"active-topic\""; ?>><a href="#">Topic Five</a></li>
<li<?php if ($thisTopic=="Topic Six") echo " id=\"active-topic\""; ?>><a href="#">Topic Six</a></li>
</ul>
</div>
We've already removed the "class" from the <body> tag, now jump into your style sheet and head to...
body.topic-2 #page-column li#topic-2 a,
body.topic-3 #page-column li#topic-3 a,
body.topic-4 #page-column li#topic-4 a,
body.topic-5 #page-column li#topic-5 a,
body.topic-6 #page-column li#topic-6 a
{
background: #e9e9df;
}
and replace that whole chunk of code with just this...
{
background: #e9e9df;
}
All finished, to review if the variable thisTopic has the string Topic Three the link Topic Three will turn on.