Js简易滑动门效果和css标题菜单栏效果

Js简易滑动门效果

Css部分

.www_zzjs_net_show{display:none;width:472px;height:200px;border:1pxsolid #CCCCCC;margin-left:10px}

#con_zzjs_1{display:block;}

#menubox{width:500px;height:24px;margin-bottom:7px;}

#menubox ul{margin:0;padding:0;}

#menubox ulli{float:left;list-style:none;display:inline;padding-top:7px;border:1px solid#D1D1D1;border-bottom:0px;margin:0 10px;white-space:nowrap; text-

overflow:ellipsis;cursor:pointer;width:60px;height:24px;text-align:center;font-size:14px;overflow:visible;}

#menubox ul li.hover{border-top:2px solid#D1D1D1;border-right:2px solid #D1D1D1;border-left:2px solid #D1D1D1;color:#000000;font-weight:bold;border-bottom:0px solid #D1D1D1;}

 

Js部分

function setTab(name,cursel,n){//class名  当前第几个 总共几个

for(i=1;i<=n;i++){

var menu=document.getElementById(name+i);/*zzjs1  zzjs2  zzjs3*/

varcon=document.getElementById("con_"+name+"_"+i);/*con_zzjs_1 */

menu.className=i==cursel?"hover":"";/*三目运算 等号优先 当i==cursel时属性为hover否则为””*/

con.style.display=i==cursel?"block":"none";//当i==cursel时显示否则隐藏

}

}

 

Html部分

<div id="main">

      

<div id="menubox">

<!--样式1 滑动选项卡-->

<ul>

<li id="zzjs1"οnmοusemοve="setTab('zzjs',1,6)" class="hover">第一个</li>

<li id="zzjs2"οnmοusemοve="setTab('zzjs',2,6)">第二个</li>

<li id="zzjs3"οnmοusemοve="setTab('zzjs',3,6)">第三个</li>

<li id="zzjs4"οnmοusemοve="setTab('zzjs',4,6)">第四个</li>

<li id="zzjs5"οnmοusemοve="setTab('zzjs',5,6)">第五个</li>

<li id="zzjs6"οnmοusemοve="setTab('zzjs',6,6)">第六个</li>

</ul>

 </div>

 

<div id="conten">

<div class="www_zzjs_net_show"id="con_zzjs_1">

<p>第一个的内容</p>

</div>

<div class="www_zzjs_net_show"id="con_zzjs_2">

<p>第二个的内容</p>

</div>

<div class="www_zzjs_net_show"id="con_zzjs_3">

<p>第三个的内容</p>

</div>

<div class="www_zzjs_net_show"id="con_zzjs_4">

<p>第四个的内容</p>

</div>

<div class="www_zzjs_net_show"id="con_zzjs_5">

<p>第五个的内容</p>

</div>

<div class="www_zzjs_net_show"id="con_zzjs_6">

<p>第六个的内容</p>

</div>

</div>

      

</div>

Css标题菜单栏

<div class="menu">

<ul>

 

<li>

<a class="drop" href="http://www.52css.com/">DEMOS</a>

<table><tr><td>

   <ul>

<li><a href="http://www.52css.com/" title="The zero dollar ads page">zerodollars advertising page</a></li>

<li><a href="http://www.52css.com/" title="Wrapping text aroundimages">wrapping text around images</a></li>

<li><a href="http://www.52css.com/" title="Styling forms">styledform</a></li>

<li><a href="http://www.52css.com/" title="Removing active/focusborders">active focus</a></li>

<li><a class="drop"href=" http://www.52css.com/" title="Hover/click with noactive/focus borders">hover/click with no borders</a> </li>

<li class="upone"><ahref=" http://www.52css.com/" title="Multi-position dropshadow">shadow boxing</a></li>

<li><a href="http://www.52css.com/" title="Image Map for detailedinformation">image map for detailed information</a></li>

<li><a href="http://www.52css.com/" title="fun with background images">funwith background images</a></li>

<li><a href="http://www.52css.com/" title="fade-out scrolling">fadescrolling</a></li>

<li><a href="http://www.52css.com/" title="em size images compared">emimage sizes compared</a></li>

   </ul>

</td></tr></table>

</li>

 

 

<li><a href="http://www.52css.com/">BOXES</a>

<table><tr><td>

   <ul>

<li><a href="http://www.52css.com/" title="a coded list of spies">a codedlist of spies</a></li>

<li><a href="http://www.52css.com/" title="a horizontal verticalmenu">vertical menu</a></li>

<li><a href="http://www.52css.com/" title="an enlarging unorderedlist">enlarging unordered list</a></li>

<li><a href="http://www.52css.com/" title="an unordered list with linkimages">link images</a></li>

<li><a href="http://www.52css.com/" title="non-rectangularlinks">non-rectangular</a></li>

<li><a href="http://www.52css.com/" title="jigsaw links">jigsawlinks</a></li>

<li><a href="http://www.52css.com/" title="circular links">circularlinks</a></li>

   </ul>

</td></tr></table>

</li>

 

 

