included menu in every page [Archive]

remp

01-03-2008, 04:48 AM

Ok, here's my situation... i have a website and i want to create a file called "header.php" and then include it on every page, but how can i put a menu like this one (http://dynamicdrive.com/dynamicindex1/droptabmenu.htm) on that header and make it for example if im on contact us, make the contac us tab selected and if the index.php, that tab selected?
i hope you understand and can help me....:)

djr33

01-03-2008, 05:36 AM

Include the same .js scripts on each page. Then use <?php include('header.php'); ?> to include any needed html.

remp

01-03-2008, 06:40 AM

Thanks for responding, but i already have done that, and it is working but i don't know how to set the menu tab to be selected for each page:

<li><a href="index.php" class="current" title="">Home</a></li>
<li><a href="Classes.html" title="">Classes</a></li>

<li><a href="products.php" title="">Products</a></li>

If you see that class="current" is when im on the home page, then if i want it to be selected when im on the "products" page for example, i have to put the class="current" on that page:

<li><a href="index.php" title="">Home</a></li>
<li><a href="Classes.html" title="">Classes</a></li>

<li><a href="products.php" class="current"title="">Products</a></li>

But how can i do that when i only have on code that im including on every page? in other words, how can I have the appropriate menu selection stay active when the corresponding page from the include page loads? i hope i have explained myself better this time

afe

01-03-2008, 06:44 AM

hehe, same question I have.

BLiZZaRD

01-03-2008, 07:06 AM

No, you just set the onClick to set it as current.

for a better idea see this (http://www.paulbellows.com/getsmart/set_active/)

afe

01-03-2008, 07:47 PM

I think he wants to have his "currents" on his menus done automatically. Like my post, http://www.dynamicdrive.com/forums/showthread.php?t=28042

remp

01-03-2008, 11:30 PM

ok. i got the script, i include it on the header page, but how do i set it on the menu? in other words how do i set the onclick function?

BLiZZaRD

01-04-2008, 03:35 AM

Through the CSS:

#menu a.active {color:red;}
#content a.active {color:#333;}
#footer a.active {text-decoration:underline;}

The page should find itself, so to speak.

afe

01-04-2008, 11:06 PM

Hey Blizzard, can you tell me how I would work it out with my menu? http://www.athletes4excellence.com/layout.php

BLiZZaRD

01-05-2008, 05:39 PM

Okay, your's afe, won't work with #nogo as the link source, so a single test page won't happen for you. Your's is hard coded into the nav menu you have. Currently the "Cross Country" link is "active" and you can see this in the source:

<ul class="current">
<li><a href="#nogo"><b>Cross Country </b></a>


<div class="select_sub show">
<ul class="sub">
<li><a href="#nogo">The Hay Wain</a></li>
<li><a href="#nogo">Brighton Beach</a></li>
<li><a href="#nogo">Malvern Hall</a></li>
<li class="sub_show"><a href="#nogo">Salisbury Cathedral</a></li>
<li><a href="#nogo">Weymouth Bay</a></li>

</ul>
</div>

</li>
</ul>

This is the code for the Cross Country button. Notice the part i red? Let's look at the next button's code...

<ul class="select">
<li><a href="#nogo"><b>Soccer</b></a>

<div class="select_sub">
<ul class="sub">
<li><a href="#nogo">The Girl with Green Eyes</a></li>

<li><a href="#nogo">The Dream</a></li>
<li><a href="#nogo">Woman in Blue</a></li>
<li><a href="#nogo">The Yellow Dress</a></li>
<li><a href="#nogo">The Piano Lesson</a></li>
</ul>
</div>

</li>

</ul>

See the difference? On the page that you go to you will need to change "select" to "current" for each respective link.

afe

01-06-2008, 12:40 AM

Yup, I know that. 1) However, is there an automatic way setting the currents?

2) Let's say in the future I need to change something, how do I change the currents without changing it on every single page manually?

Please and thank you.

tech_support

01-06-2008, 02:31 AM

Make yourself a PHP template.

euphoriastudio

01-06-2008, 02:39 AM

oh finally! i'm needing help on the exact same thing. but rather than using PHP i'm using SSI. this is the link to my thread:
http://www.dynamicdrive.com/forums/showthread.php?t=28136
can anyone help?

