Industry guru Dave Taylor offers free tech support on a wide variety of technical and business topics, including HTML, Apple iPhone, online advertising, Cascading Style Sheets, Web design, management, Unix, Linux, search engine optimization, online dating, Mac OS X, shell script programming and Microsoft Windows.

How do I have a shared CSS menu system?

I love CSS. I would like to use CSS menus. I have seen several versions on the netover the last 12months (I currently use a javascript menu system). My biggest problem with these CSS menus is that you have to put the menu code into each HTML page as far as I can see). This means a menu change for a site must be updated in every page.

This seems to go against the idea that CSS can be used to change the look and feel of an entire web site by just chnaging the external style sheet. Do you know of a way of putting CSS menus information in an external file that can be linked or imported into the HTML?

Dave's Answer:

Sure, this is actually pretty darn easy! Just look at the <link> tag.

Or work by example: use View Source in your Web browser to view the HTML source to this very page and you'll see the following on about line six or so:

By adding that to all my HTML pages I have a single shared CSS file that can be as complex as I need, without any issues of having to edit multiple pages to make a stylistic or presentation tweak.

If you need to include HTML and/or JavaScript too, you might instead look into server-side includes. I use those extensively throughout my Web sites too:

These let me have CSS, JavaScript, HTML, whatever else I need, neatly compartmentalized and easily edited. The best feature? That it's just a single include line you add to each page of my site.

Finally, I spend a lot of time in my book Creating Cool Web Sites talking about JavaScript and CSS-based menu systems. It turns out that compatibility across a wide range of web browsers is darn hard and if you choose to build your own, you might well be setting yourself up for a never-ending litany of complaints from visitors whose browsers don't quite work properly.

Instead, I've actually moved to simpler, less fancy site layouts in the interest of being compatible with the widest possible range of visitor applications, whether cell phones, wireless PDAs, Sony PSP users, or, now and then, an actual computer user. :-)

Hope this helps you out!

Help others find this article at Del.icio.us, Digg, Netscape, Reddit, and Stumble Upon

Categorized: HTML and CSS (Article 4186)
Tagged:
Previous: Using my PC's CDROM drive freezes up Windows XP?
Next: How do I create a new screen name in AOL (America Online) 9.0?

Subscribe!

Never miss another useful Q&A article again! Subscribe to AskDaveTaylor with Google Reader.

Comments

Have you tried PHP includes?
My CSS file is one file, imported into each page.
And ditto, my menu is a PHP file, included into each page.
(There is the small Javascript IE fix, also included into each page, but not necessary for Firefox et al).
So when I want to add new pages to my menu, I just edit my menu.php, and the lovely two-level CSS menu appears magically on each page.
I almost always use this technique now.
So my pages end in .php instead of .htm.
Good luck.

Posted by: chris at September 14, 2005 11:10 AM

The question was: "Do you know of a way of putting CSS menus information in an external file that can be linked or imported into the HTML."

The answer you provided, while good information about linking to the CSS style sheet, doesn't address the question. Rephrased, the writer wanted to know if he could write CSS Menu code in a separate file, and then link that menu (NOT the stylesheet) into the html code for his other pages.

Posted by: Ed Newbold at September 14, 2005 12:06 PM

Ed, using the PHP include as suggested by another commenter, or using the SSI include allows you to have arbitrarily complex material -- including a complete CSS menu solution -- neatly packaged into a separate file.

Posted by: Dave Taylor at September 14, 2005 1:18 PM

Hi,

Is there any way to INCLUDE a menu file into HTML. I have no experience with PHP.

Something akin to:

{.div class="Center_Box"}
{.link href="Links.Html"} // load the page
{./div}

So I only have to maintain one file for all my pages. I could find no references to anything like that in Cool Web Sites.

Thanks,

Swede

Posted by: G�sta H. Lovgren at October 10, 2005 3:04 AM

You certainly can, Gosta. Go back to my book and read up on Server Side Includes (or Google the phrase, for that matter).

Posted by: Dave Taylor at October 11, 2005 7:08 AM

Works great Dave.

Thanks.

Posted by: G�sta H. Lovgren at October 11, 2005 4:56 PM

Great info about css stylesheets Dave. But, I'm still unanswered about how to put a menu into a stylesheet. I tried it and tried the javascript menu. I wish you'd write more on this topic.

Posted by: Sara at May 31, 2006 12:17 PM

I'm having the same problem I beleive. I want to include one menu on multiple pages that are in multiple directories, but when I open the page, and click on the menu it follows a path to the original directory that the menu was created in.

Posted by: Jeff at February 27, 2008 4:42 PM

Will this question ever be answered as I am also looking for the way to have my menu's in the CSS sheet and laoded into HTML so that I can change the CSS style sheet and it changes the menu on all the htmlpages at once.

Cheers

Posted by: spikey at September 8, 2009 7:44 AM

I have a lot to say, but ...

I have a lot to say, and questions of my own for that matter, but most of all I'd like to say thank you for all your efforts on this Web site by buying you a chai!

I do have a comment, now that you mention it!