• 文字广告位
  • 文字广告位
  • 文字广告位
  网站首页  软件教程  网页语言  特效代码  经验技巧  FLASH源码  实用素材  酷站欣赏  数据库  服务器  操作系统  站长交易
√ 新人注册　√ 用户登录
您现在的位置： 站长手册 >> 特效代码 >> 导航类 >> 正文
站内搜索
Google
·特效代码
[图文]仿站长站CSS+DIV滑动导航效果
   热 荐  ★★★★　　　

仿站长站CSS+DIV滑动导航效果

雅虎收藏夹 百度收藏 Google书签 Yahoo书签 新浪ViVi 搜狐网摘 365Key网摘 天极网摘 diglog 和讯网摘 POCO网摘 YouNote网摘 博拉网 天下图摘 Del.icio.us digg reddit spurl BlinkList blogmarks
人气：　来源：网络　作者：佚名　所属栏目：导航类　[切换到繁體中文]
介绍：非常经典实用的滑动二级导航，推荐栏目较多时使用！

演示：

[Ctrl+A全选 提示：你可先修改部分代码，再按运行]

下面教你如何应用此特效： CSS样式表下载     图片：
　--------------------------------------------------------------------------------------
　　需要在<body 这里>加入的代码：无
　--------------------------------------------------------------------------------------
以下代码加到<head>…</head>中
以下代码加到<body>…</body>中
<LINK href="http://www.zzsc.org/texiao/zzsc_demo/chinaz_style.css" type=text/css rel=stylesheet>
<SCRIPT type=text/javascript>
function ResumeError() { 
return true; 
} 
window.onerror = ResumeError; 

function $(id) {
    return document.getElementById(id);
}
function GetOffsetTop (el, p) {
    var _t = el.offsetTop;
    var _p = el.offsetParent;

    while (_p) {
        if (_p == p) break;
        _t += _p.offsetTop;
        _p = _p.offsetParent;
    }

    return _t;
};
function GetOffsetLeft (el, p) {
    var _l = el.offsetLeft;
    var _p = el.offsetParent;

    while (_p) {
        if (_p == p) break;
        _l += _p.offsetLeft;
        _p = _p.offsetParent;
    }

    return _l;
};
function showMenu (baseID, divID) {
    baseID = $(baseID);
    divID  = $(divID);
    if (showMenu.timer) clearTimeout(showMenu.timer);
 hideCur();
    divID.style.display = 'block';
 showMenu.cur = divID;

    if (! divID.isCreate) {
        divID.isCreate = true;
        divID.onmouseover = function () {
            if (showMenu.timer) clearTimeout(showMenu.timer);
   hideCur();
            divID.style.display = 'block';
        };

        function hide () {
            showMenu.timer = setTimeout(function () {divID.style.display = 'none';}, 2000);
        }

        divID.onmouseout = hide;
        baseID.onmouseout = hide;
    }
 function hideCur () {
  showMenu.cur && (showMenu.cur.style.display = 'none');
 }
}</SCRIPT>

