Entry
How can I script a menu that slides in/out?
May 18th, 2000 16:25
Martin Honnen,
Here is an example that works with IE4+, NN4 and NN6:
<HTML>
<HEAD>
<STYLE>
#slideBar {
position: absolute;
left: -200px;
}
#arrow {
position: absolute;
left: 200px;
top: 0px;
}
.arrowStyle {
font-size: 24pt;
color: white;
text-decoration: none;
}
</STYLE>
<SCRIPT>
var p = -200
var dx = 10;
var spd = 20;
var l = p;
function slideOut () {
l += dx;
if (document.layers) {
document.slideBar.left = l;
}
else if (document.all) {
document.all.slideBar.style.pixelLeft = l;
}
else if (document.getElementById) {
document.getElementById('slideBar').style.left = l + 'px';
}
if (l < 0)
setTimeout('slideOut()', spd);
else {
if (document.layers) {
var html = '';
html += '<A HREF="javascript: void 0"';
html += ' ONCLICK="slideIn(); return false;"';
html += ' CLASS="arrowStyle"';
html += '>';
html += '<';
html += '<\/A>';
var a = window.document.slideBar.document.arrow;
a.document.open();
a.document.write(html);
a.document.close();
}
else if (document.all) {
document.all.arrowLink.innerHTML = '<';
document.all.arrowLink.onclick = clickIn;
}
else if (document.getElementById) {
document.getElementById('arrowLink').firstChild.nodeValue =
'<';
document.getElementById('arrowLink').onclick = clickIn;
}
}
}
function slideIn () {
l -= dx;
if (document.layers) {
document.slideBar.left = l;
}
else if (document.all) {
document.all.slideBar.style.pixelLeft = l;
}
else if (document.getElementById) {
document.getElementById('slideBar').style.left = l + 'px';
}
if (l > p)
setTimeout('slideIn()', spd);
else {
if (document.layers) {
var html = '';
html += '<A HREF="javascript: void 0"';
html += ' ONCLICK="slideOut(); return false;"';
html += ' CLASS="arrowStyle"';
html += '>';
html += '>';
html += '<\/A>';
var a = window.document.slideBar.document.arrow;
a.document.open();
a.document.write(html);
a.document.close();
}
else if (document.all) {
document.all.arrowLink.innerHTML = '>';
document.all.arrowLink.onclick = clickOut;
}
else if (document.getElementById) {
document.getElementById('arrowLink').firstChild.nodeValue =
'>';
document.getElementById('arrowLink').onclick = clickOut;
}
}
}
function clickIn () {
slideIn();
return false;
}
function clickOut() {
slideOut();
return false;
}
</SCRIPT>
</HEAD>
<BODY>
<DIV ID="slideBar">
<TABLE WIDTH="220" BORDER="0" CELLPADDING="0" CELLSPACING="0">
<TR>
<TD WIDTH="200" BGCOLOR="red" VALIGN="top">
<A HREF="http://javascript.faqts.com">
JavaScript.FAQTs.com
</A>
<BR>
<A HREF="http://php.faqts.com">
php.FAQTs.com
</A>
<BR>
<A HREF="http://python.faqts.com">
python.FAQTs.com
</A>
</TD>
<TD WIDTH="20" BGCOLOR="orange">
</TD>
</TR>
</TABLE>
<SPAN ID="arrow">
<A ID="arrowLink"
HREF="javascript: void 0"
CLASS="arrowStyle"
ONCLICK="slideOut(); return false;"
>
>
</A>
</SPAN>
</DIV>
</BODY>
</HTML>
