Forum Moderators: phranque

Message Too Old, No Replies

Creating context sensitive navigation buttons w/o editing each page

nav buttons which indicate location in a site without coding each page

         

quantikev

2:02 am on Oct 9, 2007 (gmt 0)

10+ Year Member



Hello community.

I am in the process of creating navigation (text & images) which indicate a visitor's location within the website.

Ex: [images.google.com...] (at the top, the page is represented by the bolded word 'images').

What is the simplest way I can centralize this, so that each page (or #includes file) does not require modification when updating the navigation?

XML/CSS?

Thanks a lot!

Kevin

bill

5:41 am on Oct 9, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Is your site database powered? If so you could add a similar sort of breadcrumb navigation to your site quite easily by altering your templates. If not there are ways to play with find & replace to add the code you want into all of your pages.

Using the given example you could have your CSS give a bold styling to the breadcrumb ID for pages in the images category.

quantikev

2:47 pm on Oct 9, 2007 (gmt 0)

10+ Year Member



Hi Bill. Thank you for your reply.

I wish to apply the navigation to 2 websites at this time, neither is database driven.

This example is nearly identical in template design to my site, the only difference being my desire to have the navigation buttons highlighted (or dimmed) to indicate the exact page.

I think PHP would also allow me to do this without editing each page, but I've noticed some people seem to be using XML with HTML.. and this would work better for me.

Thanks again..

[edited by: encyclo at 10:14 am (utc) on Oct. 10, 2007]
[edit reason] no URLs thanks [/edit]

bill

2:49 am on Oct 10, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I've noticed some people seem to be using XML with HTML.. and this would work better for me.

? How would that work?

It's pretty simple just to use CSS to change the format of the navigation link.

Beagle

2:03 pm on Oct 11, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



This isn't much help, except to say that it is possible. Many straight-HTML templates have this feature, but I don't know how they do it. You could try checking source code on some HTML pages that use it and see what you can come up with.

ETA: I just checked a page that uses one of these templates, and each nav link has a "1x1.gif" in it (SRC="1x1.gif"). That still doesn't help me figure out how they do it, but it might help someone else.

[edited by: Beagle at 2:14 pm (utc) on Oct. 11, 2007]

jgstyle

4:02 pm on Oct 11, 2007 (gmt 0)

10+ Year Member



I've done similar things just using css.

The key is to put an ID on the body tag, so that you can then target the appearance of a specific link within that page.

so:

<body id="about">

then, in my css file...

body#about a#images {
color: #000;
font-weight: bold;
text-decoration: none;
}

this is off the top of my head, but you get the idea.

The only thing that might throw you off is how much of a hassle it is to apply ID's to your body tags.

But at least this way you could just update your css if you wanted to change the look of your "site position indicator links".

Hope this helps.