Here's a little something I've posted on my blog about generating a nifty fixed menu. This will let you have a menu for your web-pages that stays stuck to the top part of the browser window. You can see a working example of this on
my blog - you'll see that when you scroll through the web-page, the menu stays put.
Note: Internet Explorer does not support this feature due to crappy compliance to web-standards by Microsoft.Below are the CSS styles used to generate the effect. You can use the in-header method or use a call in your header to point to a separate CSS style sheet to access these.
/*===[ Top Navigation Bar Styles]===*/
.horzmenu {
position: fixed;
left: 0px;
top: 0px;
background-color: #222;
font-size: 12px;
width: 100%;
height: 1.3em;
border: 3px solid #777;
margin: 0px;
padding: 5px;
}
.horzmenu li {
width: 142px;
height: 49px;
color: #fff;
display: inline;
}
.horzmenu a {
padding: 0px;
margin: 0px 5px;
border-bottom: 3px solid #444;
text-decoration: none;
}
.horzmenu a:link { /* unvisited link */
color: #aaa;
height: 49px;
width: 149px;
}
.horzmenu a:visited { /* visited link */
color: #889;
}
.horzmenu a:hover { /* mouse over link */
border-bottom: 3px solid #f90;
color: #fff;
}
.horzmenu a:active { /* selected link */
background-color: #333;
color: #fff;
border-bottom: 3px solid #444;
}
The part that works the magic is the first style, the
.horzmenu style. This style represents a container, or box, that spans the width of the browser and is told to stick to the top of the browser window using the
position: fixed; parameter.
The remainder of the styles essentially format the links and list items within that container. Note that the list items within the
.horzmenu container (the
.horzmenu li style) have the
display: inline; parameter set, which specifies that rather than creating a vertical bulleted list, they will spread horizontally.
Now here's the code in the body of the XHTML file. It's basically just an unordered (bulleted) list using the styles above, and the links can easily be changed to suit your needs:
<!-- My custom Skinyourscreen.com links -->
<div class="horzmenu">
<ul class="nav_ul">
<li><a href="http://skinyourscreen.com/site" alt="SYS">Skinyourscreen</a></li>
<li><a href="http://skinyourscreen.com/podcasts" alt="Podcast">SYS Podcast</a></li>
<li><a href="http://skinyourscreen.com/skinwiki" alt="SkinWiki">SkinWiki</a></li>
<li><a href="mailto:mrbiotech@skinyourscreen.com" alt="Contact Me">Contact me</a></li>
</ul>
</div>
It's a very simple effect, but you might imagine what one could accomplish using this technique with some nicely shadowed alpha-transparent PNG images (something else the worthless Internet Explorer browser can't easily handle). This could also easily be used to create a fixed column on the left or right side of the browser window, or even a fixed-position menu at the bottom of the browser.
Web Design
Fixed location menu using CSS