Javascript Navigation or CSS navigation?

[jram23]

Hi All,

I really need your suggestions in making my navigation system effective.

I maintain a website with over 1k pages. The website has a drop-down navigation which is in all of the pages. The navigation is created using the CSS( <UL> and <LI> ). The navigation items are updated regularly. So what I did is, I pasted the navigation part into a Javascript called menu.js. So what the Javascript has is document.write('menu items'). Now I just call the menu.js on top of all pages. So whenever changes is needed, I just update the menu.js. So the navigation gets updated in all the pages.

Is this a right way to do. I see many sites having the navigation in HTML itself. But my problem is whenever I make changes to the navigation, I need to upload all the files to my server which is time consuming. And I am little lazy to update the 1k pages

And I am aware that having navigation inside a Javascript won't do good to Google. So is there any other way to have a better navigation system?

Thanks a lot in advance!!!

[incrediblehelp]

Use CSS as it is much more spider friendly.

[kgun]

Completely agree

<ul>
<li> Menu 1 item here with CSS styling.  </li>
...................................................................

<li> Menu n item here with CSS styling.  </li>
</ul>

That is best for SeBots, surfers and disabled people. You can of course use the same technoque on submenus.

There is a Norwegian site (shall I tell about it - a competitor of my menu system. WPW members are the bosses, so here it is: bMenu

"bMenu focuses on navigation technology which improves and standardizes navigation on web, Intranets and mobile terminals.
Search has lately been seen as the only way to navigate Internet. bMenu is patent pending (US, PCT, NO) technology which improves access to web content and gives a much faster and better overview than traditional navigation or search results. It also increases page views for advertising sites and sales for e-commerce sites. Today we have some of the major portals in Norway as beta customers.
Behind bMenu you will find some of the top people within programming and development with experience from companies like Fast, Yahoo and Opera.
Investor is Alliance Venture.
The backbone of the technology is built on Fast’s technology platform.
bMenu is now located in Norway and New York and is establishing office in San Francisco".

It uses the Fast engine, scan web sites for content that is automatically added to the menu system. You can scan a Chinese site and automatically produce English menus on your site.)

There is a free and paid versions. The most advanced are for companies.

[ran_dizolph]

Use CSS. People have the option to turn Javascript off, thusly rendering your navigation invisible.

Plus, CSS can be significantly lighter, and easier to manage/update.

[cormip]

Simply replacing menu.js to update your navigation is also a problem because of browser caching. Visitors returning to your site may reuse a cached copy of menu.js and will not see your menu changes.

Paul Cormier

[httpman]

You should only use HTML + CSS.
Many use a ul / li structure. This is the right way for SE spiders to browse your menus, and therefore your website.
Then you can add DHTML effects (drop down menus, progressive transparency and anything else) using with Javascript - but the whole menu structure should be readable to SE spiders, what means : HTML / CSS only.

JP

[niggles]

The CSS vs JScript issue aside, if you have 1000+ pages and you're needing to change things regularly, you should really be putting your menu in an "include" file of some kind. You can do this with most servers that let you put up .php, .asp or .shtml pages.

This way, you change one central file and it flows through the whole site.

That combined with your CSS menus would give the best of both worlds.

Cheers,
Niggles

[freelancedesigners.com]

You can also include the actual link HREF tags in a style sheet? I wasnt aware of that capability.

If you want the menu to be the same on every page you should use include files -this is very easy to do in PHP, ASP, perl or even SHTML

you create one HTML file then include it into you 1000 files.

you would still use CSS as described above

[bj]

I just wrote an article about this lately. Though the article is specific to a js menu in Wordpress, the reasons for not using this type of menu are pertinent to anyone using or considering using javascript menus.

http://kickasswebdesign.com/wordpres...ibility-no-no/

Google Webmaster Guidelines has this to say: "While Googlebot is great at understanding the structure of HTML links, it can have difficulty finding its way around sites which use JavaScript for navigation. We’re working on doing a better job of understanding JavaScript, but your best bet for creating a site that’s crawlable by Google and other search engines is to provide HTML links to your content."

Why can you not use php to include the menu? It renders like html and you can include the file.

[jannmirch]

BJ, you took the words right out of my - well - keyboard.

I had never used php before and recently took over a website for a client. Her previous designer had started doing navigation with php but had a different php file for every page so the background would highlight which page you were on.

By cleaning up the CSS I was able to achieve the same results and use one php file for the navigation menu. Worked beautifully.

Though I confess I do prefer Dreamweaver's library functionality, which does basically the same thing but I can see what it will look like on the page. The downside is you need to update (it will do it automatically for you) all the pages and reupload.

[jram23]

First, thanks all for your suggestions.

Now, I understand the value of using CSS menus. I also think that I can try out the PHP include concept in my pages. But all my pages needs to be .php file. Right now I have all the pages as .html.

Is there a way by which I can redirect all my .html file to .php file using ".htaccess"?

[jawn_tech]

Yes you can write a 301 redirect in your htaccess to redirect all of your pages.

It's also advisable to be sure to have an xml sitemap for Google to see any and all changes to your website.

The PHP include is a great tool, I've used it. Very convenient when adding or changing around links -- just change the one file instead of editing every page. A must-have for any website that intends to grow, unless the site is utilizing a CMS (content management system i.e. Mambo, etc)