向上滑动的蓝色大气导航菜单

2024-09-05 12:20:09

字体：大中小

来源：转载

供稿：网友

向上滑动的蓝色导航菜单，看上去非常大气，当前选中时以其它颜色显示，鼠标滑过时有动画效果，菜单通用于大部分网站，欢迎下载使用。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><html><head><title>蓝色菜单</title><style>body{margin:100px 0}.clear:after{content:"."; display:block; height:0; clear:both; visibility:hidden}.clear{display:inline-block}.clear{display:block}div#nav{height:70px; background:url(/jscss/demoimg/200907/nav_bg.png) repeat-x}div#nav ul{width:960px; margin:0 auto; list-style:none}div#nav ul li{float:left; height:35px; overflow:hidden; padding:0 2px 0 0; font: bold 12px/35px Arial; background:url(/jscss/demoimg/200907/nav_right.png) repeat-y right 0}div#nav ul li a{float:left; height:100%; padding:0 20px; background:url(/jscss/demoimg/200907/nav_sub.png) repeat-x; color:#fff; text-decoration:none}div#nav ul li a.hover{clear:both; background-position:0 -35px}div#nav ul li.on a{background-position:0 -35px}div#nav ul li.nobg{background:none}</style></head><body onload="changeTableBg();"><div id="nav"><ul class="clear"><li class="on">网站首页</li><li>最新更新</li><li>网页特效</li><li>CSS教程</li><li>脚本资源</li><li>下载排行</li><li class="nobg">网站留言</li></ul></div></body><script type="text/javascript">function nav(c, config){	this.config = config || {speed: 10, num: 2};	this.container = (typeof(c)=="object") ? c : document.getElementById(c);	this.lineHeight = this.container.offsetHeight;	this.scrollTimeId = null;	var _this = this;	this.__construct = function (){		var inner,el,href;		inner = _this.container.childNodes[0].innerHTML;		href = _this.container.childNodes[0].href;		el = document.createElement("a");		el.innerHTML = inner;		el.href = href;		el.className = 'hover';		_this.container.appendChild(el);		//注册事件		_this.container.onmouseover = function (){_this.start()};		_this.container.onmouseout  = function (){_this.end()};	}();	this.start = function (){		_this.clear();		_this.scrollTimeId = setTimeout(function(){_this.scrollUp();}, _this.config.speed);	};	this.end = function (){		_this.clear();		_this.scrollTimeId = setTimeout(function(){_this.scrollDown();}, _this.config.speed);	};	this.scrollUp = function (){		var c = _this.container;					if(c.scrollTop >= _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></html>

上一篇：带缓冲的伸缩下拉菜单

下一篇：类似门户网站的CSS双行导航菜单