afe

01-06-2008, 04:09 AM

How do I use or make or get a PHP Template? Thanks.

tech_support

01-06-2008, 04:13 AM

Let's say you have your menu code something like this...

<ul>
<li><a href="?p=home">Home</a></li>
<li><a href="?p=link2">Link 2</a></li>
</ul>

...on every page. Create a new file called "menu.php", and put your menu code in that, and ONLY your menu code. no <head> <body> etc.

And on every page, put:

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

Where you'd like your menu to be. Replace it on every page with your menu code (except menu.php)

And test it out.

afe

01-06-2008, 06:50 PM

Yes, I have exactly same thing, however, how would I change on what pages the current appears when I have "<?php include('menu.php'); ?>"?

tech_support

01-07-2008, 02:10 AM

How are your menu links set up? I can't give you a solution without your menu code.

afe

01-08-2008, 03:40 AM

So Blizzard, if I were to have a complete website with that menu (not just one test page), I would be able to set the currents and change them on anypage that I want? I'm not sure how it works. Please and thank you!

BLiZZaRD

01-09-2008, 01:40 AM

That is exactly correct. You place that code on each page you want the menu to be on. Then in each page you set the current to the page name that it is. Just like it is now, changing current to the page that is current and removing the current from the page it is not. That's it.

afe

01-09-2008, 02:06 AM

Thanks, what do I do after I have all my pages set up?

BLiZZaRD

01-09-2008, 02:33 AM

open the page in notepad, find the "current" and change it to "select" and find the "select" for the page it is and change it to "current"

emminar

01-10-2008, 12:13 AM

Lemme get this straight. Okay. You want to use something like include on top of every page to include a menu. But the problem is, if you do an include, the current tab would be the same on every page.

If that is your problem, you could easily do it with variables:

The menu (included) file:

<li><a href="index.php" class="current" title="" <? if ($page == "home") { echo 'class="current"'; } ?>>Home</a></li>
<li><a href="Classes.html" title="" <? if ($page == "classes") { echo 'class="current"'; } ?>>Classes</a></li>
<li><a href="products.php" title="" <? if ($page == "products") { echo 'class="current"'; } ?>>Products</a></li>

And on the current page, put at the very top:

<?php $page = "whateverpageuron"; ?>

You should change the variable "page" to match the current page.

That way you can include the page and still have it change to what page it is on.

Hope that helps!

Emminar

BLiZZaRD

01-10-2008, 12:58 AM

Close, but the class of current is on a div, and select is on a div inside the first. Your option would work, but the "class" in this case isn't on the li. ;)

emminar

01-10-2008, 01:09 AM

Close, but the class of current is on a div, and select is on a div inside the first. Your option would work, but the "class" in this case isn't on the li. ;)

I just modified what was on the first page :)

afe

01-15-2008, 01:49 AM

Lemme get this straight. Okay. You want to use something like include on top of every page to include a menu. But the problem is, if you do an include, the current tab would be the same on every page.

If that is your problem, you could easily do it with variables:

The menu (included) file:

<li><a href="index.php" class="current" title="" <? if ($page == "home") { echo 'class="current"'; } ?>>Home</a></li>
<li><a href="Classes.html" title="" <? if ($page == "classes") { echo 'class="current"'; } ?>>Classes</a></li>
<li><a href="products.php" title="" <? if ($page == "products") { echo 'class="current"'; } ?>>Products</a></li>

And on the current page, put at the very top:

<?php $page = "whateverpageuron"; ?>

You should change the variable "page" to match the current page.

That way you can include the page and still have it change to what page it is on.

Hope that helps!

Emminar

Would this work?

BLiZZaRD

01-15-2008, 02:36 PM

If you put thispart:

<? if ($page == "home") { echo 'class="current"'; } ?>

on the div instead of the anchor... perhaps.

afe

01-15-2008, 08:43 PM

What do you mean by "on the div instead of the anchor... "? Please and thank you!

BLiZZaRD

01-16-2008, 02:39 PM

in your menu code you have a current attribute set to a div tag (<div class="current"> ) In the example above the php code is used on an anchor (<a href="...">) tag.

That example might work if you take the code out ofthe anchor tag and place it on the div tag.

afe

