Very basic vertical menu in pure html5 and css

Question

I've been googling for quite a bit and can't find anything that helps me put all the pieces together here. My specs are as follows:

• Have three files: index.html, menu.html, and style.css
• The menu.html has all the content needed for my menu, and is included by index.html via html5 objects. I understand objects can be used like this: Include html file in html using html5
• style.css can have be very very minimal. Maybe just blue text on a red background, as an example.

What I have managed to accomplish:

• Getting the text from menu.html to show up in index.html

My issue is just putting all the pieces together. If someone could help provide the needed lines for index.html (ie, an object tag that correctly references the style) and a very minimal style.css, I would be all set.

Thanks for the help, and sorry for the n00b question, but I can't seem to find anything on the combination of html5 objects and css.

index.html: http://pastebin.com/xn2PNAsS

menu.html: http://pastebin.com/A72csf14

style.css: http://pastebin.com/QXxwbpyq

What is broken:

• I just can't get the object only (the menu) to use the style sheet and have a red background. For the main page I would like to have a white background.

• Clicking on a menu link seems to open the page in a new frame. I want the entire page to change. The reason for having a menu.html is to stick with the DRY paradigm.

Answer 1

Have you tried something like this?

<object type="text/html" data="menu.html" id="whatever"></object>

In style.css

body {
   background-color: #FFFFFF;
}
#whatever {
   background-color:#ff0000;
}

In menu.html use target="_top" on your links, from http://www.w3schools.com/tags/att_a_target.asp ie,

<a href="index.html" target="_top">Home</a>

Answer 2

Props for wanting to keep it DRY. If you want to include those sorts of common components, however, and you want to do it cleanly, you may need a lot more than HTML and CSS. You would need a programming language (and possibly a web app framework) that you could use to generate the common elements. Popular options are C#/ASP.NET, Python/Djano, Ruby/Rails, and PHP/Zend or Cake.

However, I can't really tell you exactly what you need because I don't know what kind of site you want to make, or how big of a project it is. You may just be able to get away with server-side includes, which is probably the easiest option.