I was just messing around with some HTML/CSS/Javascript stuff the other day, and came up with something kind of awesome. It's a div that hides until it has the mouse placed over it, and then hides again when the mouse leaves. It's very similar to a hiding toolbar, and could be very useful if applied correctly.
Due to its ability to be present, although mainly unseen, it would be particularly useful for web pages/applications that require large amounts of content on screen, so that more wouldn't have to be devoted to the standard menu.
I've tested this in IE7, Firefox, Chrome, and Opera. It works no matter the resolution, though I have yet to try it on my G1 (for the size tests, I basically just scrunched firefox and IE down very small). It's W3C compliant (except for the colors, which I don't really care about) for both the html and the CSS. The HTML uses the XHTML 1.0 strict dtd, and there isn't a single table anywhere. This is how I roll.
HTML:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Menu Bar Test</title>
<link rel="stylesheet" href="./menubar.css" />
<script type="text/javascript" src="./menubar.js"></script>
</head>
<body onload='pageLoaded()'>
<!--<div id="collapsedmenubar" class="menubar" onMouseOver="overCollapsedMenu()">
<p>Click here for menu</p>
</div>-->
<div id="fullmenubar" class="menubar" onmouseover="overCollapsedMenu()" onmouseout="leftFullMenu()">
<h1>Menu</h1>
<p>
<a href="index.html">Home</a>
<a href="index.html">Projects</a>
<a href="index.html">Contact Info</a>
</p>
</div>
<div id="content">
<p>This is where the content goes!</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin nibh nisi, dapibus vel, elementum eget, vehicula vel, lorem. Donec ipsum est, tincidunt iaculis, nonummy ut, dictum vel, velit. In leo magna, aliquam et, suscipit sed, cursus in, tellus. Suspendisse dui felis, convallis vel, porttitor pellentesque, dapibus vitae, neque. Suspendisse potenti. Sed erat orci, rhoncus at, tempor in, pellentesque vel, tortor. Nam urna. Sed bibendum. Aenean ultrices vehicula lacus. Duis ac arcu. Nulla facilisi. Sed pulvinar risus eget leo. Praesent pulvinar varius ante. Cras lorem nibh, elementum nec, accumsan nec, imperdiet et, felis. Fusce gravida sem et orci. Suspendisse lectus nibh, tempus eget, sagittis sit amet, pretium vel, dui. </p>
<!--There was more Lorem Ipsum, but I dropped it for readability's sake.--%gt;
</div>
<div id="footer">
<p>Here is the footer!</p>
</div>
</body>
</html>
CSS:
*{ /*I know this is bad, but hey, it's a test document.*/
padding: 0px;
margin: 0px;
border: 0px;
}
.floatedlabel{
float:left;
}
.menubar{
background-color: green;
border-left: 5px yellow solid;
border-right: 5px yellow solid;
border-bottom: 5px yellow solid;
color: white;
left: 10%;
position: fixed;
right: 10%;
text-align: center;
top: 0px;
width: 80%;
z-index: 9001;
}
body{
background: lightblue;
padding-top: 5%;
}
h1{
float: left;
}
#content{
background-color: lightgreen;
border: 2px yellow solid;
left: 5%;
position: relative;
width: 90%;
}
#footer{
background-color: lightgreen;
border-left: 2px yellow solid;
border-right: 2px yellow solid;
border-top: 2px yellow solid;
left: 15%;
position: relative;
text-align: center;
top: 5px;
width: 70%;
}
Javascript:
function pageLoaded()
{
var fullmenu = document.getElementById("fullmenubar");
//fullmenu.style.visibility = "hidden";
fullmenu.style.top = "-70em";
fullmenu.style.height = "70.2em";
}
function overCollapsedMenu()
{
var fullmenu = document.getElementById("fullmenubar");
//fullmenu.style.visibility = "visible";
fullmenu.style.top = "0px";
fullmenu.style.height = "";
}
function leftFullMenu()
{
var fullmenu = document.getElementById("fullmenubar");
//fullmenu.style.visibility = "hidden";
fullmenu.style.top = "-70em";
fullmenu.style.height = "70.2em";
}
Oh, sorry, did you want that menu to be at the bottom, maybe for some Mac OS X dock-style menu? Well, in that case, for the menubar, change
top: 0px;
to
bottom: 0px;
and in the javascript replace all instances of "top" with "bottom". Enjoy.
No comments:
Post a Comment