01-17-2008, 01:03 AM

<div class="nav">
<div class="table">

<ul class="select"><li><a href="#nogo"><b>Home</b>
</a></li></ul>

<ul class="select">
<li><a href="#nogo"><b>Track and Field </b></a>

<div class="select_sub">
<ul class="sub">
<li><p><strong>Track and Field Menu: </strong></p></li>
<li><a href="asdfasdf">Videos</a></li>
<li>Event & Race Videos </li>
<li>Pictures</li>
<li></li>
</ul>
</div>

</li>
</ul>

<ul class="current">
<li><a href="#nogo"><b>Cross Country </b></a>

<div class="select_sub show">
<ul class="sub">
<li><a href="http://www.athletes4excellence.com/TESTPAGEPAPDKDJFDLKJFLDKSJDLKFJ:SDKJFSLDKJF:SKJF:SLKJF:SLKJF:SJFS:DKJF:KDJF:SLKJFSLDKJF">The Hay Wain</a></li>
<li><a href="#nogo">Brighton Beach</a></li>
<li><a href="#nogo">Malvern Hall</a></li>
<li class="sub_show"><a href="#nogo">Salisbury Cathedral</a></li>
<li><a href="#nogo">Weymouth Bay</a></li>
</ul>
</div>

</li>
</ul>

<ul class="select">
<li><a href="#nogo"><b>Soccer</b></a>

<div class="select_sub">
<ul class="sub">
<li><a href="#nogo">The Girl with Green Eyes</a></li>
<li><a href="#nogo">The Dream</a></li>
<li><a href="#nogo">Woman in Blue</a></li>
<li><a href="#nogo">The Yellow Dress</a></li>
<li><a href="#nogo">The Piano Lesson</a></li>
</ul>
</div>

</li>
</ul>

<ul class="select">
<li><a href="#nogo"><b>Basketball</b></a>

<div class="select_sub">
<ul class="sub">
<li><a href="#nogo">The Large Bathers</a></li>
<li><a href="#nogo">Onions and Bottles</a></li>
<li><a href="#nogo">Mardi Gras</a></li>
<li><a href="#nogo">Still Life</a></li>
<li><a href="#nogo">Boy in a Red Waistcoat</a></li>
</ul>
</div>

</li>
</ul>
<ul class="select">
<li><a href="#nogo"><b>Volleyball</b></a>

<div class="select_sub">
<ul class="sub">
<li><a href="#nogo">The Large Bathers</a></li>
<li><a href="#nogo">Onions and Bottles</a></li>
<li><a href="#nogo">Mardi Gras</a></li>
<li><a href="#nogo">Still Life</a></li>
<li><a href="#nogo">Boy in a Red Waistcoat</a></li>
</ul>
</div>

</li>
</ul>
<ul class="select">
<li><a href="#nogo"><b>Games</b></a>

<div class="select_sub">
<ul class="sub">
<li><a href="#nogo">The Large Bathers</a></li>
<li><a href="#nogo">Onions and Bottles</a></li>
<li><a href="#nogo">Mardi Gras</a></li>
<li><a href="#nogo">Still Life</a></li>
<li><a href="#nogo">Boy in a Red Waistcoat</a></li>
</ul>
</div>

</li>
</ul>

<ul class="select">
<li><a href="#nogo"><b>Gallery</b></a>

<div class="select_sub">
<ul class="sub">
<li><a href="#nogo">The Large Bathers</a></li>
<li><a href="#nogo">Onions and Bottles</a></li>
<li><a href="#nogo">Mardi Gras</a></li>
<li><a href="#nogo">Still Life</a></li>
<li><a href="#nogo">Boy in a Red Waistcoat</a></li>
</ul>
</div>

</li>
</ul>

<ul class="select">
<li><a href="#nogo"><b>Forums</b></a>

<div class="select_sub">
<ul class="sub">
<li><a href="#nogo">The Large Bathers</a></li>
<li><a href="#nogo">Onions and Bottles</a></li>
<li><a href="#nogo">Mardi Gras</a></li>
<li><a href="#nogo">Still Life</a></li>
<li><a href="#nogo">Boy in a Red Waistcoat</a></li>
</ul>
</div>

