Heim > Web-Frontend > HTML-Tutorial > 【CSS】纯CSS实现三级导航(模板)_html/css_WEB-ITnose

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

WBOY
Freigeben: 2016-06-24 11:42:55
Original
1650 Leute haben es durchsucht

以前觉得级联导航实现应该很简单,就是使用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>
Nach dem Login kopieren

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%;}
Nach dem Login kopieren

效果图如下:

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


Author:致知

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

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage