欢迎加入EUCMS官方QQ交流群,与更多EUCMS用户一起讨论,共同发财!

QQ群:1222386
> 资讯中心 >> 建站技术 >>正文
瑞克导航条成效
2021-06-28 1614 收藏
下面是和dhc差不久不多的导航成效源码,成效兼容性特别非常高,欢迎人人测试举报。
<style type="text/css">
* {
    text-align:center;
    font-size:12px;
    margin:0px;
    padding:0px
}
#div {
    margin:auto;
    margin-top:10px
}
#div ul li {
    list-style-type:none;
    float:left
}
#div ul li a {
    text-decoration:none;    
    color:#fff;
    display:block;
    margin-top:3px;
    background:#900
}
#div #title01,#div #title02,#div #title03,#div #title04,#div #title05,#div #title06,#div #title07 {
    padding:9px 33px 9px 33px;
    background:url(line.gif) no-repeat right top
}
#div #title07 {
    background:url()
}
#div ul li a:hover {
    margin-top:0px
}
#div ul #a1 {
    margin-top:0px;
    color:#F00
}
#div ul #title01 {
    padding:12px 33px 9px 33px;
    background:url(menu_bg.gif) no-repeat top left
}
#div_bottom {
    width:799px;
    height:25px;
    background:url(div_bottom.gif) no-repeat top left;
    position:relative
}

#div_bottom #jieshi01,#div_bottom #jieshi02,#div_bottom #jieshi03,#div_bottom #jieshi04,#div_bottom #jieshi05,#div_bottom #jieshi06,#div_bottom #jieshi07 {
    display:none
}
#div_bottom #jieshi01 ul li,#div_bottom #jieshi02 ul li,#div_bottom #jieshi03 ul li,#div_bottom #jieshi04 ul li,#div_bottom #jieshi05 ul li,#div_bottom #jieshi06 ul li,#div_bottom #jieshi07 ul li {
    list-style:none;
    float:left;
    margin-left:20px;
    display:block;
    padding:5px 0px 5px 0px
}
#div_bottom #jieshi01 a,#div_bottom #jieshi02 a,#div_bottom #jieshi03 a,#div_bottom #jieshi04 a,#div_bottom #jieshi05 a,#div_bottom #jieshi06 a,#div_bottom #jieshi07 a {
    text-decoration:none;
    color:#990000
}
#div_bottom #jieshi01 a:hover,#div_bottom #jieshi02 a:hover,#div_bottom #jieshi03 a:hover,#div_bottom #jieshi04 a:hover,#div_bottom #jieshi05 a:hover,#div_bottom #jieshi06 a:hover,#div_bottom #jieshi07 a:hover {
    text-decoration:none;
    color:#FF0000
}
#div_bottom #jieshi01 {
    position:absolute;
    left:14px;
    display:block
}
#div_bottom #jieshi02 {
    position:absolute;
    left:128px
}
#div_bottom #jieshi03 {
    position:absolute;
    left:242px
}
#div_bottom #jieshi04 {
    position:absolute;
    left:356px
}
#div_bottom #jieshi05 {
    position:absolute;
    left:470px
}
#div_bottom #jieshi06 {
    position:absolute;
    left:240px
}
#div_bottom #jieshi07 {
    position:absolute;
    left:698px
}
</style>

<script language="javascript">
function over(title_who,a_who,_title_who){
    for(i=1;i<=7;i++){
        document.getElementById("title0"+i).style.background="url(line.gif) no-repeat right top"
        document.getElementById("title0"+i).style.padding="9px 33px 9px 33px"
        document.getElementById("a"+i).style.margin="3px 0px 0px 0px"
        document.getElementById("a"+i).style.color="#ffffff"
    }
        document.getElementById(title_who).style.background="url(menu_bg.gif) no-repeat right top"
        document.getElementById(title_who).style.padding="12px 33px 9px 33px"
        document.getElementById(a_who).style.margin="0px"
        document.getElementById(_title_who).style.background="url()"
        document.getElementById(a_who).style.color="#ff0000"
        if(title_who!="title07"){
            document.getElementById("title07").style.background="url()"
        }        
}
function out(){
    for(i=1;i<=7;i++){
        document.getElementById("title0"+i).style.background="url(line.gif) no-repeat right top"
        document.getElementById("title0"+i).style.padding="9px 33px 9px 33px"
        document.getElementById("a"+i).style.margin="3px 0px 0px 0px"
        document.getElementById("jieshi0"+i).style.display="none"
        document.getElementById("a"+i).style.color="#ffffff"
    }
    document.getElementById("title01").style.background="url(menu_bg.gif) no-repeat right top"
    document.getElementById("title01").style.padding="12px 33px 9px 33px"
    document.getElementById("a1").style.margin="0px"
    document.getElementById("title07").style.background="url()"
    document.getElementById("jieshi01").style.display="block"
    document.getElementById("a1").style.color="#ff0000"
}

