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.

Well... it would be much better to paste it into the question to be honest. Which is why I said *show*. — icedwater, Jul 11 '13 at 02:42
Ah, I'm used to pastebinning everything. It would have probably fit in the question. :P — cat pants, Jul 11 '13 at 03:02

score 2 · Accepted Answer · edited Apr 20 '14 at 09:53

2

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>

edited Apr 20 '14 at 09:53

Roly

2,126
2
20
34

answered Jul 11 '13 at 03:13

Jared Beekman

320
2
10

As this should of answered all parts of your question, would you mind accepting it as the answer or detailing what's missing? – Jared Beekman Jul 13 '13 at 17:58
Sorry Jared, totally spaced on that! – cat pants Jan 29 '14 at 01:39

JesseTG · Answer 2 · 2013-07-11T02:58:11.377

1

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.

edited Jul 11 '13 at 02:58

answered Jul 11 '13 at 02:45

JesseTG

2,025
1
24
48

Shouldn't HTML5 be enough though? This site I am making is just static html. No database, nothing fancy. – cat pants Jul 11 '13 at 03:04
Hence my suggestion for server-side includes. – JesseTG Jul 11 '13 at 13:31

Very basic vertical menu in pure html5 and css

2 Answers2