2 replies [Last post]
Toronto, Canada
Last seen: 18 years 14 weeks ago
Toronto, Canada
Timezone: GMT-5
Joined: 2004-11-01
Posts: 2
Points: 0

Easy way of doing on and off state.

This is more of a scripting question but I am sure it will address a common problem that most of us face frequently.

When we have some navigation bar we usually want to highlight the section/page visitor is on somehow. On this example I am doing this by using different colors via CSS (this can be done with a javascript as well)

My challenge is to find a better way to print on and off state.

Currently I repeat two entries per link by using if/else conditions. As the navigation items grow(ie tabs) it becomes too cumbersome list each item in pairs. Is there an easier way of doing this by not repeating the whole line twice?

What is your approach on situations like these?


<div id="navcontainer">

<ul id="navlist">
    echo "<li id=\"active\"><a id=\"active\" href=\"index.php\" title=\"Home\">HOME</a></li>";
    echo "<li><a href=\"index.php\" title=\"Home\">HOME</a></li>";
    echo "<li id=\"active\"><a id=\"active\" href=\"section.php?section=CA\" title=\"Courthouse\">COURTHOUSE</a></li>";
    echo "<li><a href=\"section.php?section=CA\" title=\"Courthouse\">COURTHOUSE</a></li>";

    echo "<li id=\"active\"><a id=\"active\" href=\"section1.php?section=CLE\" title=\"College\">COLLEGE</a></li>";
    echo "<li><a href=\"section1.php?section=CLE\" title=\"College\">COLLEGE</a></li>";
   echo "<li id=\"active\"><a id=\"active\" href=\"section.php?section=NEWS\" title=\"NewsRoom\">NEWSROOM</a></li>";
    echo "<li><a href=\"section.php?section=NEWS\" title=\"NewsRoom\">NEWSROOM</a></li>";


Hugo's picture
Last seen: 8 years 4 weeks ago
Joined: 2004-06-06
Posts: 15668
Points: 2806

Easy way of doing on and off state.

Yatko, as you say more of a scripting question than css and would probably sit better in the 'Off Topic' section to which I'll move it.

I've used that php script and it does tend to become cumbersome, you could try a technique seen around and mentioned recently by rmfred in a post that uses an id in the body tag of each page and descendent selectors to set the active page state thus moving the styling to the css you could then just keep the php nav script to a simple one line menu item without 'else' statement.

I am thinking myself that the php script above is too basic and rapidly becomes unwieldily and am looking at possibly array methods being a better bet, but at this stage haven't progressed it very far.

Some of the others may have a better take on how to improve the php script


Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

rmfred's picture
Rock Springs, WY
Last seen: 4 years 17 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

Easy way of doing on and off state.

Let me preface this by saying I know nothing of PHP so I'm not really sure what you are wanting to do... but, as Hugo mentioned a technique that I recently posted as being a possible solution, then maybe I can help with your scripting.... I've done something which I believe is similar in ASP... you will have to convert it to PHP
I am using a DB to store the page url and pagenames...
Here is the ASP code... a single apostrophe is a comment
the code is a little old... as I am not putting the data into an array which would be preferable... but there are only a few items in the DB so it is not a problem...

' get name of current page ...
curPage = LCASE( Request.ServerVariables("SCRIPT_NAME") )
' the database query which gets the URL PageName from the
'table called SecNav
Sqltext = ("SELECT url, PageName FROM SecNav") ' or whatever
'this opens a recordset
rst.Open sqltext,cnn,3,3
'this looks thru DB and returrns the items
Do Until rst.EOF
pname = rst("PageName")
url = LCase( rst("url") )
If url <> curPage Then
<p class="button">
<a href="<%=url%>"><%=pname%></a></p>
<p class="clickedbutton"><%=pname%></p>
End If

This nav scheme uses buttons.. hence the class names.. so in essence the script looks to see if the url is not equal to current page
and displays the "normal" nav button CSS
else it displays the clickedbutton nav CSS
.clickedbutton {color:#f00; font-weight:bold; text-align:center; text-transform:uppercase;}
and a "normal" button would have color:#fff; and not be uppercase

Hope this helps