一個可以伸展打開的滑動導航欄

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多個滑動門重復調用封閉類