Methods of marking a menu with the current page.

M

Mike Barnard

Hi.

Following on from my last thread about coding, I find myself asking
what is the best way to do the 'current page' thing on a menu so I can
include it with PHP. Once I've learned about PHP. In my
early-stage-of-design site I am naming the page body with an 'id',
then changing the id of a menu item so that CSS changes the look of
it.

I think. (I'll go back and have a look in a minute).

www.thermachek.com/temp/

Anyway, if I go the PHP route what I'll need is a menu that can be cut
and pastedand included and *not* need tweaking (by changing the menu
item that is 'current') for each page. Can anyone point me to the URL
of a tutorial for such a menu system or give me the name of such so I
can look it up please?

Ta muchly in advance.
 
A

Adrienne Boswell

Gazing into my crystal ball I observed Mike Barnard
Hi.

Following on from my last thread about coding, I find myself asking
what is the best way to do the 'current page' thing on a menu so I can
include it with PHP. Once I've learned about PHP. In my
early-stage-of-design site I am naming the page body with an 'id',
then changing the id of a menu item so that CSS changes the look of
it.

I think. (I'll go back and have a look in a minute).

www.thermachek.com/temp/

Anyway, if I go the PHP route what I'll need is a menu that can be cut
and pastedand included and *not* need tweaking (by changing the menu
item that is 'current') for each page. Can anyone point me to the URL
of a tutorial for such a menu system or give me the name of such so I
can look it up please?

Ta muchly in advance.

Here a little function I use for that. In this example, if you view
source, you would see that index.php would have the thispage class.
The function compares the $link and $thisurl variables and if they
match, then it inserts class in the a element, otherwise it does not.

<?php
//top of page
$thispage = "Welcome to My Website";
$thisurl = "index.php";
?>


<ul>
<li><?php nav("Home","index.php",$thisurl)?></li>
<li><?php nav("Contact","contact.php",$thisurl)?></li>
</ul>

<?php
function nav($link,$page,$thisurl)
{

if($thisurl == $link)
{echo "<a href=\"".$link."\" class=\"thispage\">".$page."</a>";}
else
{echo "<a href=\"".$link."\">".$page."</a>";}

}
?>

You could also put the page titles/urls into an array and loop through
it.

The $thispage and $thisurl variables can also be used elsewhere, for
example, the title element, eg: <title><?php echo $thispage ?></title>

I have a file called masterfunctions.php that has the nav function and
others. I put the doctype and most of the head elements in an include I
call linkrel.php (which includes that masterfunctions.php file and also
a connection to the db).
 
A

Adrienne Boswell

I have a file called masterfunctions.php that has the nav function and
others. I put the doctype and most of the head elements in an include I
call linkrel.php (which includes that masterfunctions.php file and also
a connection to the db).

Very important. If you are using a database, make sure you close/destroy
the connection to the db at the end of the page. I put this in an include
file I call footer_inc.php that has copyright info, etc.
 
A

Andy Dingley

I find myself asking what is the best way to do the 'current page' thing on a menu

There are two popular ways of doing this, both commonly discussed.
These might be a start:
<http://groups.google.co.uk/group/alt.html/msg/02f8d7fd1fc1f927>
<http://groups.google.co.uk/group/alt.html/msg/53a3118c1d34aec8>

* Use class not id. This tends to make CSS life simpler.

* You can do this by putting class="current" _differently_ onto each
page (can't be done with static boilerplate) or by identifying each
page / menu item and tyoing them together through CSS selectors
(requires you to update the CSS as well when you change the menu
boilerplate).

I can include it with PHP.

PHP is overkill for this (but usable). A database is so far too much
it's harmful.

Assuming a "simple" site (i.e. single level menu that varies over
time) then you don't need a database. Instead use SSI (Google it) and
simple boilerplate inclusion of HTML fragments into your pages. PHP
has a similar include mechanism. If you're already using PHP, you
might find that just as simple to use. You don't _need_ PHP though.

Don't even think about any "dynamic" PHP option or database option
until you've both built it the simple static way, and also you have
enough pages that you can no longer use a simple one-level menu.
 
J

Jonathan N. Little

Mike said:
Hi.

Following on from my last thread about coding, I find myself asking
what is the best way to do the 'current page' thing on a menu so I can
include it with PHP. Once I've learned about PHP. In my
early-stage-of-design site I am naming the page body with an 'id',
then changing the id of a menu item so that CSS changes the look of
it.

I think. (I'll go back and have a look in a minute).

www.thermachek.com/temp/

Anyway, if I go the PHP route what I'll need is a menu that can be cut
and pastedand included and *not* need tweaking (by changing the menu
item that is 'current') for each page. Can anyone point me to the URL
of a tutorial for such a menu system or give me the name of such so I
can look it up please?

Ta muchly in advance.


Well with a simple site like yours with 1/2 dozen on so pages you could
easily do it with an array and simple stylesheet. With the php when the
"page"=="the menu link" don't make it a link and have that as your "on
Page indicator"

simple include menu php called "menu.php":

<?php
// Make a generic array for menu
$menu=array();
// And fill it with your sites page info
$menu[]=array('href' => '/', 'text' => 'Home');
$menu[]=array('href'=>'/law.php', 'text'=>'The Law');
$menu[]=array('href'=>'/diy.php', 'text'=>'How to DIY');
$menu[]=array('href'=>'/hire.php', 'text'=>'Hire Me');
$menu[]=array('href'=>'/links.php', 'text'=>'Links');
$menu[]=array('href'=>'/contact.php', 'text'=>'Contact');

//Get the index of the page we are on
$onIdx=pageIndex($menu);

// build the menu start UL
$buf='<ul class="menu">';

// iterate array to build menu
for($i=0, $ii=count($menu); $i<$ii; $i++){
$buf.='<li>'; // start LI
if($i==$onIdx){ //Non-link on this page
$buf.='<span>' . $menu[$i]['text'] . '</span>';
}
else { // build link
$buf.='<a href="' . $menu[$i]['href'] . '">';
$buf.=$menu[$i]['text'] . '</a>';
}
$buf.='</li>'; // close LI
}
$buf.='</ul>'; // close UL
echo $buf; // write menu

//function to determine what page you are on and return array index#
function pageIndex($menu){
$idx=0;
$here=parse_url($_SERVER['REQUEST_URI']);
for($i=0, $ii=count($menu); $i<$ii; $i++){
if($here['path']==$menu[$i]['href']){
$idx=$i;
break;
}
}
return $idx;
}
?>

Style sheet for menu:

ul.menu {
list-style: none; font-family: sans-serif;
margin: 0; padding: 0; width: 10em;
}

/* Make A & SPANS block to fill space */
ul.menu li a,
ul.menu li span {
display: block; padding: .25em; border: 1px solid #666;
}

/* Your on page indicator the SPAN */
ul.menu li span {
color: #fff; background-color: #a00;
}

/* live links in menu */
ul.menu li a {
color: #000; background-color: #79cafd; text-decoration: none;
}

ul.menu li a:hover,
ul.menu li a:focus {
background-color: #6297c8;
}


Then in your page where you want to inset your menu...

<?php include('menu.php'); ?>

That's all folk...
 
J

Jeff

Jonathan said:
Well with a simple site like yours with 1/2 dozen on so pages you could
easily do it with an array and simple stylesheet. With the php when the
"page"=="the menu link" don't make it a link and have that as your "on
Page indicator"

simple include menu php called "menu.php":

Nicely done, Jonathan!

Jeff
<?php
// Make a generic array for menu
$menu=array();
// And fill it with your sites page info
$menu[]=array('href' => '/', 'text' => 'Home');
$menu[]=array('href'=>'/law.php', 'text'=>'The Law');
$menu[]=array('href'=>'/diy.php', 'text'=>'How to DIY');
$menu[]=array('href'=>'/hire.php', 'text'=>'Hire Me');
$menu[]=array('href'=>'/links.php', 'text'=>'Links');
$menu[]=array('href'=>'/contact.php', 'text'=>'Contact');

//Get the index of the page we are on
$onIdx=pageIndex($menu);

// build the menu start UL
$buf='<ul class="menu">';

// iterate array to build menu
for($i=0, $ii=count($menu); $i<$ii; $i++){
$buf.='<li>'; // start LI
if($i==$onIdx){ //Non-link on this page
$buf.='<span>' . $menu[$i]['text'] . '</span>';
}
else { // build link
$buf.='<a href="' . $menu[$i]['href'] . '">';
$buf.=$menu[$i]['text'] . '</a>';
}
$buf.='</li>'; // close LI
}
$buf.='</ul>'; // close UL
echo $buf; // write menu

//function to determine what page you are on and return array index#
function pageIndex($menu){
$idx=0;
$here=parse_url($_SERVER['REQUEST_URI']);
for($i=0, $ii=count($menu); $i<$ii; $i++){
if($here['path']==$menu[$i]['href']){
$idx=$i;
break;
}
}
return $idx;
}
?>

Style sheet for menu:

ul.menu {
list-style: none; font-family: sans-serif;
margin: 0; padding: 0; width: 10em;
}

/* Make A & SPANS block to fill space */
ul.menu li a,
ul.menu li span {
display: block; padding: .25em; border: 1px solid #666;
}

/* Your on page indicator the SPAN */
ul.menu li span {
color: #fff; background-color: #a00;
}

/* live links in menu */
ul.menu li a {
color: #000; background-color: #79cafd; text-decoration: none;
}

ul.menu li a:hover,
ul.menu li a:focus {
background-color: #6297c8;
}


Then in your page where you want to inset your menu...

<?php include('menu.php'); ?>

That's all folk...
 
D

dorayme

Jeff said:
Nicely done, Jonathan!

Jeff

Jeff, as you are a pretty regular poster here now, would you
consider not quoting the whole of a post to say things like
nicely done? No need to leave in the whole lot of code supplied
by Jonathan. I hope you are not offended by this being said.
 
J

Jeff

Jeff said:
Nicely done, Jonathan!


I'd like to add just one little idea for the OP to consider.

Typically a site will have more than one section, as I believe the OP
referred to. You can add section info to the array. Then you can build
different menus depending on what section you are in (with some script
mods of course). That way you have just one "include" for all your sub
navs instead of several. In effect what you have is a little database
table made out of hashes. You can even move the $menu part to a separate
file and maintain just that. If you do that you have a menu routine you
can reuse in other sites "as is" as the data is separate.

Jeff
Jeff
<?php
// Make a generic array for menu
$menu=array();
// And fill it with your sites page info
$menu[]=array('href' => '/', 'text' => 'Home');
$menu[]=array('href'=>'/law.php', 'text'=>'The Law');
$menu[]=array('href'=>'/diy.php', 'text'=>'How to DIY');
$menu[]=array('href'=>'/hire.php', 'text'=>'Hire Me');
$menu[]=array('href'=>'/links.php', 'text'=>'Links');
$menu[]=array('href'=>'/contact.php', 'text'=>'Contact');

//Get the index of the page we are on
$onIdx=pageIndex($menu);

// build the menu start UL
$buf='<ul class="menu">';

// iterate array to build menu
for($i=0, $ii=count($menu); $i<$ii; $i++){
$buf.='<li>'; // start LI
if($i==$onIdx){ //Non-link on this page
$buf.='<span>' . $menu[$i]['text'] . '</span>';
}
else { // build link
$buf.='<a href="' . $menu[$i]['href'] . '">';
$buf.=$menu[$i]['text'] . '</a>';
}
$buf.='</li>'; // close LI
}
$buf.='</ul>'; // close UL
echo $buf; // write menu

//function to determine what page you are on and return array index#
function pageIndex($menu){
$idx=0;
$here=parse_url($_SERVER['REQUEST_URI']);
for($i=0, $ii=count($menu); $i<$ii; $i++){
if($here['path']==$menu[$i]['href']){
$idx=$i;
break;
}
}
return $idx;
}
?>

Style sheet for menu:

ul.menu {
list-style: none; font-family: sans-serif;
margin: 0; padding: 0; width: 10em;
}

/* Make A & SPANS block to fill space */
ul.menu li a,
ul.menu li span {
display: block; padding: .25em; border: 1px solid #666;
}

/* Your on page indicator the SPAN */
ul.menu li span {
color: #fff; background-color: #a00;
}

/* live links in menu */
ul.menu li a {
color: #000; background-color: #79cafd; text-decoration: none;
}

ul.menu li a:hover,
ul.menu li a:focus {
background-color: #6297c8;
}


Then in your page where you want to inset your menu...

<?php include('menu.php'); ?>

That's all folk...
 
A

Adrienne Boswell

Gazing into my crystal ball I observed dorayme
<[email protected]
m>,


Why is class for a unique current per page simpler?

Because you might want to reuse it. For example, say you have
navigation in two places on the same page, maybe Contact in navigation
and Contact in the footer, and you are on the contact page. So maybe
#nav .thispage would be styled differently than #footer .thispage.
 
D

dorayme

Adrienne Boswell said:
Why is class for a unique current per page simpler?

Because you might want to reuse it. For example, say you have
navigation in two places on the same page, maybe Contact in navigation
and Contact in the footer, and you are on the contact page. So maybe
#nav .thispage would be styled differently than #footer .thispage.[/QUOTE]

Good point, Adrienne.
 
E

Ed Mullen

dorayme said:
Because you might want to reuse it. For example, say you have
navigation in two places on the same page, maybe Contact in navigation
and Contact in the footer, and you are on the contact page. So maybe
#nav .thispage would be styled differently than #footer .thispage.

Good point, Adrienne.
[/QUOTE]

So, the next obvious question is:

Why use ID at all? When is it advantageous to use a non-reusable
selector vs a re-usable one? What does ID do that CLASS doesn't?

--
Ed Mullen
http://edmullen.net
Why is it that the guy who comes up behind you while you're waiting for
an elevator presses the already lit button as though he has some magical
powers that you don't?
 
D

dorayme

Ed Mullen said:
So, the next obvious question is:

Why use ID at all? When is it advantageous to use a non-reusable
selector vs a re-usable one? What does ID do that CLASS doesn't?

For current, for example! To let me know that it is a unique
thing per page. While I said Adriennes's point was good, this
does not mean do not use id for current. It just means that it
has the slight disadvantage that you might later want a few
things highlighted via php on the page (it is not the end of the
world as we know it to change it to class when that happens and
thus further alerting oneself in one's own practice that there is
more than one link being highlighted via current.

The advantages for id where you don't essentially need it (as in
locating a unique bit of a page for a link) are author
information, author management. Making something an id rather
than a class is information that is lost by using class. It's
strength is its weakness.
 
R

rf

Ed Mullen said:
So, the next obvious question is:

Why use ID at all? When is it advantageous to use a non-reusable selector
vs a re-usable one? What does ID do that CLASS doesn't?

Allows one to use getElementById?
 
B

Bergamot

rf said:
Allows one to use getElementById?

But if you aren't doing any manipulation in JavaScript, there's no
advantage to using ID over class. The only other thing that comes to
mind is using ID as an anchor within the page, but how often do you
really need one?

Use a class selector instead unless you have a real need for an ID. It
will make your CSS life easier.
 
E

Ed Mullen

dorayme said:
For current, for example! To let me know that it is a unique
thing per page. While I said Adriennes's point was good, this
does not mean do not use id for current.

What do you mean by "current?" I don't get that.
It just means that it
has the slight disadvantage that you might later want a few
things highlighted via php on the page (it is not the end of the
world as we know it to change it to class when that happens and
thus further alerting oneself in one's own practice that there is
more than one link being highlighted via current.

Yeah, but I still don't get the benefit of using a non-re-usable
selector when the re-usable selector does the same thing. That's what
I'm asking about.
The advantages for id where you don't essentially need it (as in
locating a unique bit of a page for a link) are author
information, author management. Making something an id rather
than a class is information that is lost by using class. It's
strength is its weakness.

How is it lost? I can search for - id="foo" as easily as I can search
for - class="foo", right? What is "lost" in the composition or
rendering of a page?


I just don't get the functional difference. Nor the practical difference.

If I use class once or id once, what's the difference? If I use id once
I can't use it again. How do they function differently and why does it
matter? Other than getting an error for using an id more than once in a
page?


Excuse me now, I must go and put on pants as my butt is chilly after
having exposed my ignorance. However, I seek information and knowledge
and am eager to garner both. Hopefully my quest will be fruitful. Or,
uh, fruit-filled. Or, um, applesauce. Or something.
 
N

Neredbojias

But if you aren't doing any manipulation in JavaScript, there's no
advantage to using ID over class. The only other thing that comes to
mind is using ID as an anchor within the page, but how often do you
really need one?

Use a class selector instead unless you have a real need for an ID. It
will make your CSS life easier.

That's like saying if you don't enjoy living, what's the advantage of life
over death?

There is the _potential_ for other things. Javascript to be sure, frames,
and even css priorities come into play. I'd say "id" has a definite place
in the scheme of things.
 
A

Adrienne Boswell

That's like saying if you don't enjoy living, what's the advantage of
life over death?

There is the _potential_ for other things. Javascript to be sure,
frames, and even css priorities come into play. I'd say "id" has a
definite place in the scheme of things.

The example below shows use of id. Upon submission, the script looks
for empty fields, and dynamically creates the CSS based on the name of
the field, in this case firstname. IMHO implementing this with class
would be a lot more difficult.

<style type="text/css">
#firstname {background-color: pink}
#firstname1 {background-color: yellow; color: red;}
</style>
</head>
<body>
<form method="post" action="thispage">
<fieldset><legend>Using id and class</legend>
<label for="firstname" id="firstname1">First Name: </label>
<input type="text" name="firstname" id="firstname" value="">
<label for="lastname" id="lastname1">Last Name: </label>
<input type="text" name="lastname" id="lastname" value="Boswell"><br>
<input class="submit" value="submit" type="submit">
</form>
 
T

Toby A Inkster

Ben said:
I think a getElementsByClassName has been proposed, but might not be
standard yet.

Would be handy. It's easy enough to implement yourself
(getElementsByTagName('*'), loop, getAttribute('class'), split by
whitespace, compare) but a native DOM version would probably be faster (as
it would be compiled and optimised).

--
Toby A Inkster BSc (Hons) ARCS
[Geek of HTML/SQL/Perl/PHP/Python/Apache/Linux]
[OS: Linux 2.6.17.14-mm-desktop-9mdvsmp, up 42 days, 16:28.]

The Semantic Web
http://tobyinkster.co.uk/blog/2008/03/09/sw/
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,743
Messages
2,569,478
Members
44,898
Latest member
BlairH7607

Latest Threads

Top