<DIV class=zongbei>
<DIV class=container>
<DIV class=nav>
<DIV class=navinner>
<UL class=navlist>
  <LI><A href="http://www.chinaz.com/">首页</A> </LI>
  <LI><A id=nav_1 onMouseOver="showMenu('nav_1','subnav1')" 
  href="http://www.zzsc.org">新闻</A> 
  <DIV class="subnav disable" id=subnav1>
  <P class=pointer>.</P>
  <P><SPAN>1111111111111111111111111111111111111111111111111111111111111111</SPAN></P></DIV>
  </LI>
  <LI><A id=nav_2 onMouseOver="showMenu('nav_2','subnav2')" 
  href="http://www.zzsc.org">站长</A> 
  <DIV class="subnav disable" id=subnav2>
  <P class=pointer>.</P>
  <P><SPAN>222222222222222222222222222222222222222222222222222222222222222</SPAN></P></DIV>
  </LI>
  <LI><A id=nav_3 onMouseOver="showMenu('nav_3','subnav3')" 
  href="http://www.zzsc.org">网站</A> 
  <DIV class="subnav disable" id=subnav3>
  <P class=pointer>.</P>
  <P><SPAN>333333333333333333333333333333333333333333333333333333333333333</SPAN></P></DIV>
  </LI>
  <LI><A id=nav_4 onMouseOver="showMenu('nav_4','subnav4')" 
  href="http://www.zzsc.org">设计</A> 
  <DIV class="subnav disable" id=subnav4>
  <P class=pointer>.</P>
  <P><SPAN>444444444444444444444444444444444444444444444444444444444444444</SPAN></P></DIV>
  </LI>
  <LI><A id=nav_5 onMouseOver="showMenu('nav_5','subnav5')" 
  href="http://www.zzsc.org">设计</A> 
  <DIV class="subnav disable" id=subnav5>
  <P class=pointer>.</P>
  <P><SPAN>444444444444444444445555555555555555555555555555555555555555555</SPAN></P></DIV>
  </LI>
  <LI><A id=nav_6 onMouseOver="showMenu('nav_6','subnav6')" 
  href="http://www.zzsc.org">设计</A> 
  <DIV class="subnav disable" id=subnav6>
  <P class=pointer>.</P>
  <P><SPAN>444444444444444444446666666666666666666666666666666666666666666</SPAN></P></DIV>
  </LI>
  <LI><A id=nav_7 onMouseOver="showMenu('nav_7','subnav7')" 
  href="http://www.zzsc.org">设计</A> 
  <DIV class="subnav disable" id=subnav7>
  <P class=pointer>.</P>
  <P><SPAN>444444444444444444447777777777777777777777777777777777777777777</SPAN></P></DIV>
  </LI>
  <LI><A id=nav_8 onMouseOver="showMenu('nav_8','subnav8')" 
  href="http://www.zzsc.org">设计</A> 
  <DIV class="subnav disable" id=subnav8>
  <P class=pointer>.</P>
  <P><SPAN>444444444444444444448888888888888888888888888888888888888888888</SPAN></P></DIV>
  </LI>
  <LI><A id=nav_9 onMouseOver="showMenu('nav_9','subnav9')" 
  href="http://www.zzsc.org">设计</A> 
  <DIV class="subnav disable" id=subnav9>
  <P class=pointer>.</P>
  <P><SPAN>444444444444444444449999999999999999999999999999999999999999999</SPAN></P></DIV>
  </LI>
  <LI><A id=nav_10 onMouseOver="showMenu('nav_10','subnav10')" 
  href="http://www.zzsc.org">设计</A> 
  <DIV class="subnav disable" id=subnav10>
  <P class=pointer>.</P>
  <P><SPAN>444444444444444444441111111111111111111111111111111111111111111</SPAN></P></DIV>
  </LI>
  <LI><A id=nav_11 onMouseOver="showMenu('nav_11','subnav11')" 
  href="http://www.zzsc.org">设计</A> 
  <DIV class="subnav disable" id=subnav11>
  <P class=pointer>.</P>
  <P><SPAN>4444444444444444444422222222222222222222222222222222222222222222222222222222222222222</SPAN></P></DIV>
  </LI>
  <LI><A id=nav_12 onMouseOver="showMenu('nav_12','subnav12')" 
  href="http://www.zzsc.org">设计</A> 
  <DIV class="subnav disable" id=subnav12>
  <P class=pointer>.</P>
  <P><SPAN>444444444444444444443333333333333333333333333333333333333322222222222222222233333</SPAN></P></DIV>
  </LI>
  <LI><A id=nav_13 onMouseOver="showMenu('nav_13','subnav13')" 
  href="http://www.zzsc.org">设计</A> 
  <DIV class="subnav disable" id=subnav13>
  <P class=pointer>.</P>
  <P><SPAN>444444444444444444444444444444444444444444444444444444444444444</SPAN></P></DIV>
  </LI>
  <LI><A id=nav_14 onMouseOver="showMenu('nav_14','subnav14')" 
  href="http://www.zzsc.org">设计</A> 
  <DIV class="subnav disable" id=subnav14>
  <P class=pointer>.</P>
  <P><SPAN>444444444444444444445555555555555555555555555555555555555555555</SPAN></P></DIV>
  </LI>
  <LI><A id=nav_15 onMouseOver="showMenu('nav_15','subnav15')" 
  href="http://www.zzsc.org">设计</A> 
  <DIV class="subnav disable" id=subnav15>
  <P class=pointer>.</P>
  <P><SPAN>444444444444444444446666666666666666666666666666666666666666666</SPAN></P></DIV>
  </LI>
  <LI><A id=nav_16 onMouseOver="showMenu('nav_16','subnav16')" 
  href="http://www.zzsc.org">设计</A> 
  <DIV class="subnav disable" id=subnav16>
  <P class=pointer>.</P>
  <P><SPAN>444444444444444444447777777777777777777777777777777777777777777</SPAN></P></DIV>
  </LI>
  <LI><A id=nav_17 onMouseOver="showMenu('nav_17','subnav17')" 
  href="http://www.zzsc.org">设计</A> 
  <DIV class="subnav disable" id=subnav17>
  <P class=pointer>.</P>
  <P><SPAN>444444444444444444448888888888888888888888888888888888888888888</SPAN></P></DIV>
  </LI>
  <LI><A id=nav_18 onMouseOver="showMenu('nav_18','subnav18')" 
  href="http://www.zzsc.org">设计</A> 
  <DIV class="subnav disable" id=subnav18>
  <P class=pointer>.</P>
  <P><SPAN>444444444444444444449999999999999999999999999999999999999999999</SPAN></P></DIV>
  </LI>
  <LI><A id=nav_19 onMouseOver="showMenu('nav_19','subnav19')" 
  href="http://www.zzsc.org">设计</A> 
  <DIV class="subnav disable" id=subnav19>
  <P class=pointer>.</P>
  <P><SPAN>4444444444444444444400000000000000000000000000000000000000000000</SPAN></P></DIV>
  </LI>
  <LI><A id=nav_20 onMouseOver="showMenu('nav_20','subnav20')" 
  href="http://www.zzsc.org">网络</A> 
  <DIV class="subnav disable" id=subnav20>
  <P class=pointer>.</P>
  <P><SPAN>5555555555555555555511111111111111111111111111111111111111111111</SPAN></P></DIV>
  </LI>
  <LI><A id=nav_21 onMouseOver="showMenu('nav_21','subnav21')" 
  href="http://www.zzsc.org">联盟</A> 
  <DIV class="subnav disable" id=subnav21>
  <P class=pointer>.</P>
  <P><SPAN>6666666666666666666622222222222222222222222222222222222222222222</SPAN></P></DIV>
  </LI>
  <LI><A id=nav_22 onMouseOver="showMenu('nav_22','subnav22')" 
  href="http://www.zzsc.org">服务</A> 
  <DIV class="subnav disable" id=subnav22>
  <P class=pointer>.</P>
  <P><SPAN>7777777777777777777733333333333333333333333333333333333333333333</SPAN></P></DIV>
  </LI></UL></DIV></DIV></DIV></DIV>
