PDA

View Full Version : Best method for top navigation menu



Budreaux
Apr 20th, 2010, 05:33 PM
I'm not sure of the proper place to put this, so I will start in HTML and go from there.

I have a website with about 15 pages that all use the same top page navigation css/js menu system (using <ul> structure). My first thought was to place this in a frame or iframe and just have one html page that I can use to populate for every other page. This also has the advantage of allowing me to make menu changes to one file and have it iterate throughout the entire site. The more I think about this method though, the more problems I run into. I'm concerned about accessibility for text only browsers as well as search engines linking to the navigation html separately from the actual site page. This could allow a user who gets a link from a search engine to land on a page with absolutely no navigation at all. I have also considered generating the menu on the fly with a JS script reading a single text file for link info, but then what about browsers that either have JS deactivated or do not allow it.

My main concern is coming up with a solution that is cross browser safe and allows accessibility to all users without having to update every page individually when I make a menu change. If anyone can offer up any suggestions, I would be more than grateful.

adamkelly
Apr 20th, 2010, 05:39 PM
Definitely not iFrames - horrible for usability, search engines etc.

What about using a CMS system? Wordpress or CushyCMS or something would make life very easy.

Budreaux
Apr 20th, 2010, 05:58 PM
thanks adam, I already had a feeling iframes would not be the way to go. I prefer to do my own coding though. Programs such as wordpress, frontpage, and cushycms do not teach proper coding, they are just an easy way to publish without having to learn code. I have no quarrels with writing code, I just want to make sure it is accessible to all.

Anybody else have any suggestions?

Excavator
Apr 20th, 2010, 07:12 PM
Hello Budreaux,
Do you have a menu even started yet? Once you decide what you want it to look like it would be easy to use it as a server side include so you can make edits to it the way you describe.

Have a look at LOTS of example menus -
here (http://www.cssplay.co.uk/menus/)
Just find one that fits your needs -i.e. no js and text links when CSS or images fail.

See how to make an include here (http://www.tizag.com/phpT/include.php).

BlueTriangle
Apr 20th, 2010, 10:27 PM
If you want a simple way... just save your files as .php (They don't have to be written in php, so don't worry)

On each page just put;

<? include "HEADER URL.php"; ?>

YOUR BODY GOES HERE... BLAH BLAH BLAH

<? include "FOOTER URL.php"; ?>

Budreaux
Apr 22nd, 2010, 04:48 PM
Excavator,

Thanks for the link, however it contained about a hundred different menu options but that's not really what I was looking for. I already have a menu and it is on the 15 pages I have. What I wanted to know was is there an easy way to set up one single menu that iterates throughout the 15 pages and dies gracefully if css or js is disabled and is centrally located so I don't have to update 15 pages. I looked at the SSI method and that appears viable. I will investigate this further.

Blue Triangle,

thanks for your suggestion. I will also look into the php method as well.

Excavator
Apr 22nd, 2010, 05:28 PM
is there an easy way to set up one single menu that iterates throughout the 15 pages and dies gracefully if css or js is disabled and is centrally located so I don't have to update 15 pages.

The tutorial I linked you to is how to do PHP Includes which is one method to do what you're describing.

The "dies gracefully" part has to do with how you code your menu, not the include. You could have CSS controlling rollover buttons as well as having text links. Then hide the text with CSS, usually text-indent: 9999px; works fine, so that when images, js or CSS are disabled the text or shows up as a link that still works.

rnd me
Apr 23rd, 2010, 02:20 AM
Then hide the text with CSS, usually text-indent: 9999px; works fine,

doesn't that make for some nasty focus indication outlines, or do you know something i don't?

what's wrong with display:none, z-index:-1, or visibility: hidden; what's the advantage to an indent that you would suggest it in the first place?

(not trying to provoke, just curious about a Master Coder's technique.)

met
Apr 23rd, 2010, 02:28 AM
i think display:none and visibility:hidden can affect some screen readers, recall reading that some time back, whereas text-indent doesn't.

but i'm intrigued too if there's another reason

Excavator
Apr 23rd, 2010, 09:53 AM
doesn't that make for some nasty focus indication outlines, or do you know something i don't?

what's wrong with display:none, z-index:-1, or visibility: hidden; what's the advantage to an indent that you would suggest it in the first place?

(not trying to provoke, just curious about a Master Coder's technique.)

I think you'll find that when text-indent: 9999px; moves the text off the screen that the anchor stays. Your outlines should too.

If for some reason they don't, you could always use outline: none; to get rid of them while CSS is working and you're using something else to indicate focus. The outlines and text would both return as soon as CSS was disabled.

I have also used a span around the link text then hidden the span, seems like that adds a lot to the markup though. I've never tried the z-index thing but then I rarely use postitioning so that wouldn't work anyway.

rnd me
Apr 23rd, 2010, 10:36 AM
what do you think about color:transparent; to preserve layout and outline shapes?
clear text should be found by screen readers as well...

BlueTriangle
Apr 23rd, 2010, 10:45 PM
I would go with the suggestion somewhere above, about using visibility as hidden and/or none