</li>
</ul>
<ul class="select">
<li><a href="#nogo"><b>Links</b></a>

<div class="select_sub">
<ul class="sub">
<li><a href="#nogo">The Large Bathers</a></li>
<li><a href="#nogo">Onions and Bottles</a></li>
<li><a href="#nogo">Mardi Gras</a></li>
<li><a href="#nogo">Still Life</a></li>
<li><a href="#nogo">Boy in a Red Waistcoat</a></li>
</ul>
</div>

</li>
</ul>

</div>
</div>

Ok, that's the code menu, how would I make it? Please and thank you.

Wrapped the code in
tags

tech_support

01-17-2008, 02:13 AM

Why don't you try doing it by yourself? At least an attempt?

BLiZZaRD

01-18-2008, 05:53 PM

<ul class="current">

See that? Change it to "select" then for the page the menu is on currently find the "select" and change it to "current". Change that on every page.

afe

01-18-2008, 09:35 PM

<div class="nav">
<div class="table">

<ul class="select"><li><a href="#nogo"><b>Home</b>
</a></li></ul>

<ul class="select">
<li><a href="#nogo"><b>Track and Field </b></a>

<div class="select_sub">
<ul class="sub">
<li><p><strong>Track and Field Menu: </strong></p></li>
<li><a href="asdfasdf">Videos</a></li>
<li>Event & Race Videos </li>
<li>Pictures</li>
<li></li>
</ul>
</div>

</li>
</ul>

<ul class="select">
<li><a href="#nogo"><b>Cross Country </b></a>

<div class="select_sub show">
<ul class="sub">
<li><a href="http://www.athletes4excellence.com/TESTPAGEPAPDKDJFDLKJFLDKSJDLKFJ:SDKJFSLDKJF:SKJF:SLKJF:SLKJF:SJFS:DKJF:KDJF:SLKJFSLDKJF">The Hay Wain</a></li>
<li><a href="#nogo">Brighton Beach</a></li>
<li><a href="#nogo">Malvern Hall</a></li>
<li class="sub_show"><a href="#nogo">Salisbury Cathedral</a></li>
<li><a href="#nogo">Weymouth Bay</a></li>
</ul>
</div>

</li>
</ul>

<ul class="select">
<li><a href="#nogo"><b>Soccer</b></a>

<div class="select_sub">
<ul class="sub">
<li><a href="#nogo">The Girl with Green Eyes</a></li>
<li><a href="#nogo">The Dream</a></li>
<li><a href="#nogo">Woman in Blue</a></li>
<li><a href="#nogo">The Yellow Dress</a></li>
<li><a href="#nogo">The Piano Lesson</a></li>
</ul>
</div>

</li>
</ul>

<ul class="select">
<li><a href="#nogo"><b>Basketball</b></a>

<div class="select_sub">
<ul class="sub">
<li><a href="#nogo">The Large Bathers</a></li>
<li><a href="#nogo">Onions and Bottles</a></li>
<li><a href="#nogo">Mardi Gras</a></li>
<li><a href="#nogo">Still Life</a></li>
<li><a href="#nogo">Boy in a Red Waistcoat</a></li>
</ul>
</div>

</li>
</ul>
<ul class="select">
<li><a href="#nogo"><b>Volleyball</b></a>

<div class="select_sub">
<ul class="sub">
<li><a href="#nogo">The Large Bathers</a></li>
<li><a href="#nogo">Onions and Bottles</a></li>
<li><a href="#nogo">Mardi Gras</a></li>
<li><a href="#nogo">Still Life</a></li>
<li><a href="#nogo">Boy in a Red Waistcoat</a></li>
</ul>
</div>

</li>
</ul>
<ul class="select">
<li><a href="#nogo"><b>Games</b></a>

<div class="select_sub">
<ul class="sub">
<li><a href="#nogo">The Large Bathers</a></li>
<li><a href="#nogo">Onions and Bottles</a></li>
<li><a href="#nogo">Mardi Gras</a></li>
<li><a href="#nogo">Still Life</a></li>
<li><a href="#nogo">Boy in a Red Waistcoat</a></li>
</ul>
</div>

</li>
</ul>

<ul class="select">
<li><a href="#nogo"><b>Gallery</b></a>

