一个可以伸展打开的滑动导航栏

2024-09-05 12:20:04

字体：大中小

来源：转载

供稿：网友

一个可以伸展打开的滑动导航栏，写着练习，可能还有些问题，希望高手修正。

<!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"><head><title>滑动导航栏</title><style type="text/css">body{margin:10px 0px 0px;padding:0;background-color:black;}ul{margin:0px auto;padding:0px;list-style:none;overflow:hidden;width:1000px;}ul li{float:left;width:80px;height:60px;background-color:#333;text-align:center;font-size:12px;margin-right:1px;color:#999;font-weight:bold;font-family:Verdana;}ul li span{width:100%;height:20px;border-bottom:1px solid black;cursor:pointer;display:inline-block;}</style><script language="javascript" type="text/javascript">window.onload=function(){	var submenu=document.getElementsByTagName("li");	var bgcolor=new Array("red","orange","yellow","green","blue","indigo","purple"); 	for(var i=0;i<submenu.length;i++){	    var span=document.createElement("span");		var content=document.createTextNode(submenu[i].innerHTML);		span.appendChild(content);		span.style.backgroundColor=bgcolor[i];		submenu[i].innerHTML="";		submenu[i].appendChild(span);		submenu[i].onmouseover=function(){hidden();show(this,true);}	}var hidden=function(){for(var j=0;j<submenu.length;j++){show(submenu[j],false);}};}function show(obj,vsb){	obj.style.width=(vsb)?"500px":"80px";	obj.style.height=(vsb)?"500px":"60px";} </script></head><body><ul><li>我的博客首页</li><li>共享资源</li><li>我的短消息</li><li>博客服务</li><li>聊天室</li><li>在线演示</li></ul></body></html>

上一篇：滑出浮动层的CSS大块导航菜单

下一篇：JS+CSS多个滑动门重复调用封闭类