向上滑動的藍色大氣導航菜單

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   class="iwvjtn8m0"   id="nav"><ul class="clear"><li id="iwvjtn8m0"    class="on">網站首頁</li><li>最新更新</li><li>網頁特效</li><li>CSS教程</li><li>腳本資源</li><li>下載排行</li><li id="iwvjtn8m0"    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雙行導航菜單