CSS Fixed location menu

The observant reader may recognize that scrolling on this blog gets rid of the Blogger-bar at the top and retains a full-width menu for Skinyourscreen.com items that stays put in the browser, even while scrolling. That is, unless you're using the single largest security threat to MS Windows, Internet Explorer, which, unfortunately, doesn't comply to an ever-increasing amount of web standards.

While putting together new templates for Skinyourscreen after recovery from the hack attacks, I've been investigating some of the fun free goodies the web has to offer in the way of AJAX, script.aculo.us, and Ruby On Rails. I had previously attempted creating a dynamically loading horizontal set of menus using AJAX techniques but found them only working part of the time, inexplicably inoperative at others. Here's a simple rendition of the effect using just standard HTML/CSS.

It's a basic effect accomplished with Cascading Style Sheets (CSS) and a few HTML additions to a web template. Below are the CSS styles used in the header of this Blogger template. These are included in this template's header, although they could just as easily be employed in a separate style sheet:

/*===[ 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;
}

Now the addition to the HTML template (in this case, Blogger template)... Blogger doesn't seem to like certain HTML tags in a blog (tries to render 'em), so I'm going to use the [ and ] symbols instead of the sharp brackets usually used in HTML for the following example. (Google/Blogger appear to have this feature in beta-testing). Immediately after the tag insert the following:

[!-- 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]

Not to bad, 'eh? Sorry for the illegibility... Blogger doesn't like Tabs or extra spaces apparently, so the above code has no indents to help you view the structure. The CSS styles are essentially creating a box of fixed position at the top of the browser window containing an inline list of unordered items.

It's a nice way of keeping common options always available without making users scroll for them. Right now I'm experimenting with more graphical versions of this in both horizontal and vertical formats. I'm trying to use the graphics from my Singularity LiteStep OTS2 theme in this endeavor. Another goal is to create one that sits on the bottom of the screen but still stays put when the user scrolls.