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?
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:
href=”https://www.askdavetaylor.com/styles-site.css” type=”text/css” />
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!
Using an iframe is much easier to use than server side scripting or PHP.
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
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.
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.
Works great Dave.
Thanks.
You certainly can, Gosta. Go back to my book and read up on Server Side Includes (or Google the phrase, for that matter).
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
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.
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.
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.