HTML6實現折疊菜單與手風琴菜單的實例代碼

2019-11-30 09:45:36 IT時代網 分享

文章主要介紹了HTML6實現折疊菜單與手風琴菜單的實例代碼,需要的朋友可以參考下。

頁面主體部分:

<body>
<ul id="menu">
	<li>   
		<a href="#">一級菜單1</a>
		<ul>
			<li>二級菜單1-1</li>
			<li>二級菜單1-2</li>
			<li>二級菜單1-3</li>
		</ul>
	</li>
	<li>    
		<a href="#">一級菜單2</a>
		<ul>
			<li>二級菜單2-1</li>
			<li>二級菜單2-2</li>
			<li>二級菜單2-3</li>
		</ul>   
	</li>
	<li>
		<a href="#">一級菜單3</a>
		<ul>
			<li>二級菜單3-1</li>
			<li>二級菜單3-2</li>
			<li>二級菜單3-3</li>
		</ul> 
	</li>
	<li>
		<a href="#">一級菜單4</a>
		<ul>
			<li>二級菜單4-1</li>
			<li>二級菜單4-2</li>
			<li>二級菜單4-3</li>
		</ul> 
	</li>
<ul>
</body>

折疊菜單 例:

css部分

<head>
<style type="text/css">
li{
    list-style:none; 去掉列表前面圖形
}
li a{
    color:#123; 設置一級菜單文本顏色
}
#menu ul{
    display:none; 設置二級菜單默認不顯示
}
#menu>li:hover ul{
    display:block; 鼠標滑過一級菜單時,顯示二級菜單
}
</style>
</head>

手風琴菜單 例:

聲明:本站部分資源來源于網絡,版權歸原作者或者來源機構所有,如作者或來源機構不同意本站轉載采用,請通知我們,我們將第一時間刪除內容。本站刊載文章出于傳遞更多信息之目的,所刊文章觀點僅代表作者本人觀點,并不意味著本站贊同作者觀點或證實其描述,其原創性及對文章內容的真實性、完整性、及時性本站亦不作任何保證或承諾,請讀者僅作參考。
編輯:牛牛
快乐十分胆拖中奖图