After playing around with an iFrame-element I decided to go for a pure JavaScript/CSS solution for the menu-bar on my site (nils-lande.appspot.com).
I call the init() function of the menu-module directly from the onload-event and use a div-element as a container for the menu.
<body class="page" onload="menu.init(document.getElementById('menuContainer'));">
<div id="menuContainer"></div>
The menu is put in its own JavaScript module:
var menu = (function() {
return {
init: function(element) {
var menuHTML = "<ul class='menu'>";
menuHTML += " <li class='menuItem1'><a href='/index.html'>Nils Lande</a></li>";
menuHTML += " <li class='menuItem'><a href='/html/HelloWorld.html'>Hello World!</a></li>";
menuHTML += " <li class='menuItem'><a href='/html/WhereAreYou.html'>Where are you?</a></li>";
menuHTML += " <li class='menuItem'><a href='/html/About.html'>About</a></li>";
menuHTML += "</ul>";
element.insertAdjacentHTML("BeforeEnd", menuHTML);
return;
}
};
}) ();
The CSS I have used isn't very polished yet, but I have included it below anyway:
.menuItem, .menuItem1 {
margin: 0px;
padding: 0px;
width: 200px;
height: 40px;
line-height: 40px;
float: left;
font-family: verdana;
vertical-align: bottom;
}
.menuItem1 {
font-size: 20px;
}
.menu {
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden;
background-color: lightgrey;
vertical-align: bottom;
}
.menuItem a, .menuItem1 a {
/*display: block;*/
width: 60px;
color: black;
}
.menuItem a:link, .menuItem1 a:link {
text-decoration: none;
}
For this post I used http://codeformatter.blogspot.no/ for formatting the code.