<div class="select_sub">
<ul class="sub">
<li><a href="#nogo">The Large Bathers</a></li>
<li><a href="#nogo">Onions and Bottles</a></li>
<li><a href="#nogo">Mardi Gras</a></li>
<li><a href="#nogo">Still Life</a></li>
<li><a href="#nogo">Boy in a Red Waistcoat</a></li>
</ul>
</div>

</li>
</ul>

<ul class="select">
<li><a href="#nogo"><b>Forums</b></a>

<div class="select_sub">
<ul class="sub">
<li><a href="#nogo">The Large Bathers</a></li>
<li><a href="#nogo">Onions and Bottles</a></li>
<li><a href="#nogo">Mardi Gras</a></li>
<li><a href="#nogo">Still Life</a></li>
<li><a href="#nogo">Boy in a Red Waistcoat</a></li>
</ul>
</div>

</li>
</ul>
<ul class="select">
<li><a href="#nogo"><b>Links</b></a>

<div class="select_sub">
<ul class="sub">
<li><a href="#nogo">The Large Bathers</a></li>
<li><a href="#nogo">Onions and Bottles</a></li>
<li><a href="#nogo">Mardi Gras</a></li>
<li><a href="#nogo">Still Life</a></li>
<li><a href="#nogo">Boy in a Red Waistcoat</a></li>
</ul>
</div>

</li>
</ul>

</div>
</div>
Is that right? Also, I don't understand when you mean "then for the page the menu is on currently find the "select" and change it to "current". Change that on every page." What would happen if I realize I have made mistake and need to fix it on all of my pages on my website? Please and thanks!

afe

01-23-2008, 04:28 AM

Please help.

BLiZZaRD

01-23-2008, 03:17 PM

Is that code correct? yes. It won't show which link on the menu is equal to the page you are on, as there is no current now, you removed them all.

I will try to explain this again... stay with me.. Let's say we have 2 pages, Home and Work.. When you go to Home then we want the menu to show that we are on Home and Not on Work. And we want the menu to show that we are on Work and not home when we are actually on the Work page.

For now we are on Home page:

<ul class="current">
<li><a href="#nogo"><b>Home</b></a>

<div class="select_sub">
<ul class="sub">
<li><p><strong>Home Sub Menu</strong></p></li>
<li><a href="asdfasdf">Doors</a></li>
<li>Windows </li>
<li>Pictures</li>
<li></li>
</ul>
</div>

</li>
</ul>

<ul class="select">
<li><a href="#nogo"><b>Work</b></a>

<div class="select_sub">
<ul class="sub">
<li><p><strong>Work Sub Menu:</strong></p></li>
<li><a href="asdfasdf">Work Files</a></li>
<li>Work Stuff </li>
<li>Workers</li>
<li></li>
</ul>
</div>

</li>
</ul>

By reading the code you can see that the name of the page (in green) is either the default "select" (this would be the pages we are NOT on) or it is the current page we are on (which is why it is called current). These are in red.

Now we browse from Home page to Work page.... let's look at how the code changes....

<ul class="select">
<li><a href="#nogo"><b>Home</b></a>

<div class="select_sub">
<ul class="sub">
<li><p><strong>Home Sub Menu</strong></p></li>
<li><a href="asdfasdf">Doors</a></li>
<li>Windows </li>
<li>Pictures</li>
<li></li>
</ul>
</div>

</li>
</ul>

<ul class="current">
<li><a href="#nogo"><b>Work</b></a>

<div class="select_sub">
<ul class="sub">
<li><p><strong>Work Sub Menu:</strong></p></li>
<li><a href="asdfasdf">Work Files</a></li>
<li>Work Stuff </li>
<li>Workers</li>
<li></li>
</ul>
</div>

</li>
</ul>

Now because we changed select to current and current to select (the red text) this will show us we are on the Work page.

Wash Rinse Repeat.

(no that line has NOTHING to do with the code, it means do the same thing for the rest of your code, repeat what I have told you and do it again to the rest)

afe

01-23-2008, 05:39 PM

I know all that. But let's say I've made my website, and I need to change one of the currents on a lot of pages and I do not want to do it manually. How do I do it automatically without changing it on every single page. Please and thank you.

boxxertrumps

01-24-2008, 06:08 PM

