博路网络在给宜兴企业客户的网站设计时,有时导航需要做成全屏大图片上,当鼠标向下滚动的时候,导航会由当前状态,切换成出现导航白背景+字体颜色为黑色的导航条,这样更方便浏览者快速点击导航,找到自己需要的内容。以下是博路网络给客户添加的一些代码,先看下效果图:
当网站打开时的当前导航状态:
当鼠标向下滚动时导航的状态:
当鼠标向上滚动恢复时导航状态:
前端代码:
<div id="bannertop">
<div id="bannersy">
<div class="logo"><a href="index.asp" title="客户网站logo"></a></div>
<div id="menu">
<ul id="nav">
<li class="mainlevelnewsx"><a href="#" <%if instr(1,request.servervariables("path_info"),"#",0)>0 then%>class="y"<%end if%>>网站首页</a></li>
<li class="mainlevelnewsx"><a href="#" <%if instr(1,request.servervariables("path_info"),"#",0)>0 then%>class="y"<%end if%>>关于我们 </a></li>
<li class="mainlevelnewsx"><a href="#" <%if instr(1,request.servervariables("path_info"),"#",0)>0 then%>class="y"<%end if%>>产品介绍</a></li>
<li class="mainlevelnewsx"><a href="#" <%if instr(1,request.servervariables("path_info"),"#",0)>0 then%>class="y"<%end if%>>工程业绩</a></li>
<li class="mainlevelnewsx"><a href="#" <%if instr(1,request.servervariables("path_info"),"#",0)>0 then%>class="y"<%end if%>>新闻资讯</a></li>
<li class="mainlevelnewsx"><a href="#" <%if instr(1,request.servervariables("path_info"),"#",0)>0 then%>class="y"<%end if%>>联系我们</a></li>
</ul>
</div>
</div>
</div>
js代码:
<script>
$(document).ready(function(){
$(window).scroll(function(){
var scroll = $(window).scrollTop();
if (scroll > 100) {
$("#bannertop").css("background" , "white");
$("#bannertop ul li a").css("color" , "#000");
$("#bannertop").css("box-shadow" , "0px 0px 10px 2px rgba(0,0,0,0.2)");
}
else{
$("#bannertop").css("background" , "rgba(255, 255, 255, 0)");
$("#bannertop ul li a").css("color" , "#fff");
$("#bannertop").css("box-shadow" , "0px 0px 10px 2px rgba(0,0,0,0)");
}
})
})
</script>
css代码:
#bannertop{ width:100%; height:103px;display:block; margin:0 auto;z-index:999999; position: fixed;top:0; }
#menu .mainlevelnewsx{ float:left;width:110px; /*IE6 only*/}
#menu .mainlevelnewsx a {width:110px; height:49px;margin:0; color:#fff; padding:0; line-height:49px;font-size:16px;font-family: "微软雅黑","Microsoft Yahei"; display:block;}
#menu .mainlevelnewsx a:hover {width:112px;color:#fff; border-bottom:3px solid #2E7FD0;height:49px;line-height:49px;text-decoration:none; }
#menu .mainlevelnewsx ul {display:none; position:absolute; float:left; padding:0;margin-left:0; width:200px;line-height:80px; border-top:1px solid #F78213; border-bottom:3px solid #F78213;color:#333;filter:alpha(opacity=90);-moz-opacity:1;opacity: 1; background: #FFF}
#menu .mainlevelnewsx li {width:110px; height:24px; margin:3px auto;background:url(../images/submenubg.jpg); line-height:24px; font-size:13px;font-family: "微软雅黑", "Microsoft Yahei"; color:#000;/*IE6 only*/}
#menu .mainlevelnewsx li a{text-decoration:none; line-height:24px; display:block; width:110px;text-align:left; padding-left:30px;font-size:13px;font-family: "微软雅黑", "Microsoft Yahei";color:#000;}
#menu .mainlevelnewsx li a:hover{color:#000; text-decoration:none;width:196px; padding-left:30px;height:24px;line-height:24px; background:url(../images/submenubg_hover.jpg);}
#nav .mainlevelnewsx a.y{ width:112px; text-decoration:none;color:#FFF; border-bottom:3px solid #2E7FD0}
以上红色标注代码为主要代码,根据自己需求,可以进行不同的修改设置,达到自己想要的效果,这个导航小技巧的运用,在网站宽屏大图切换中非常实用,在我们许多网站设计中也经常看到这样的效果。