Js简易滑动门效果和css标题菜单栏效果
2015-09-15 19:11
597 查看
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"onmousemove="setTab('zzjs',1,6)" class="hover">第一个</li>
<li id="zzjs2"onmousemove="setTab('zzjs',2,6)">第二个</li>
<li id="zzjs3"onmousemove="setTab('zzjs',3,6)">第三个</li>
<li id="zzjs4"onmousemove="setTab('zzjs',4,6)">第四个</li>
<li id="zzjs5"onmousemove="setTab('zzjs',5,6)">第五个</li>
<li id="zzjs6"onmousemove="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>
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"onmousemove="setTab('zzjs',1,6)" class="hover">第一个</li>
<li id="zzjs2"onmousemove="setTab('zzjs',2,6)">第二个</li>
<li id="zzjs3"onmousemove="setTab('zzjs',3,6)">第三个</li>
<li id="zzjs4"onmousemove="setTab('zzjs',4,6)">第四个</li>
<li id="zzjs5"onmousemove="setTab('zzjs',5,6)">第五个</li>
<li id="zzjs6"onmousemove="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>
相关文章推荐
- css 雪碧图的总结
- 去掉iphone 的圆角样式
- JS + CSS 实现导航下拉菜单
- CSS+JS 悬浮固定菜单效果
- 纯CSS实现超简单的二级下拉导航菜单代码
- CSS实现的中英文双语菜单效果代码
- html 和 css
- CSS格式化排版
- CSS实现带有小图片的LI图标列表菜单
- CSS实现有立体感的横向按钮式菜单效果代码
- A标签伪类
- CSS3选择器:enabled 和 disabled
- 纯CSS画的基本图形(矩形、圆形、三角形、多边形、爱心、八卦等)20种类型
- css-边框透明
- css学习1
- CSS选择器
- 10个顶级的CSS3代码生成器-兄弟连IT教育
- CSS相对定位|绝对定位(五)之z-index篇
- 叁、js中的css
- CSS