衡水网站建设,衡水网络公司,衡水做网站,衡水网站制作,安平网站建设,安平网站优化,冀州网站建设,武强网站建设,衡水做网站的公司

我们是技术出身,不擅长花言巧语
我们只专心为客户提供实实在在、看得见的技术与服务!

seo学习

无限互联 无尽商机 成就你我 传递价值!

Unlimited Internet endless business opportunities to achieve your value to me!首页  »  新闻中心  »  seo学习

二级下拉菜单导航从底向上完美滑动出现

来源:http://www.chaofan.biz/  发布者:网站建设 发布时间:2012-1-9 15:41:57 浏览量:
       这是衡水网站建设在做一个学校网站的时候客户要求要使用有下拉菜单的效果,而且还要和后台更完美的结合起来,于是在网上找了很多,都没满意的,自己重新写了一个,此代码可以很好的和后台兼容,后台添加二级分类,前台会自动出现

<!--导航条-->
<style type="text/css">
/*下拉菜单样式*/

#nav { line-height: 41px; list-style-type: none;height:41px;background:#448425;width:760px}         /*控制一级菜单行高;上边距5px;*/  
#nav a { display: block; width: 80px; text-align:center; font-size:13px; font-weight:900; height:41px; color:#fff;} /*一级菜单链接总体样式:每个菜单的宽,居中对齐,文字大小*/
#nav a:link  { color:#FFF; text-decoration:none;margin:0;}     /* 未访问的链接 */  
#nav a:visited  {color:#FFF;text-decoration:none;margin:0;}    /* 已访问的颜色 */ 
#nav a:hover {color:#fff;text-decoration:none;background:#579e31;}                /* 鼠标在链接上 */

#nav li {float: left; width:80px; height:41px; display:block}                   /* 一级菜左对齐 */

#nav li a:hover{background:#579e31}     /* 鼠标在一级菜单上改变其背景色 */
#nav li ul { background:#448425; list-style-type: none;text-align:left;left: -999em; width:80px; position: absolute; border:0px; line-height:25px; absolute:top; bottom:41px; margin:0px}             /*二级菜单总体样式:行高24px;背景颜色;外框宽度;相对位置;边框一个象素,上边没样式,左右下边实线,边框颜色#003399;内边距1个象素*/

#nav li ul a{display:block; width: 80px; line-height:25px}                 /* 二级菜单链接样式;背景宽度、左对齐,左缩进2 */
#nav li ul a:link  {color:#fff; text-decoration:none;}                                   /* 未访问的链接 */
#nav li ul a:visited  {color:#fff;text-decoration:none;}                                 /* 已访问的链接 */
#nav li ul a:hover  {color:#FFF;text-decoration:none;font-weight:normal;background:#579e31;}/* 鼠标在链接上 */

#nav li:hover ul {left: auto;}
#nav li.sfhover ul {left: auto;}
#content {clear: left;}

</style>
<script type=text/javascript>
<!--
function menuFix() {
    var sfEls = document.getElementById("nav").getElementsByTagName("li");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
        this.className+=(this.className.length>0? " ": "") + "sfhover";
        }
        sfEls[i].onMouseDown=function() {
        this.className+=(this.className.length>0? " ": "") + "sfhover";
        }
        sfEls[i].onMouseUp=function() {
        this.className+=(this.className.length>0? " ": "") + "sfhover";
        }
        sfEls[i].onmouseout=function() {
        this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),
"");
        }
    }
}
window.onload=menuFix;
//--></script>

 

<UL id=nav>
<LI><A href="{$SiteDir$}" target="_blank">网站首页</A></LI>

<LI><A href="/Introduction.html">关于我们</A> </LI>

<LI><A href="/News/">新闻中心</A>

</LI>

<LI><A href="/Info89.html">联系方式</A> </LI>
</UL>

 

</DIV><!--nav结束-->


(转载请注明转自:http://www.chaofan.biz 谢谢!)
  • 60天打造网络营销的主战场!

    专业独家定位策划;三站合一网络营销系统助力更多的关键词上百度首页!

  • 180天快速见效

    专业营销人员协助客户进行网络推广有效快速提升网站转化率,180天快速见效!

  • 打破潜规则,帮你打造团队!

    为您打造一支高效率网络营销运营团队,让你自主操盘网络营销!让你的网络营销真正落地!

  • 7*24小时售后服务保障

    云商衡水网站建设团队将以专业的态度,为您提供100%的专业服务!
    网站有问题3分钟内即可作出反馈