function show_jieshi(who){
    for(i=1;i<=7;i++){
        document.getElementById("jieshi0"+i).style.display="none"
    }
    document.getElementById(who).style.display="block"
}

function hide_jieshi(who){
    if(who!="jieshi01"){
    document.getElementById(who).style.display="none"
    }
}

var timer,timer1,timer2,timer3,timer4,timer5,timer6,timer7

function setTime(n){
    if(n==1){
        timer1=setTimeout(function(){hide_jieshi("jieshi01")},200)
    }
    if(n==2){
        timer2=setTimeout(function(){hide_jieshi("jieshi02")},200)
    }
    if(n==3){
        timer3=setTimeout(function(){hide_jieshi("jieshi03")},200)
    }
    if(n==4){
        timer4=setTimeout(function(){hide_jieshi("jieshi04")},200)
    }
    if(n==5){
        timer5=setTimeout(function(){hide_jieshi("jieshi05")},200)
    }
    if(n==6){
        timer6=setTimeout(function(){hide_jieshi("jieshi06")},200)
    }
    if(n==7){
        timer7=setTimeout(function(){hide_jieshi("jieshi07")},200)
    }    
}
</script>

<table cellpadding=0 cellspacing=0 border=0 align=center style="margin:auto"><tr>
<td>
<div id="div">
<ul>
    <li id="lianjie01" onmouseo ver="over('title01','a1','title07');show_jieshi('jieshi01');clearTimeout(timer);clearTimeout(timer1)" onmouseo ut="setTime('1');timer=setTimeout('out()',100)"><a href="#" id="a1"><div id="title01">财税首页</div></a></li>

    <li id="lianjie02" onmouseo ver="over('title02','a2','title01');show_jieshi('jieshi02');clearTimeout(timer);clearTimeout(timer2)" onmouseo ut="setTime('2');timer=setTimeout('out()',100)"><a href="#" id="a2"><div id="title02">政务公然</div></a></li>

    <li id="lianjie03" onmouseo ver="over('title03','a3','title02');show_jieshi('jieshi03');clearTimeout(timer);clearTimeout(timer3)" onmouseo ut="setTime('3');timer=setTimeout('out()',100)"><a href="#" id="a3"><div id="title03">网上处事</div></a></li>

    <li id="lianjie04" onmouseo ver="over('title04','a4','title03');show_jieshi('jieshi04');clearTimeout(timer);clearTimeout(timer4)" onmouseo ut="setTime('4');timer=setTimeout('out()',100)"><a href="#" id="a4"><div id="title04">关照通告中央</div></a></li>

    <li id="lianjie05" onmouseo ver="over('title05','a5','title04');show_jieshi('jieshi05');clearTimeout(timer);clearTimeout(timer5)" onmouseo ut="setTime('5');timer=setTimeout('out()',100)"><a href="#" id="a5"><div id="title05">法则中央</div></a></li>

    <li id="lianjie06" onmouseo ver="over('title06','a6','title05');show_jieshi('jieshi06');clearTimeout(timer);clearTimeout(timer6)" onmouseo ut="setTime('6');timer=setTimeout('out()',100)"><a href="#" id="a6"><div id="title06">财税文化</div></a></li>

    <li id="lianjie07" onmouseo ver="over('title07','a7','title06');show_jieshi('jieshi07');clearTimeout(timer);clearTimeout(timer7)" onmouseo ut="setTime('7');timer=setTimeout('out()',100)"><a href="#" id="a7"><div id="title07">专题宣传</div></a></li>
