Help with "one stop" navigation editing... [Archive]

euphoriastudio

01-05-2008, 09:37 PM

So I'm building this site for a company and I'm having some issues. I would like to use SSI to have just one place that they can go to change the menu for the entire site, but I want to use "shrink-wrapping" tabs. My issue is that i set up the li id so the active page would be highlighted, but I'm not sure how to customize the highlighted tab with the correct page for every page. Does anyone have any ideas?:confused:

css:

#tabs {
float:left;
width:100%;
background:transparent;
font-size:93%;
line-height:normal;
border-bottom:0px solid #FFFFFF;
}
#tabs ul {
margin:0;
padding:10px 10px 0 80px;
list-style:none;
}
#tabs li {
display:inline;
margin:0;
padding:0;
}
#tabs a {
float:left;
background:url("http://euphoriastudio.freehostia.com/tableft.png") no-repeat left top;
margin:0;
padding:0 0 0 13px;
text-decoration:none;
}
#tabs a span {
float:left;
display:block;
background:url("http://euphoriastudio.freehostia.com/tabright.png") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFFFFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span {float:none;}
/* End IE5-Mac hack */
#tabs a:hover {
color:#FFFFFF;
background-position:0% -42px;
}
#tabs a:hover span {
color:#FFFFFF;
background-position:100% -42px;
}
li#current a
{
color:#000000;
background-position:0% -84px;
}
li#current a span
{
color:#000000;
background-position:100% -84px;
}

Nav:

<body>
<div id="Layer1" style="z-index: 1; left: 10px; height: 140px; position: absolute; top: 0px">
<img height="140" src="http://euphoriastudio.freehostia.com/header1.png" width="800" />
</div>
<div id="tabs" style="z-index: 5; left: 0px; position: absolute; top: 109px; height: 31px;">
<ul>
<li><a href="http://euphoriastudio.freehostia.com/tmst.shtml" title="Home"><span>Home</span></a></li>
<li><a href="http://euphoriastudio.freehostia.com/test.shtml" title="FAQ"><span>FAQ</span></a></li>
<li><a href="http://euphoriastudio.freehostia.com/test.shtml" title="Analysis"><span>Analysis</span></a></li>
<li><a href="http://euphoriastudio.freehostia.com/test.shtml" title="Testimonials"><span>Testimonials</span></a></li>
<li><a href="http://euphoriastudio.freehostia.com/test.shtml" title="Contact Us"><span>Contact Us</span></a></li>
</ul>
</div>

euphoriastudio

01-06-2008, 03:56 AM

Ok more info! I found a more specific way to say what I need! I'm basically wanting to use server side scripting to identify which tab corresponds to the current page. But I also want to use one document for the navigation links so I only have to update one page to add/remove links. Anyone? Please...

BLiZZaRD

01-06-2008, 09:36 AM

You will want to use PHP. Put all of this (not the CSS) in a php page, no header, no title, just that code. Name it something like menu.php Then include it on every page you want the menu to appear using:

<?php include 'menu.php' ?>

Now your trick is to make the page report to PHP and tell it which page has been chosen. That will then tell the menu to show which tab is "active"

For that, post the question in the PHP forum, so we don't confuse people posting in here.

euphoriastudio

01-06-2008, 06:37 PM

ok just to make sure I understand you right, the navigation code I posted needs to be in a php page. correct? do i have to rename all my pages with ".php" if I use the menu code or will it work with a ".html" or ".shtml" extension?

Thank you so much for taking the time to help. I've been racking my brain!

Medyman

01-06-2008, 07:51 PM

ok just to make sure I understand you right, the navigation code I posted needs to be in a php page. correct? do i have to rename all my pages with ".php" if I use the menu code or will it work with a ".html" or ".shtml" extension?

Thank you so much for taking the time to help. I've been racking my brain!

To be able to parse PHP coding, you'll need to rename the files to .php.

euphoriastudio

01-06-2008, 08:07 PM

thanks! man i wish i would have joined this forum months ago! everyone is so helpful and nice :p

BLiZZaRD

01-07-2008, 12:05 AM

To be able to parse PHP coding, you'll need to rename the files to .php.

If you don't want to use php extension on your pages you can use .htaccess to force .htm and .html to parse php:

Create a .htaccess file with these two lines in it:

AddType application/x-httpd-php .html .htm
AddHandler application/x-httpd-php .html .php .htm

and upload it either just inside or just outside your root folder. this folder is called different things on various servers, public_html is the most common, followed by htdocs and root.