代码简介：JS+CSS打造网站头部蓝色简约可自动显示/隐藏的导航菜单，很漂亮很大气，推荐使用。
代码内容：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JS+CSS打造网站头部蓝色简约可自动显示/隐藏的导航菜单_网页代码站(www.webdm.cn)</title>
<script type="text/javascript">
var down = false;
function toggleDown() {
if (down == false) {
down = true;
t1 = new Tween(document.getElementById('menu_holder').style, 'top', Tween.strongEaseOut, -58, 0, .6, 'px');
t1.start();
}
}
function toggleUp() {
if (down == true) {
down = false;
t1 = new Tween(document.getElementById('menu_holder').style, 'top', Tween.strongEaseIn, 0, -58, .4, 'px');
t1.start();
}
}
/**********************************************************************
TERMS OF USE - EASING EQUATIONS
Open source under the BSD License.
Copyright (c) 2001 Robert Penner
JavaScript version copyright (C) 2006 by Philippe Maegerman
All rights reserved.
Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are
met:
* Redistributions of source code must retain the above copyright
notice, this list of conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above
copyright notice, this list of conditions and the following disclaimer
in the documentation and/or other materials provided with the
distribution.
* Neither the name of the author nor the names of contributors may
be used to endorse or promote products derived from this software
without specific prior written permission.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*****************************************/
function Delegate() { }
Delegate.create = function(o, f) {
var a = new Array();
var l = arguments.length;
for (var i = 2; i < l; i++) a[i - 2] = arguments[i];
return function() {
var aP = [].concat(arguments, a);
f.apply(o, aP);
}
}
Tween = function(obj, prop, func, begin, finish, duration, suffixe) {
this.init(obj, prop, func, begin, finish, duration, suffixe)
}
var t = Tween.prototype;
t.obj = new Object();
t.prop = '';
t.func = function(t, b, c, d) { return c * t / d + b; };
t.begin = 0;
t.change = 0;
t.prevTime = 0;
t.prevPos = 0;
t.looping = false;
t._duration = 0;
t._time = 0;
t._pos = 0;
t._position = 0;
t._startTime = 0;
t._finish = 0;
t.name = '';
t.suffixe = '';
t._listeners = new Array();
t.setTime = function(t) {
this.prevTime = this._time;
if (t > this.getDuration()) {
if (this.looping) {
this.rewind(t - this._duration);
this.update();
this.broadcastMessage('onMotionLooped', { target: this, type: 'onMotionLooped' });
} else {
this._time = this._duration;
this.update();
this.stop();
this.broadcastMessage('onMotionFinished', { target: this, type: 'onMotionFinished' });
}
} else if (t < 0) {
this.rewind();
this.update();
} else {
this._time = t;
this.update();
}
}
t.getTime = function() {
return this._time;
}
t.setDuration = function(d) {
this._duration = (d == null || d <= 0) ? 100000 : d;
}
t.getDuration = function() {
return this._duration;
}
t.setPosition = function(p) {
this.prevPos = this._pos;
var a = this.suffixe != '' ? this.suffixe : '';
this.obj[this.prop] = Math.round(p) + a;
this._pos = p;
this.broadcastMessage('onMotionChanged', { target: this, type: 'onMotionChanged' });
}
t.getPosition = function(t) {
if (t == undefined) t = this._time;
return this.func(t, this.begin, this.change, this._duration);
};
t.setFinish = function(f) {
this.change = f - this.begin;
};
t.geFinish = function() {
return this.begin + this.change;
};
t.init = function(obj, prop, func, begin, finish, duration, suffixe) {
if (!arguments.length) return;
this._listeners = new Array();
this.addListener(this);
if (suffixe) this.suffixe = suffixe;
this.obj = obj;
this.prop = prop;
this.begin = begin;
this._pos = begin;
this.setDuration(duration);
if (func != null && func != '') {
this.func = func;
}
this.setFinish(finish);
}
t.start = function() {
this.rewind();
this.startEnterFrame();
this.broadcastMessage('onMotionStarted', { target: this, type: 'onMotionStarted' });
//alert('in');
}
t.rewind = function(t) {
this.stop();
this._time = (t == undefined) ? 0 : t;
this.fixTime();
this.update();
}
t.fforward = function() {
this._time = this._duration;
this.fixTime();
this.update();
}
t.update = function() {
this.setPosition(this.getPosition(this._time));
}
t.startEnterFrame = function() {
this.stopEnterFrame();
this.isPlaying = true;
this.onEnterFrame();
}
t.onEnterFrame = function() {
if (this.isPlaying) {
this.nextFrame();
setTimeout(Delegate.create(this, this.onEnterFrame), 0);
}
}
t.nextFrame = function() {
this.setTime((this.getTimer() - this._startTime) / 1000);
}
t.stop = function() {
this.stopEnterFrame();
this.broadcastMessage('onMotionStopped', { target: this, type: 'onMotionStopped' });
}
t.stopEnterFrame = function() {
this.isPlaying = false;
}
t.continueTo = function(finish, duration) {
this.begin = this._pos;
this.setFinish(finish);
if (this._duration != undefined)
this.setDuration(duration);
this.start();
}
t.resume = function() {
this.fixTime();
this.startEnterFrame();
this.broadcastMessage('onMotionResumed', { target: this, type: 'onMotionResumed' });
}
t.yoyo = function() {
this.continueTo(this.begin, this._time);
}
t.addListener = function(o) {
this.removeListener(o);
return this._listeners.push(o);
}
t.removeListener = function(o) {
var a = this._listeners;
var i = a.length;
while (i--) {
if (a[i] == o) {
a.splice(i, 1);
return true;
}
}
return false;
}
t.broadcastMessage = function() {
var arr = new Array();
for (var i = 0; i < arguments.length; i++) {
arr.push(arguments[i])
}
var e = arr.shift();
var a = this._listeners;
var l = a.length;
for (var i = 0; i < l; i++) {
if (a[i][e])
a[i][e].apply(a[i], arr);
}
}
t.fixTime = function() {
this._startTime = this.getTimer() - this._time * 1000;
}
t.getTimer = function() {
return new Date().getTime() - this._time;
}
Tween.backEaseIn = function(t, b, c, d, a, p) {
if (s == undefined) var s = 1.70158;
return c * (t /= d) * t * ((s + 1) * t - s) + b;
}
Tween.backEaseOut = function(t, b, c, d, a, p) {
if (s == undefined) var s = 1.70158;
return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
}
Tween.backEaseInOut = function(t, b, c, d, a, p) {
if (s == undefined) var s = 1.70158;
if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
}
Tween.elasticEaseIn = function(t, b, c, d, a, p) {
if (t == 0) return b;
if ((t /= d) == 1) return b + c;
if (!p) p = d * .3;
if (!a || a < Math.abs(c)) {
a = c; var s = p / 4;
}
else
var s = p / (2 * Math.PI) * Math.asin(c / a);
return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
}
Tween.elasticEaseOut = function(t, b, c, d, a, p) {
if (t == 0) return b; if ((t /= d) == 1) return b + c; if (!p) p = d * .3;
if (!a || a < Math.abs(c)) { a = c; var s = p / 4; }
else var s = p / (2 * Math.PI) * Math.asin(c / a);
return (a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b);
}
Tween.elasticEaseInOut = function(t, b, c, d, a, p) {
if (t == 0) return b; if ((t /= d / 2) == 2) return b + c; if (!p) var p = d * (.3 * 1.5);
if (!a || a < Math.abs(c)) { var a = c; var s = p / 4; }
else var s = p / (2 * Math.PI) * Math.asin(c / a);
if (t < 1) return -.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b;
}
Tween.bounceEaseOut = function(t, b, c, d) {
if ((t /= d) < (1 / 2.75)) {
return c * (7.5625 * t * t) + b;
} else if (t < (2 / 2.75)) {
return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
} else if (t < (2.5 / 2.75)) {
return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
} else {
return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
}
}
Tween.bounceEaseIn = function(t, b, c, d) {
return c - Tween.bounceEaseOut(d - t, 0, c, d) + b;
}
Tween.bounceEaseInOut = function(t, b, c, d) {
if (t < d / 2) return Tween.bounceEaseIn(t * 2, 0, c, d) * .5 + b;
else return Tween.bounceEaseOut(t * 2 - d, 0, c, d) * .5 + c * .5 + b;
}
Tween.strongEaseInOut = function(t, b, c, d) {
return c * (t /= d) * t * t * t * t + b;
}
Tween.regularEaseIn = function(t, b, c, d) {
return c * (t /= d) * t + b;
}
Tween.regularEaseOut = function(t, b, c, d) {
return -c * (t /= d) * (t - 2) + b;
}
Tween.regularEaseInOut = function(t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t + b;
return -c / 2 * ((--t) * (t - 2) - 1) + b;
}
Tween.strongEaseIn = function(t, b, c, d) {
return c * (t /= d) * t * t * t * t + b;
}
Tween.strongEaseOut = function(t, b, c, d) {
return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
}
Tween.strongEaseInOut = function(t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b;
return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
}
</script>
<style type="text/css">
/* this is used to style the turotial page. */
body {
background-image: url(http://www.webdm.cn/images/20100915/header_bg.jpg);
background-repeat: repeat-x;
margin: 0px;
padding: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 75%;
color: #666666;
line-height: 180%;
}
#content {
750px;
padding-top: 60px;
margin-right: auto;
margin-left: auto;
padding-bottom: 30px;
}
#content a:link, #content a:active, #content a:visited {
text-decoration : underline;
color: #35699B;
}
#content a:focus, #content a:hover{
text-decoration : none;
-moz-outline:0;
color: #FFFFFF;
background-color: #366EA1;
}
h1 {
color: #366A9C;
font-family: Arial, Helvetica, sans-serif;
font-size: 190%;
}
code {
font-size: 12px;
color: #FFFFFF;
padding: 15px;
705px;
background-color: #366E9F;
display: block;
font-family: "Courier New", Courier, mono;
border-left- 15px;
border-left-style: groove;
border-left-color: #0099FF;
}
hr {
height: 1px;
border-top- 1px;
border-top-style: dotted;
border-top-color: #366B9F;
padding: 0px;
margin-top: 40px;
margin-bottom: 20px;
display: block;
border-bottom- 0px;
border-bottom-style: none;
}
/* this is the CSS for the menu that you will need. */
#menu_holder {
height: 58px;
100%;
display: block;
position: absolute;
top: -58px;
}
#nav {
height: 58px;
542px;
margin: 0px auto;
padding: 0px;
background-image: url(http://www.webdm.cn/images/20100915/right.png);
background-repeat: no-repeat;
background-position: right;
}
#hit_area {
height: 120px;
100%;
margin: 0px;
padding: 0px;
display: block;
background-image: url(http://www.webdm.cn/images/20100915/badge.jpg);
background-repeat: no-repeat;
}
#hit_area2 {
100%;
background-image: url(http://www.webdm.cn/images/20100915/activate_text.jpg);
background-repeat: no-repeat;
background-position: center top;
padding: 0px;
display: block;
position: absolute;
margin: 0px;
left: 0px;
top: 120px;
}
#nav ul {
margin: 0px;
padding: 0px 0px 0px 21px;
height: 58px;
list-style-type: none;
background-image: url(http://www.webdm.cn/images/20100915/left.png);
background-repeat: no-repeat;
}
#nav li{
margin: 0px;
padding: 0px;
float: left;
}
#nav li a:link, #nav li a:active, #nav li a:visited {
background-image: url(http://www.webdm.cn/images/20100915/middle.png);
background-repeat: repeat-x;
height: 58px;
100px;
display: block;
line-height: 58px;
font-weight: bold;
color: #666666;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
font-size: 120%;
}
#nav li a:focus, #nav li a:hover{
text-decoration : none;
-moz-outline:0;
color: #FFFFFF;
background-image: url(http://www.webdm.cn/images/20100915/rollOver.png);
background-repeat: repeat-x;
}
</style>
</head>
<body>
<div id="hit_area" onmouseover="toggleDown();"></div>
<div id="menu_holder">
<div id="nav">
<ul>
<li><a href="http://jstween.blogspot.com">jstween</a></li>
<li><a href="http://ww.2210media.com">2210media</a></li>
<li><a href="http://www.digg.com">Digg</a></li>
<li><a href="http://www.cssmania.com">CSS Mania</a></li>
<li><a href="http://www.kirupa.com">Kirupa</a></li>
</ul>
</div>
</div>
<div id="hit_area2" onmouseover="toggleUp();">
<div id="content">
<h1>Webber 2.0 Dock Menu Tutorial</h1>
<p> In this short tutorial I will go though the CSS and a little bit of Javascript that creates the Webber 2.0 Dock Menu.</p>
<p>First things first though. I need to give credit where credit is due. I was browsing around the web and came across this site. <a href="http://whalesalad.com/"
target="_blank">http://whalesalad.com/</a>. In one of his articles that he wrote, he built a similar menu that you can find here. <a href="http://www.whalesalad.com/2006/07/12/osx-style-web-dock/"
target="_blank">http://www.whalesalad.com/2006/07/12/osx-style-web-dock/.</a> His attempt was fairly good, however it didn't work in any browser other than <a href="http://www.mozilla.com/firefox/"
target="_blank">FireFox</a>. Well, to say the least, this wasn't very good as FireFox was only used by 28% of the web population last time I checked. I thought to myslef, I could do that menu fairly
easily since the contact section of my site uses the same principal. So I gave it a shot. </p>
<p>The meat of the menu of course is the javascript. The javascript was written by Philippe Maegerman which you can find on his <a href="http://jstween.blogspot.com/" target="_blank">blog</a>. The
hide_menu.js contains the tween.js code script needed to move the menu and two extra functions I added for the mouse events. However, on <a href="http://jstween.blogspot.com/" target="_blank">Philippe
Maegerman's blog</a>, he has ColorTween.js, OpacityTween.js, TextTween.js, Sequence.js, and Parallel.js. All which can do marvelous effects to many many objects. I suggest that if you get some spare
time, go check out his extensive tutorials on how to use them! On a side note, if you happen to know anything about the<a href="http://www.adobe.com/devnet/flash/articles/tweening.html"
target="_blank"> tween.class</a> in Macromendia Flash, you will catch on to Philippe Maegerman's javascript very fast, as it uses <a href="http://www.robertpenner.com/" target="_blank">Robert
Penner's</a> tween classes. Aren't we one big happy family! :-D </p>
<p><a href="http://2210media.com/menu_dock/menu_dock.zip" target="_blank"><img src="download_btn.jpg" alt="webber 2.0 baby!" width="226" height="90" border="0" /></a></p>
<p>Inside the zip you will find these files:</p>
<ul>
<li>index.html</li>
<li>styles.css</li>
<li>hide_menu.js</li>
<li>7 images used for the menu and this page. </li>
</ul>
<p>Please note that the images for the menu are .pngs with transparency. If you are using Internet Explorer 6 or below, you will not see the transparency. You can change the images out to gifs, jpegs
or whatever suits your fancy ;-) </p>
<p>Now, lets get on with the Webber 2.0 Dock Menu!</p>
<hr>
<h1>The HTML and CSS</h1>
<p>Lets take a look at the HTML and CSS together. I find it easier to learn when I go over one thing at a time.</p>
<p>Make sure you add the code to include the hide_menu.js in between the <head> tags. </p>
<p><code><script type="text/javascript" src="hide_menu.js"></script></code></p>
<p>First thing we need to add is the invisible <strong>hit_area</strong> div that will be positioned at the very top by default since it is the first element in the body. In this case I made the hit
area 100% wide and 120px height. This gives an adequate area for the mouse to activate the menu.</p>
<p><code><div id="hit_area"></div></code></p>
<p><code>#hit_area {<br />
height: 120px;<br />
100%;<br />
margin: 0px;<br />
padding: 0px;<br />
display: block;<br />
background-image: url(badge.jpg);<br />
background-repeat: no-repeat;<br />
}</code>
</p>
<hr>
<p>Next we add the <strong>menu_holde</strong>r div which is what will slide the menu down. The trick with this div is to position it absolutely at a negative value. In this case I used top: -58px,
which is the height of the menu png. It is also very important that the height be 58px and the width be 100% and display is set to block.</p>
<p><code> <div id="hit_area"></div><br />
<div id="menu_holder"><br />
<br />
</div>
</code></p>
<p>
<code>
#menu_holder {<br />
height: 58px;<br />
100%;<br />
display: block;<br />
position: absolute;<br />
top: -58px;<br />
}
</code></p>
<hr>
<p>Inside the menu_holder div we insert the <strong>nav</strong> div. The nav div is used pretty much for a container for the menu so we can center it in the page horizontally as well as a place to
insert the right side rounded corner image. </p>
<p><code><div id="hit_area"></div><br />
<div id="menu_holder"><br />
<div id="nav"><br />
<br />
</div><br />
</div></code>
</p>
<p><code>#nav {<br />
height: 58px;<br />
542px;<br />
margin: 0px auto;<br />
padding: 0px;<br />
background-image: url(right.png);<br />
background-repeat: no-repeat;<br />
background-position: right;<br />
}</code></p>
<hr>
<p>Inside the nav we add an <ul> and our links. Then we use a little more CSS to style the <ul> and <li>. One thing I will mention is that the <li> tags need to be floated
left. Other wise the <ul> will be vertical and not horizontal. A couple other tricks is to use text-align center on the <li>, to center horizontally, and to use a line height that is equal
to the height of the nav to center the text vertically. In this case its 58px. You will also see that for the <ul> I added a background image for the left side rounded corner image. I then added
some left padding that is the width of the image, 21px. </p>
<p><code><div id="hit_area"></div><br />
<div id="menu_holder"><br />
<div id="nav"><br />
<ul><br />
<li><a href="http://jstween.blogspot.com">jstween</a></li><br />
<li><a href="http://ww.2210media.com">2210media</a></li><br />
<li><a href="http://www.digg.com">Digg</a></li><br />
<li><a href="http://www.cssmania.com">CSS Mania</a></li><br />
<li><a href="http://www.kirupa.com">Kirupa</a></li><br />
</ul><br />
</div><br />
</div></code></p>
<p><code>#nav ul {<br />
margin: 0px;<br />
padding: 0px 0px 0px 21px;<br />
height: 58px;<br />
list-style-type: none;<br />
background-image: url(left.png);<br />
background-repeat: no-repeat;<br />
}<br />
#nav li{<br />
margin: 0px;<br />
padding: 0px;<br />
float: left;<br />
}<br />
#nav li a:link, #nav li a:active, #nav li a:visited {<br />
background-image: url(middle.png);<br />
background-repeat: repeat-x;<br />
height: 58px;<br />
100px;<br />
display: block;<br />
line-height: 58px;<br />
font-weight: bold;<br />
color: #666666;<br />
text-decoration: none;<br />
font-family: Arial, Helvetica, sans-serif;<br />
text-align: center;<br />
font-size: 120%;<br />
}<br />
#nav li a:focus, #nav li a:hover{<br />
text-decoration : none;<br />
-moz-outline:0;<br />
color: #FFFFFF;<br />
background-image: url(rollOver.png);<br />
background-repeat: repeat-x;<br />
}</code></p>
<hr>
<p>Next we add the div that we use to move the menu back up. In this case I used a container that will wrap the content that you are reading now and just called it <strong>hit_test2</strong>. You
could actually assign the event to move the menu back up to any div you please. </p>
<p><code><div id="hit_area"></div><br />
<div id="menu_holder"><br />
<div id="nav"><br />
<ul><br />
<li><a href="http://jstween.blogspot.com">jstween</a></li><br />
<li><a href="http://ww.2210media.com">2210media</a></li><br />
<li><a href="http://www.digg.com">Digg</a></li><br />
<li><a href="http://www.cssmania.com">CSS Mania</a></li><br />
<li><a href="http://www.kirupa.com">Kirupa</a></li><br />
</ul><br />
</div><br />
</div><br />
<div id="hit_area2"><br />
<!-- tutorial content here --> <br />
</div>
</code></p>
<p><code>#hit_area2 {<br />
100%;<br />
background-image: url(activate_text.jpg);<br />
background-repeat: no-repeat;<br />
background-position: center top;<br />
padding: 0px;<br />
display: block;<br />
position: absolute;<br />
margin: 0px;<br />
left: 0px;<br />
top: 120px;<br />
}</code></p>
<hr />
<p>Lastly we add the onmouseover events to call the functions to slide the menu up or down on our two <strong>hit_area</strong> divs.</p>
<p><code><div id="hit_area" <strong>onmouseover="toggleDown();"</strong>></div><br />
<div id="menu_holder"><br />
<div id="nav"><br />
<ul><br />
<li><a href="http://jstween.blogspot.com">jstween</a></li><br />
<li><a href="http://ww.2210media.com">2210media</a></li><br />
<li><a href="http://www.digg.com">Digg</a></li><br />
<li><a href="http://www.cssmania.com">CSS Mania</a></li><br />
<li><a href="http://www.kirupa.com">Kirupa</a></li><br />
</ul><br />
</div><br />
</div><br />
<div id="hit_area2" <strong>onmouseover="toggleUp();"</strong>><br />
<!-- tutorial content here --> <br />
</div> </code></p>
<hr />
<h1>The javascript </h1>
<p>Inside the hide_menu.js all I added was a function to initiate the onmouseover events for the divs to activate the menu. Please make sure you read the documentation on <a
href="http://jstween.blogspot.com/" target="_blank">Philippe Maegerman's blog</a> to understand what everything is doing inside the functions. Everything below these two functions is the javascript
tween code written by <a href="http://jstween.blogspot.com/" target="_blank">Philippe Maegerman</a>. </p>
<p><code>// define a var down to false <br />
var down = false;<br />
<br />
// if down equals false and the mouse is over the div hit_area, slide the menu down <br />
function toggleDown() {<br />
if(down==false){<br />
down=true;<br />
t1 = new Tween(document.getElementById('menu_holder').style, 'top', Tween.strongEaseOut, -58, 0, .6, 'px');<br />
t1.start();<br />
}<br />
}<br />
<br />
// if down equals true and the mouse is over the div hit_area2, slide the menu up <br />
function toggleUp() {<br />
if(down==true){<br />
down=false;<br />
t1 = new Tween(document.getElementById('menu_holder').style, 'top', Tween.strongEaseIn, 0, -58, .4, 'px');<br />
t1.start();<br />
}<br />
}</code></p>
<p>And thats it! Its very simple method to add some fun interactivity to your web site. If you read the documentation over at <a href="http://jstween.blogspot.com/" target="_blank">Philippe
Maegerman's blog</a>, you will soon realize that there are MANY things you can do with his fabulous tween code. If you have any questions, feel free to contact me through my web site at <a
href="http://www.2210media.com" target="_blank">www.2210media.com</a>. </p>
<p>Thanks for taking the time to read this and hopefully you learned something!<br />
Peace!
<br />
Josh Rhame
</p>
<p><strong>p.s.</strong> A couple things to note. If you move the mouse spasticly over the two divs, yes, the menu will freak out some. I am not a hardcore coder, so if you know of a way to clean it
up, have at it! :-) </p>
<p><strong>p.s.s.</strong> Yes, Im making fun of the phrase web 2.0, which I think is totally dumb ;-) </p>
<table width="728" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><p align="center">代码整理：<a href="http://www.webdm.cn/" target="_blank">懒人图库</a> </p>
<p
align="center">＊尊重他人劳动成果，转载请自觉注明出处！注：此&#
20195;码仅供学习交流，请勿用于商业用途。</p>
<p align="center"></p>
<p align="center"></p></td>
</tr>
</table>
<p> </p>
</div>
</div>
</body>
</html>
<br>
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！</p>
代码来自：http://www.webdm.cn/webcode/1f7fd618-22c9-48d0-b24e-b7534bfa2359.html