Flickr網站的簡潔CSS折疊菜單_菜單導航特效

這是來自著名的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" mrc="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 ="http://p1.mb5u.com/texiao/arrow_hover.png";
	} else if(idStatus==1){
		document.arrow_profile.src ="http://p1.mb5u.com/texiao/arrow_select.png";
	} else if(idStatus==2){
		document.arrow_profile.src ="http://p1.mb5u.com/texiao/arrow.png";
	}
	
}
</script>
</head>
<body>
<div id="container">
<ul>
<li class="menu" id="profile">
<span>
<a href="#">Javascript</a>
<img src="http://p1.mb5u.com/texiao/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">
        <a href="/search.php?keyword=jquery">jQuery</a>
        <a href="/">Extjs</a>
        <a href="/search.php?keyword=Prototype">Prototype</a>
        <a href="/search.php?keyword=Mootools">Mootools</a>
        <a href="/search.php?keyword=Ajax">Ajax</a>
        <a href="/search.php?keyword=Javascript" class="item_line">Javascript</a>
        <a href="/jscss/">CSS</a> 
    </div>
</li>
</ul>
</div>
</body>
</html>

所屬頻道：菜單導航特效/更新時間：2011-02-24

[收藏][報錯][返回列表]

相關菜單導航特效：

Flickr網站的簡潔CSS折疊菜單_菜單導航特效

菜單導航特效Rss訂閱特效代碼搜索

菜單導航特效推薦

猜你也喜歡看這些