Loading the Style Sheet
- Write this javascript in the first editable section of the page :
<script language="Javascript" type="text/javascript">
var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href =
'http://YOURSITE.googlepages.com/style_menu.css';
cssNode.media = 'screen, print';
cssNode.title = 'style sheet for fixed menu';
document.getElementsByTagName("head")
[0].appendChild(cssNode);
</script>
var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href =
'http://YOURSITE.googlepages.com/style_menu.css';
cssNode.media = 'screen, print';
cssNode.title = 'style sheet for fixed menu';
document.getElementsByTagName("head")
[0].appendChild(cssNode);
</script>
The CSS
- We use position absolute :
#smenu
{
position: absolute;
top: 30px;
left: 85%;
font: 12px verdana,arial,helvetica,sans-serif;
color: #fff;
background: #000;
padding: 10px;
border: none;
z-index: 5;
}
div#smenu a,div#smenu a:visited {color: #fff;}
The script
- We use scrollTop
var menu;
var theTop = 30;
var old = theTop;
window.onload = function ()
{
menu = new getObj('smenu');
movemenu();
}
function movemenu()
{
if (window.innerHeight)
{pos = window.pageYOffset}
else if (document.documentElement && document.documentElement.scrollTop)
{pos = document.documentElement.scrollTop}
else if (document.body)
{pos = document.body.scrollTop}
if (pos < theTop) pos = theTop ;
else pos += 30;
if (pos == old)
{menu.style.top = pos + 'px';}
old = pos;
temp = setTimeout('movemenu()',200);
}
function getObj(name)
{
if (document.getElementById)
{
this.obj = document.getElementById(name);
this.style = document.getElementById(name).style;
}
else if (document.all)
{
this.obj = document.all[name];
this.style = document.all[name].style;
}
else if (document.layers)
{
this.obj = document.layers[name];
this.style = document.layers[name];
}
}
The HTML
- A div block with id smenu contains the menu
<div id="smenu">
...
</div>
More Informations
- Dynamic content and fixed Menu with iframe
- Using List of Blogs from Blogger to add dynamic content
- Scroll text and pictures within a fixed div block
One Day - One Label - One Wine