I'd say a script that recursively opens each file and str_replace the old menu to the new one. It's still a bit of work, though.

<?php
$cwd = $_SERVER['REQUEST_URI'];
$cwd = substr($cwd, 0, strrpos($cwd, '/' + 1));
function paintUndersideOfFox($c) {
global $cwd;
$d = opendir($c);
while($f = readdir($d)) {
if(strpos($f, '.') === 0) continue;
$ff = $c . '/' . $f;
if(is_dir($ff)) paintUndersideOfFox($ff);
else{
$htmlvar = file_get_contents($cwd . $ff);
$lolh4x = fopen($cwd . $ff, "w+");
$newhtmlvar = str_replace($oldmenustring, $newmenustring, $htmlvar);
fwrite($lolh4x, $newhtmlvar);
fclose($lolh4x);
echo "File $ff in directory $cwd rewritten.<br>/r/n"
}
}
}
paintUndersideOfFox('.');
?>

make sure to set $oldmenustring and $newmenustring as your old and new menus/specific menu entry.

If i had more time, i would have put in something to catch errors... Oh well.

EDIT: oh... this wouldn't be good for something specific to each page... Nevermind.
DOUBLEEDIT: This would be good for changing something that is the same on every page to something else... faster and more accurately than doing it manually

afe

01-24-2008, 06:36 PM

Ohh thanks! Umm, where do I put that code. Also, how does it work. Please and thank you.

boxxertrumps

01-24-2008, 07:28 PM

put the code in a seperate php file, then excecuted it once you have the menustring variables set to something...

say you have tons of these in your website

jihad means holy war
And want to change them all to

war holy means jihad

you'd have this:

<?php
$oldmenustring = "jihad means holy war";
$newmenustring = "war holy means jihad";

$cwd = $_SERVER['REQUEST_URI'];
$cwd = substr($cwd, 0, strrpos($cwd, '/' + 1));
function paintUndersideOfFox($c) {
global $cwd;
...
?>

But again, this wont help you, i misunderstood the previous posts.

BLiZZaRD

01-25-2008, 06:14 AM

I know all that. But let's say I've made my website, and I need to change one of the currents on a lot of pages and I do not want to do it manually. How do I do it automatically without changing it on every single page. Please and thank you.

Find another menu. This one isn't set up to work like that. You will need one that has the "current" set another way.

From what I have seen though this one is only setting the main tabs as current, not the sub menus, so you would only have to change that on the main tab pages, not every single one.

Sometimes, we coders have to do things manually.

afe

01-25-2008, 04:57 PM

Thanks, I'll just do it manually then.

afe

02-24-2008, 06:10 PM

Lemme get this straight. Okay. You want to use something like include on top of every page to include a menu. But the problem is, if you do an include, the current tab would be the same on every page.

If that is your problem, you could easily do it with variables:

The menu (included) file:

<li><a href="index.php" class="current" title="" <? if ($page == "home") { echo 'class="current"'; } ?>>Home</a></li>
<li><a href="Classes.html" title="" <? if ($page == "classes") { echo 'class="current"'; } ?>>Classes</a></li>
<li><a href="products.php" title="" <? if ($page == "products") { echo 'class="current"'; } ?>>Products</a></li>

And on the current page, put at the very top:

<?php $page = "whateverpageuron"; ?>

You should change the variable "page" to match the current page.

That way you can include the page and still have it change to what page it is on.

Hope that helps!

Emminar

Close, but the class of current is on a div, and select is on a div inside the first. Your option would work, but the "class" in this case isn't on the li. ;)

Would it work on this page? http://www.afesports.com/indexxxxx.php

Thanks!

BLiZZaRD

02-24-2008, 06:35 PM

It's the same thing AFE. Nothing about your menu has changed. It still uses divs for the classes, and yes you can follow the post example and it will work, just like always, if you replace the "select" with "current" on the current page.

afe

02-24-2008, 06:38 PM

Ohh ok, thanks! What kind of menu will allow me to automatically do currents? Thanks!

BLiZZaRD

02-24-2008, 07:27 PM

read this tutorial (http://blog.richnetapps.com/index.php/automatically_highlight_current_page_in) and it should explain things a lot better.

afe

02-24-2008, 08:00 PM

Thanks.