教程集 > 脚本编程 > javascript > 正文 js 超炫导航菜单

js 超炫导航菜单

发布时间：2016-10-24 编辑：jiaochengji.com

教程集为您提供js 超炫导航菜单等资源，欢迎您收藏本站，我们将为您提供最新的js 超炫导航菜单资源

提示：您可以先修改部分代码再运行

<textarea name="runcool" rows="28" cols="75" >

<meta content="text/html;charset=gb2312" http-equiv="content-type" />

<style type="text/css"> .clear:after{ content:"."; display:block; height:0; clear:both; visibility:hidden; } .clear{ display:inline-block; display:block; } div#nav{ height:32px; background:url(http://www.zzsky.cn/effect/images/200911300900/YL29.jpg) repeat-x; } div#nav ul{ width:705px; list-style:none; margin-top:0; margin-right:auto; margin-bottom:0; margin-left:0px; } div#nav ul li{ float:left; height:32px; overflow:hidden; background-image:url(http://www.zzsky.cn/effect/images/200911300900/YL30.jpg); background-repeat:repeat-y; background-position:right 0; padding-top:0; padding-right:1px; padding-bottom:0; padding-left:0px; font-family:Arial; font-size:12px; line-height:32px; font-weight:bold; } div#nav ul li a{ float:left; height:100%; width:77px; background:url(http://www.zzsky.cn/effect/images/200911300900/YL28.jpg) repeat-x; color:#fff; text-decoration:none; padding-top:0; padding-right:5px; padding-bottom:0; padding-left:5px; text-align:center; } div#nav ul li a.hover{ clear:both; background-position:0 -32px; width:77px; } div#nav ul li.on a{ background-position:0 -32px; } div#nav ul li.nobg{ background:none } /* ]]> */</style>

<ul class="clear"> <li>站长首页</li> <li>建站服务</li> <li>建站代码</li> <li>站长工具</li> <li>网页素材</li> <li>网页特效</li> <li>网址收录</li> <li>站长论坛</li> <li class="nobg"> </li> </ul>

<script type="text/javascript"> /* = _this.lineHeight){c.scrollTop = _this.lineHeight;return;} c.scrollTop = _this.config.num; _this.scrollTimeId = setTimeout(function(){_this.scrollUp();}, _this.config.speed); }; this.scrollDown = function (){ var c = _this.container; if(c.scrollTop <= 0){c.scrollTop = 0;return;} c.scrollTop -= _this.config.num; _this.scrollTimeId = setTimeout(function(){_this.scrollDown();}, _this.config.speed); }; this.clear = function (){clearTimeout(_this.scrollTimeId)}; } (function(){ var container = document.getElementById('nav'); var el_li = container.getElementsByTagName('li'); var arr = []; for( var i = 0; i < el_li.length; i ){ if(el_li[i].className == 'on') continue; arr[i] = new nav(el_li[i], {speed: 10, num: 4}); } }) (); /* ]]> */ </script></textarea>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
7款风格新颖的jQuery/CSS3菜单导航分享
 对css滑动门技术的一些总结和归纳
 jQuery菜单插件 Smooth Navigational Menu
jQuery导航菜单插件 AutoSprites
jquery css3实现炫酷菜单导航实例
 js 超炫导航菜单
 jQuery菜单插件 mbMenu
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
 超酷仿FLASH导航菜单效果
 jquery导航固定效果实例

上一篇：导航菜单-简洁的纯CSS二级下拉菜单下一篇：js经典级联菜单

[关闭]

最近更新

浏览排行

~ ~