以下是 漂亮的可以自动显示_隐藏的导航菜单特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!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>
<meta name="keywords" content="JS代码,菜单导航,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为漂亮的可以自动显示/隐藏的导航菜单，属于站长常用代码" />
<title>漂亮的可以自动显示/隐藏的导航菜单</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript" src="hide_menu.js"></script>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="hit_area" onmouseover="toggleDown();"></div>
<div id="menu_holder">
<div id="nav">
<ul>
<li><a href="#jstween.blogspot.com">jstween</a></li>
<li><a href="#ww.2210media.com">2210media</a></li>
<li><a href="#www.digg.com">Digg</a></li>
<li><a href="#www.cssmania.com">CSS Mania</a></li>
<li><a href="#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="#whalesalad.com/" target="_blank">#whalesalad.com/</a>. In one of his articles that he wrote, he built a similar menu that you can find here. <a href="#www.whalesalad.com/2006/07/12/osx-style-web-dock/" target="_blank">#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="#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="#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="#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="#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="#www.robertpenner.com/" target="_blank">Robert Penner's</a> tween classes. Aren't we one big happy family! :-D </p>
<p><a href="#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 />
width: 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 />
width: 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 />
width: 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="#jstween.blogspot.com">jstween</a></li><br />
<li><a href="#ww.2210media.com">2210media</a></li><br />
<li><a href="#www.digg.com">Digg</a></li><br />
<li><a href="#www.cssmania.com">CSS Mania</a></li><br />
<li><a href="#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 />
width: 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="#jstween.blogspot.com">jstween</a></li><br />
<li><a href="#ww.2210media.com">2210media</a></li><br />
<li><a href="#www.digg.com">Digg</a></li><br />
<li><a href="#www.cssmania.com">CSS Mania</a></li><br />
<li><a href="#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 />
width: 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="#jstween.blogspot.com">jstween</a></li><br />
<li><a href="#ww.2210media.com">2210media</a></li><br />
<li><a href="#www.digg.com">Digg</a></li><br />
<li><a href="#www.cssmania.com">CSS Mania</a></li><br />
<li><a href="#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="#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="#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="#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="#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="#13141618.taobao.com/" target="_blank">懒人图库</a>　</p>
<p align="center">＊尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。</p>
<p align="center"></p>
<p align="center"><p>来源：<a class="external" href="#2210media.com/dock_menu/" target="_blank" rel="external">Webber 2.0 Dock Menu</a></p></p>
<p align="center"></p></td>
</tr>
</table>
<p> </p>
</div>
</div>
</body>
</html>
JS代码(hide_menu.js):
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 EQUATIONSOpen source under the BSD License.Copyright (c) 2001 Robert PennerJavaScript version copyright (C) 2006 by Philippe MaegermanAll rights reserved.Redistribution and use in source and binary forms,with or withoutmodification,are permitted provided that the following conditions aremet:* Redistributions of source code must retain the above copyrightnotice,this list of conditions and the following disclaimer. * Redistributions in binary form must reproduce the abovecopyright notice,this list of conditions and the following disclaimerin the documentation and/or other materials provided with thedistribution. * Neither the name of the author nor the names of contributors maybe used to endorse or promote products derived from this softwarewithout specific prior written permission.THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES,INCLUDING,BUT NOTLIMITED TO,THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FORA PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHTOWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT,INDIRECT,INCIDENTAL,SPECIAL,EXEMPLARY,OR CONSEQUENTIAL DAMAGES (INCLUDING,BUT NOTLIMITED TO,PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
LOSS OF USE,DATA,OR PROFITS;
OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANYTHEORY OF LIABILITY,WHETHER IN CONTRACT,STRICT LIABILITY,OR TORT(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USEOF 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;
}
elsevar 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;
}
CSS代码(styles.css):
/* this is used to style the turotial page. */
body{background-image:url(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{width: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;width:705px;background-color:#366E9F;display:block;font-family:"Courier New",Courier,mono;border-left-width:15px;border-left-style:groove;border-left-color:#0099FF;}
hr{height:1px;border-top-width:1px;border-top-style:dotted;border-top-color:#366B9F;padding:0px;margin-top:40px;margin-bottom:20px;display:block;border-bottom-width:0px;border-bottom-style:none;}
/* this is the CSS for the menu that you will need. */
#menu_holder{height:58px;width:100%;display:block;position:absolute;top:-58px;}
#nav{height:58px;width:542px;margin:0px auto;padding:0px;background-image:url(right.png);background-repeat:no-repeat;background-position:right;}
#hit_area{height:120px;width:100%;margin:0px;padding:0px;display:block;background-image:url(badge.jpg);background-repeat:no-repeat;}
#hit_area2{width:100%;background-image:url(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(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(middle.png);background-repeat:repeat-x;height:58px;width: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(rollOver.png);background-repeat:repeat-x;}
分享到QQ
分享到微博
微信扫一扫
