首頁 > web前端 > html教學 > 【CSS】纯CSS实现三级导航(模板)_html/css_WEB-ITnose

【CSS】纯CSS实现三级导航(模板)_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 11:42:55
原創
1647 人瀏覽過

以前觉得级联导航实现应该很简单,就是使用css的hover属性来实现就可以了,于是也没有过多地留意实践。可是在最近的面试当中,当被问到这个问题的时候才明白,很多东西不能想当然地以为这样做就可以了,不单只是知道大概的思路就认为OK了,更需要实际的动手能力。

后来就实际操作了级联菜单的实现,借此机会把它弄成一个模板来和大家一起学习。

以下是HTML部分:

<meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>纯css级联导航</title>    <div class="main">    	<ul class="one-nav">    		<li>    			<a href="javascript:;">一级导航</a>    			<ul class="two-nav">    				<li><a href="javascript:;">二级导航</a></li>    				<li><a href="javascript:;">二级导航</a></li>    				<li><a href="javascript:;">二级导航</a></li>    				<li><a href="javascript:;">二级导航</a></li>    			</ul>    		</li>    		<li>    			<a href="javascript:;">一级导航</a>    			<ul class="two-nav">    				<li><a href="javascript:;">二级导航</a></li>    				<li><a href="javascript:;">二级导航</a></li>    			</ul>    		</li>    		<li>    			<a href="javascript:;">一级导航</a>    			<ul class="two-nav">    				<li><a href="javascript:;">二级导航</a></li>    				<li>    					<a href="javascript:;">二级导航></a>    					<ul class="three-nav">    						<li><a href="javascipt:;">三级导航</a></li>    						<li><a href="javascipt:;">三级导航</a></li>    						<li><a href="javascipt:;">三级导航</a></li>    					</ul>    				</li>    				<li><a href="javascript:;">二级导航</a></li>    			</ul>    		</li>    		<li>    			<a href="javascript:;">一级导航</a>    			<ul class="two-nav">    				<li><a href="javascript:;">二级导航</a></li>    				<li><a href="javascript:;">二级导航</a></li>    				<li><a href="javascript:;">二级导航</a></li>    				<li><a href="javascript:;">二级导航</a></li>    				<li><a href="javascript:;">二级导航</a></li>    			</ul>    		</li>    		<li>    			<a href="javascript:;">一级导航</a>    			<ul class="two-nav">    				<li><a href="javascript:;">二级导航</a></li>    				<li><a href="javascript:;">二级导航</a></li>    				<li><a href="javascript:;">二级导航</a></li>    				<li><a href="javascript:;">二级导航</a></li>    				<li><a href="javascript:;">二级导航</a></li>    				<li><a href="javascript:;">二级导航</a></li>    			</ul>    		</li>    		<li>    			<a href="javascript:;">一级导航</a>    			<ul class="two-nav">    				<li><a href="javascript:;">二级导航</a></li>    				<li><a href="javascript:;">二级导航</a></li>    				<li><a href="javascript:;">二级导航</a></li>    				<li>    					<a href="javascript:;">    					<ul class="three-nav">    						<li><a href="javascipt:;">三级导航</a></li>    						<li><a href="javascipt:;">三级导航</a></li>    						<li><a href="javascipt:;">三级导航</a></li>    					</ul>    				</a>
</li>    			</ul>    		</li>    	</ul>    </div>
登入後複製

CSS部分:

body,div,ul,li,a{margin: 0;padding: 0;text-decoration: none;}	/* 一级导航 */	.one-nav li{list-style-type: none;float: left;width: 16.57%;text-align: center;background-color: #3391E6;border-right: 1px solid white;cursor: pointer;height: 30px;line-height: 30px;}	.one-nav li:nth-last-child(1){border-right: none;}	.one-nav li a{color: white;}	.one-nav li:hover .two-nav{display: block;}	.one-nav li:hover{background-color: #4260D7;}	/* 二级导航 */	.two-nav {display: none;}	.two-nav li{width: 100%;}	.two-nav li:hover .three-nav{display: block;position: relative;}	/* 三级导航 */	.three-nav{position: absolute;width:100%;left: 100%;bottom: 100%;}	/* 最右边的三级导航显示在左边 */	.one-nav li:nth-last-child(1)  .two-nav li  .three-nav li{width: 100%;position:relative;right: 200%;}
登入後複製

效果图如下:

例子比较简单,但往往越简单的东西越需要脚踏实地地去实践和经历,人生已如此,共勉。


Author:致知

Sign:路漫漫其修远兮,吾将上下而求索。

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板