</ul>
</div>
</td></tr>
<tr>
<td>
<div id="div_bottom" onmouseo ver="clearTimeout(timer)" onmouseo ut="timer=setTimeout('out()',100)">

<div id="jieshi01" onmouseo ver="clearTimeout(timer1)" onmouseo ut="setTime('1')">
        <ul>
            <li>欢迎惠临<a href="#">乐清财税网</a>,您是本站第2842位客人!</li>
        </ul>    
    </div>

<div id="jieshi02" onmouseo ver="clearTimeout(timer2)" onmouseo ut="setTime('2')">
        <ul>
            <li><a href="#">财税介绍&nbsp;&nbsp;|</a></li>
            <li><a href="#">机构设置&nbsp;&nbsp;|</a></li>
            <li><a href="#">处事指南&nbsp;&nbsp;|</a></li>
            <li><a href="#">税种介绍&nbsp;&nbsp;|</a></li>
            <li><a href="#">财税动态&nbsp;&nbsp;|</a></li>
            <li><a href="#">公车动态</a></li>
        </ul>
    </div>
    
<div id="jieshi03" onmouseo ver="clearTimeout(timer3)" onmouseo ut="setTime('3')">
        <ul>
            <li><a href="#">下载专区&nbsp;&nbsp;|</a></li>
            <li><a href="#">上传专区&nbsp;&nbsp;|</a></li>
            <li><a href="#">申请报名&nbsp;&nbsp;|</a></li>
            <li><a href="#">盘问体系&nbsp;&nbsp;|</a></li>
            <li><a href="#">咨询投诉&nbsp;&nbsp;|</a></li>
            <li><a href="#">餍足窥察</a></li>
        </ul>
    </div>
    
<div id="jieshi04" onmouseo ver="clearTimeout(timer4)" onmouseo ut="setTime('4')">
        <ul>
            <li><a href="#">最新关照通告&nbsp;&nbsp;|</a></li>
            <li><a href="#">司帐关照通告</a></li>
        </ul>
    </div>
    
<div id="jieshi05" onmouseo ver="clearTimeout(timer5)" onmouseo ut="setTime('5')">
        <ul>
            <li><a href="#">最新政策&nbsp;&nbsp;|</a></li>
            <li><a href="#">政策法则盘问</a></li>
        </ul>
    </div>
    
<div id="jieshi06" onmouseo ver="clearTimeout(timer6)" onmouseo ut="setTime('6')">
        <ul>
            <li><a href="#">税收宣传&nbsp;&nbsp;|</a></li>
            <li><a href="#">军队制作&nbsp;&nbsp;|</a></li>
            <li><a href="#">文明竖立&nbsp;&nbsp;|</a></li>
            <li><a href="#">亲年论坛&nbsp;&nbsp;|</a></li>
            <li><a href="#">廉政课堂</a></li>
        </ul>
    </div>
    
<div id="jieshi07" onmouseo ver="clearTimeout(timer7)" onmouseo ut="setTime('7')">
        <ul>
            <li><a href="#">专题宣传取</a></li>
        </ul>
    </div>
</div>
</td></tr>
</table>

 

你觉得这篇文章怎么样?

0 0
参与讨论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
成品站
购买流程
  • 注册会员
  • 选择网站模板
  • 免费开通试用
  • 绑定域名试用
  • 选择套餐
  • 付款转正
  • 域名正式生效
  • 网站正式上线
  • 分站:
    扫描关注微信

    扫描加微信

    13852154923

    0516-66628816

    工作日 9:00-12:00 13:30-18:00
    周六及部分节假日提供值班服务
    2186398
    群:1222386
    做网站网站制作网络公司网站建设怎么做网站北京上海广州深圳南京合肥芜湖新疆甘肃济南
    Copyright@2003-2024 徐州亿优网架钢结构工程有限公司版权所有 Powered by EUCMS-v6.3 | 网站地图 苏ICP备19019550号