Flickr網站的簡潔CSS折疊菜單

2024-09-05 12:19:22

字體：大中小

來源：轉載

供稿：網友

這是來自著名的Flickr國外相冊網站的一款簡潔的導航菜單，CSS+JS，只有當鼠標點擊時它才會展開，再次點擊后折疊，節省網頁布局空間，小巧實用，老外的東西我們可以借鑒哦！

<!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><meta http-equiv="Content-Type" content="text/html; charset=GB2312" /><title>CSS折疊菜單</title><style type="text/css">body{font-family:Arial, Helvetica, sans-serif; font-size:12px; background:#FFFFFF;}#container{margin:0 auto; width:600px;margin-top:30px;}a:link, a:visited{color:#0066CC; text-decoration:none;}a:hover{text-decoration:underline;}ul, li{margin:0; border:0; list-style:none; padding:0;}ul{border-bottom:dotted 1px #DEDEDE;}ul{height:21px;}li{display:inline;}.menu span{border:solid 1px #eee; padding:4px 2px 4px 6px; border-bottom:none; margin-right:10px; line-height:18px;}.menu span a{font-weight:bold;}.menu span:hover{border:solid 1px #DEDEDE; border-right:1px solid #999; border-bottom:none;}.arrow{margin-left:4px; cursor:pointer; }.sub_menu{display:none; position:relative; border:solid 1px #DEDEDE; border-top:none; border-right:solid 1px #999; border-bottom:solid 1px #999; padding:10px; top:2px; width:120px; background:#FFFFFF;}.sub_menu a:link, .sub_menu a:visited, .sub_menu a:hover{display:block; font-size:11px; padding:3px;}.item_line{border-top:solid 1px #DEDEDE;}</style><script language="javascript">function showMenu(id_menu){var my_menu = document.getElementById(id_menu);if(my_menu.style.display=="none" || my_menu.style.display==""){	my_menu.style.display="block";	} else { 	my_menu.style.display="none";	}}function swapImage(idStatus){	if(idStatus==0){		document.arrow_profile.src ="/jscss/demoimg/200903/arrow_hover.png";	} else if(idStatus==1){		document.arrow_profile.src ="/jscss/demoimg/200903/arrow_select.png";	} else if(idStatus==2){		document.arrow_profile.src ="/jscss/demoimg/200903/arrow.png";	}	}</script></head><body><div   class="iwvjtn8m0"   id="container"><ul><li id="iwvjtn8m0"    class="menu" id="profile"><span>Javascript<img src="http://www.aspku.com/jscss/demoimg/200903/arrow.png" name="arrow_profile" width="18" height="15" align="top" class="arrow" onClick="javascript:showMenu('id_menu_profile')" onmouseup="javascript:swapImage(1)" onmouseover="javascript:swapImage(0)" onmouseout="javascript:swapImage(2)"></span>    <div   id="iwvjtn8m0"   class="sub_menu" id="id_menu_profile">        jQuery        Extjs        Prototype        Mootools        Ajax        Javascript        CSS     </div></li></ul></div></body></html>

上一篇：另類的CSS導航菜單

下一篇：仿站長網JS+CSS首頁導航菜單