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 id="container"><ul><li 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 class="sub_menu" id="id_menu_profile">        jQuery        Extjs        Prototype        Mootools        Ajax        Javascript        CSS     </div></li></ul></div></body></html>

上一篇：另类的CSS导航菜单

下一篇：仿站长网JS+CSS首页导航菜单

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注