仿QQ菜单 Tab滑动门菜单_CSS教程,DIV CSS视频教程,DIV CSS模板,DIV CSS布局入门教程

又一款仿制的tab滑动门菜单。仿QQ菜单的。

不多说了，拿去直接用吧。

[CSS中国]-示例代码<html> <head> <FCK:meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <FCK:meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <title>仿QQ菜单 tab滑动门菜单 http://www.csschina.net</title> <link rel="STYLESHEET" type="text/css" href="http://www.csschina.net/uploads/20100330/css.css"> </head> <body id="webpage"><br /> <br /> <div class="tagdh"> <div class="tag04" id="dhyk"> <ul> <li class="k1"><span class="active"><a href="http://www.csschina.net/" _fcksavedurl="http://www.csschina.net/">CSS中国</a></span></li> <li class="k1"><span><a href="http://www.csschina.net/" _fcksavedurl="http://www.csschina.net/">CSS教程</a></span></li> <li class="k1"><span><a href="http://www.csschina.net/a/jc/" _fcksavedurl="http://www.csschina.net/a/jc/">css视频</a></span></li> <li class="k1"><span><a href="http://www.csschina.net/a/wd/" _fcksavedurl="http://www.csschina.net/a/wd/">css模板</a></span></li> <li class="k2"><span><a href="http://www.csschina.net/a/cl/" _fcksavedurl="http://www.csschina.net/a/cl/">css入门</a></span></li> </ul> </div> <div id="dhykcont"> <div class="tagneirong"><span class="sjvip">> 首页</span><a href="#" _fcksavedurl="#">CSS中国</a>│ <a href="#" _fcksavedurl="#">css布局</a>│ <a href="#" _fcksavedurl="#">web标准</a>│ css框架</div> <div class="tagneirong" style="display:none">CSS样式│ css框架│ seo攻略│ css│ div</div> <div class="tagneirong" style="display:none">CSS样式│ css框架│ seo攻略│ css│ div</div> <div class="tagneirong" style="display:none">CSS样式│ css框架│ seo攻略│ css│ div</div> <div class="tagneirong" style="display:none">CSS样式│ css框架│ seo攻略│ css│ div</div> </div> </div> <script>try{QosS.topSpan("book_index",5);}catch(e){}</script> <script type="text/javascript"> function cleanWhitespace(element) { for (var i = 0;i<element.childNodes.length;i++) { var node = element.childNodes[i] if (node.nodeType ==3 && !/\S/.test(node.nodeValue)) node.parentNode.removeChild(node); } } function menuGlobal(_tab, _content, evt,_startNum,classNames){ this.tabs = []; this.contents = []; this.currentNum; this.init(_tab,_content,evt,_startNum,classNames); } menuGlobal.prototype.init = function(_tab, _content, evt,_startNum,classNames){ var old var obj = document.getElementById(_tab) var cbj = document.getElementById(_content) if (!obj) return false if (!cbj) return false cleanWhitespace(obj) cleanWhitespace(cbj) this.tabs = obj.getElementsByTagName("span"); if (!this.tabs) return false for(var i=0; i<this.tabs.length; i++){ this.tabs[i].flag = i; } var contstemp = cbj.childNodes; for(var i=0; i<contstemp.length; i++){ if(contstemp[i].nodeType == 1) this.contents.push(contstemp[i]); } if (_startNum>=this.tabs.length) {_startNum=0} if (!_startNum){_startNum=0} if (!classNames) {classNames="active"} if (!evt) {evt=2} this.tabs[_startNum].style.display="" this.tabs[_startNum].className=classNames this.contents[_startNum].style.display="" this.currentNum = _startNum this.addEvent(evt,classNames); } menuGlobal.prototype.addEvent = function(evt,classNames){ for(var i=0; i<this.tabs.length; i++){ this.tabs[i].reflect = this; if (evt==2) { this.tabs[i].onmouseover = function(){ var last = this.reflect.currentNum; this.reflect.contents[last].style.display="none" this.reflect.contents[this.flag].style.display="" if (this.reflect.tabs[last].className!="active") { this.reflect.tabs[last].className=old }else { this.reflect.tabs[last].className="" } old = this.reflect.tabs[this.flag].className if (!old) { this.reflect.tabs[this.flag].className=classNames } else { this.reflect.tabs[this.flag].className=old+"_1" } this.reflect.currentNum = this.flag; this.blur(); return false; } } else { this.tabs[i].onclick = function(){ var last = this.reflect.currentNum; this.reflect.contents[last].style.display="none" this.reflect.contents[this.flag].style.display="" if (this.reflect.tabs[last].className!="active") { this.reflect.tabs[last].className=old }else { this.reflect.tabs[last].className="" } old = this.reflect.tabs[this.flag].className if (!old) { this.reflect.tabs[this.flag].className=classNames } else { this.reflect.tabs[this.flag].className=old+"_1" } this.reflect.currentNum = this.flag; this.blur(); return false; } } } } </script> <script type="text/javascript"> var qdhyk=new menuGlobal("dhyk","dhykcont",2,0); var qMenu1=new menuGlobal("yekaTab01","yekacont01",2,0); var qMenu2=new menuGlobal("yekaTab02","yekacont02",2,0); var qMenu3=new menuGlobal("yekaTab03","yekacont03",2,0); </script> </body> </html>

本文由CSS中国整理

CSS教程,DIV CSS视频教程,DIV CSS模板,DIV CSS布局入门教程 - CSS中国

搜索

热门标签

仿QQ菜单 Tab滑动门菜单