<li><a href="http://www.52css.com/">MOZILLA</a>

<table><tr><td>

   <ul>

<li><a href="http://www.52css.com/" title="A drop down menu">drop downmenu</a></li>

<li><a href="http://www.52css.com/" title="A cascading menu">cascadingmenu</a></li>

<li><a href="http://www.52css.com/" title="Usingcontent:">content:</a></li>

<li><a href="http://www.52css.com/" title=":hover applied to a div">mozziebox</a></li>

<li><a href="http://www.52css.com/" title="I can build a rainbow">I canbuild a rainbow with transparent borders</a></li>

<li><a href="http://www.52css.com/" title="Snooker cue">a snooker cueusing border art</a></li>

<li><a href="http://www.52css.com/" title="Target Practise">targetpractise</a></li>

<li><a href="http://www.52css.com/" title="Two tone headings">two toneheadings</a></li>

<li><a href="http://www.52css.com/" title="Shadow text">shadowtext</a></li>

   </ul>

</td></tr></table>

</li>

 

 

<li><a href="http://www.52css.com/">EXPLORER</a>

<table><tr><td>

   <ul>

<li><a href="http://www.52css.com/" title="Example one">the first examplefor Internet Explorer</a></li>

<li><a href="http://www.52css.com/" title="Weft fonts">weftfonts</a></li>

<li><a href="http://www.52css.com/" title="Vertical align">verticallyaligning text</a></li>

   </ul>

</td></tr></table>

</li>

 

 

<li><a href="http://www.52css.com/">OPACITY</a>

<table><tr><td>

   <ul>

<li><a href="http://www.52css.com/" title="colour wheel">a colour wheelusing opaque colours</a></li>

<li><a href="http://www.52css.com/" title="a menu using opacity">a menuusing opacity</a></li>

<li><a href="http://www.52css.com/" title="partial opacity">partialopacity</a></li>

<li><a href="http://www.52css.com/" title="partial opacity II">partialopacity II</a></li>

<li><a class="drop"href=" http://www.52css.com/" title="Hover/click with noactive/focus borders">HOVER/CLICK

 

<table><tr><td>

   <ul>

<li><a href="http://www.52css.com/" title="A drop down menu">drop downmenu</a></li>

<li><a href="http://www.52css.com/" title="A cascading menu">cascadingmenu</a></li>

<li><a href="http://www.52css.com/" title="Using content:">content:</a></li>

   </ul>

</td></tr></table>

 

</a></li>

   </ul>

</td></tr></table>

</li>

 

</ul>

</div>

Css部分

@charset "utf-8";

/* CSS Document */

 

 

.menu {font-family: verdana, sans-serif;

width:750px;

position:relative;

font-size:0.85em;

padding-bottom:250px;

}

.menu ul {

padding:0;

margin:0;

list-style-type: none;

}

.menu ul li {

float:left;

position:relative;

}

.menu ul li a, .menu ul li a:visited {

display:block;

text-decoration:none;

color:#000;

width:139px;

height:3em;

color:#000;

border:1px solid #fff;

border-width:1px 1px 0 0;

background:#dfc184;

padding-left:10px;

line-height:3em;

}

 

.menu ul li ul {

display: none;

}

table {

margin:-1px;

border-collapse:collapse;

font-size:1em;

}

 

 

/* specific to non IE browsers */

.menu ul li:hover a {

color:#fff;

background:#bd8d5e;

}

.menu ul li:hover ul {

display:block;

position:absolute;

top:3em;

margin-top:1px;

left:0;

width:150px;

}

.menu ul li:hover ul li ul {

display: none;

}

.menu ul li:hover ul li a {

display:block;

background:#faeec7;

color:#000;

height:auto;

line-height:1.2em;

padding:5px 10px;

width:129px

}

.menu ul li:hover ul li a.drop {

background:#c9c9a7;

}

.menu ul li:hover ul li a:hover {

background:#c9c9a7;

color:#000;

}

.menu ul li:hover ul li:hover ul {

display:block;

position:absolute;

left:150px;

top:0;

width:150px;

}

.menu ul li:hover ul li:hover ul.left {

left:-150px;

}

.menu ul li a:hover {

color:#fff;

background:#bd8d5e;

}

.menu ul li a:hover ul {

display:block;

position:absolute;

top:3em;

left:0;

background:#fff;

margin-top:0;

}

.menu ul li a:hover ul li a {

display:block;

background:#dbe4ab;

color:#000;

height:auto;

line-height:1.5em;

padding:5px 10px;

width:150px;

}

.menu ul li a:hover ul li a.drop {

background:#c9c9a7;

}

.menu ul li a:hover ul li a ul {

visibility:hidden;

position:absolute;

height:0;

width:0;

}

.menu ul li a:hover ul li a:hover {

background:#c9c9a7; color:#000;

}

.menu ul li a:hover ul li a:hover ul {

visibility:visible;

position:absolute;

top:0;

color:#000;

left:150px;

}

.menu ul li a:hover ul li a:hover ul.left {

left:-150px;

}

</style>