<a href="http://www.zzsc.org" target="_blank">[站长手册]搜集整理http://www.zzsc.org</a>
  • 上一个特效：
  • 下一个特效： 没有了
    • 【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】
    网友评论：（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）
    姓 名： *（必填项） ·注册用户·
    Email： QQ号：
    评 分： 1分 2分 3分 4分 5分
    • 您可以发表评论支持你喜欢的文章。
    • 请遵守《互联网电子公告服务管理规定》。
    • 请遵守中华人民共和国各项有关法律法规。
    • 严禁发表危害国家安全、政治、黄色淫秽等内容的评论。
    • 评论人需对自己在使用评论过程中的行为承担法律责任。
    • 本站管理员有权保留或删除评论内容。
    • 评论内容只代表个人观点，与本网站立场无关。
    站内特效搜索
    高级搜索
    ·最新特效　　　　　　
    普通特效 在线颜色选择盘
    普通特效 在线计算器
    普通特效 防止网页被frame引用
    普通特效 让表格有个标题
    普通特效 检测访客浏览器的版本
    普通特效 点击广告后才能进入页面
    普通特效 网页密码验证进入
    普通特效 测试访问者电脑分辩率
    普通特效 Java容错代码(二)
    普通特效 Java容错代码(一)
    ·热门特效　　　　　　
    普通特效 在线颜色选择盘
    普通特效 在线计算器
    普通特效 防止网页被frame引用
    普通特效 让表格有个标题
    普通特效 检测访客浏览器的版本
    普通特效 点击广告后才能进入页面
    普通特效 网页密码验证进入
    普通特效 测试访问者电脑分辩率
    普通特效 Java容错代码(二)
    普通特效 Java容错代码(一)
    普通特效 显示时间的按钮
    普通特效 当前时间（八种形式）
    普通特效 有记事功能的万年历
    普通特效 常用农历日历
    普通特效 自动记录网站更新日期
    普通特效 页面停留时间
    ·网站推广
    普通文章 Google排名策略，大型网站的
    普通文章 小小分析下：南宁时空-南宁时
    普通文章 奥运年,草根站长如何推广网站
    普通文章 站长的“衣食父母者”--百度
    普通文章 发软文让编辑保留连接的方法
    普通文章 爆增流量的经验与站长分享
    普通文章 图王:我为什么鼓励写软文
    普通文章 谈谈破坏排名的种种恶劣手段
    普通文章 做网络传销的宣传网站方式（
    普通文章 雅虎管理器如何提升网站流量
    ·ICO素材

    Lost系列图标打包下载

    东风标致汽车图标下载(含PNG

    XP系统尊贵系列图标下载[含P

    遗失的美好!Lost系列图标续下
    | 设为首页 | 加入收藏 | 联系站长 | 友情链接 | 版权申明 | | 京ICP备 05004866号 |
    版权所有 2007-2008　站长手册 WWW.ZZSC.ORG　业务联系 zzsc.org#gmail.com