首页>前端教程>CSS教程

CSS第十八课:PC端和移动端下拉菜单的实现

CSS第八课讲解了如何制作水平和纵向导航,然后拖到了第十八课才讲解下拉菜单,为什么呢?

因为下拉菜单必须要在明白了相对和绝对定位后才能讲解。如果你没有搞定CSS十六课和CSS十七课,建议你出门左拐下两层楼,先看完相对定位绝对定位再来学习下拉菜单吧。

下拉菜单作为导航目录较多的网站的必备武器,的确可以实现用最少的空间放置最多的目录。在PC电脑端,大型的下拉菜单很好用,但是到了平板手机移动端,受到屏幕大小的限制,一般都会削减不必要的菜单,然后利用下拉菜单以达到最少的占用空间。

pc端移动端下拉菜单.png

查看案例   下载案例

一、PC端下拉菜单的HTML结构

其实就是无序列表的嵌套关系,关键是嵌套的无序列表的位置。

<div class="nav">
    <ul class="clearfix">
    	<li><a href="#" class="current">首页</a></li>
        <li><a href="#">创意素材</a>
            <ul>
            	<li><a href="#">psd原稿</a></li>
        	<li><a href="#">javascript特效</a></li>
        	<li><a href="#">矢量素材</a></li>
            </ul>
        </li>
        <li><a href="#">作品</a>
            <ul>
            	<li><a href="#">psd原稿</a></li>
        	<li><a href="#">javascript特效</a></li>
        	<li><a href="#">矢量素材</a></li>
            </ul>
        
        </li>
        <li><a href="#">视频</a></li>
        <li><a href="#">论坛</a></li>     
    </ul>
</div>

被嵌套的ul放在某个li的里面,li里面的a标签的后面。千万不要放到a标签的里面了。因为嵌套列表,ul是属于li的子元素。

二、PC端下拉菜单的主要CSS代码

注意,这里的下拉菜单ul只设置了position:absolute,并没有设置偏移值,也没有为li设置相对定位,为什么呢?仔细阅读相对和绝对定位两篇文章就可以了解了。

.nav{
	width:600px;
	padding-left:20px;
	background-color:#000;}
.nav>ul>li{   /*代表只选取子元素,而不是后代元素*/
	float:left;
	}
.nav ul ul{
	position:absolute;
	display:none;
	z-index:10;
	}
.nav>ul>li:hover ul{
	display:block;
	}
.nav a{
	display:block;
	padding:10px 20px;
	background-color:#000;
	color:#FFF;
	text-decoration:none;
	font-weight:bold;
	white-space:nowrap;/*强制文字不换行*/
	transition:background-color .2s linear;
	}
.nav a:hover,.nav a.current,.nav>ul>li:hover>a{
	background-color:#E92E74;}

三、移动端下拉菜单HTML代码

在移动端,没有嵌套的无序列表,只是把li标签里面的a标签和ul取了出来。

<div class="mobilenav">
    <a href="#" id="mbnav"><i class="fa fa-th"></i></a>
    <ul id="navlist" class="none">
            <li><a href="#"><i class="fa fa-home"></i> 首页</a></li>
            <li><a href="#" class="current"><i class="fa fa-code"></i> HTML教程</a></li>
            <li><a href="#"><i class="fa fa-eye"></i> CSS教程</a></li>
            <li><a href="#"><i class="fa fa-gear"></i> javascript教程</a></li>
            <li><a href="#"><i class="fa fa-gears"></i> jQuery教程</a></li>
            <li><a href="#"><i class="fa fa-edit"></i> 教学反思</a></li>
            <li><a href="#"><i class="fa fa-star"></i> 学习笔记</a></li>
        </ul>
</div>

这里在导航目录前面使用了字体图标的方式,不明白的童鞋可以看这篇文章:利用FontAwesome字体实现小图标的插入

在移动端,不存在鼠标经过(hover)的事件,只能通过点击(click)实现下拉菜单的显示和隐藏。

四、移动端下拉菜单主要CSS代码

.mobilenav{
	width:70px;
	height:50px;
	margin-left:200px;
	position:relative;/*设置为相对定位,可以控制绝对定位的下拉菜单*/
	float:left;
	margin-right:50px;}
.mobilenav a{
	display:block;
	background-color:#000;
	color:#fff;
	padding:15px 20px;
	text-decoration:none;
	white-space:nowrap;
	transition:background-color .2s linear;}
.mobilenav a:hover{
	background-color:#25921D;}
.mobilenav>a{
	text-align:center;
	padding:17px 0;}
.mobilenav ul{
	position:absolute;
	right:0;
	top:50px;
	}

这里因为绝对定位设置了偏移值,所以必须为父元素设置相对定位进行限制。

五、为下拉菜单效果添加javascript脚本

<script type="text/javascript">
//javascript完成第一个移动端下拉菜单
window.onload=function(){
	var links=document.getElementById("mbnav");
	var list=document.getElementById("navlist");
	links.onclick=function(){
		oldclassName=list.className;
		if(oldclassName.indexOf("none")>-1){//判断class的值是否存在none这个属性值,如果没有,返回-1,有,返回下标值。
			newclassName=list.className.replace("none","");	//如果有,则去掉none这个class属性值。
			list.className=newclassName;
		}
		else{
			if(oldclassName==""){//判断class的值是否为空
				list.className="none";//如果为空,则直接赋值
			}else{
				list.className+=" none";//如果不为空,则追加class值。
				}
			}
		}
	}
</script>

这里使用的是对class进行添加或者删除none来实现对display值的切换。

六、利用jQuery实现下拉菜单的显示或隐藏

jQuery是一个使用非常广泛的javascript库,可以用更简洁的代码完成更棒的效果。“write less,do more!”

//jQuery完成第二个移动端下拉菜单	
$(function(){
	$("#mbnav1").click(function(){
		$("#navlist1").slideToggle();})
	})

具体的效果可以下载案例查看,没有提供下载的,只提供了查看案例的,可以用“网页另存为”的方式保存案例到本地电脑上。

点赞


14
保存到:

相关文章

Top