在CSS第八课讲解了如何制作水平和纵向导航,然后拖到了第十八课才讲解下拉菜单,为什么呢?
因为下拉菜单必须要在明白了相对和绝对定位后才能讲解。如果你没有搞定CSS十六课和CSS十七课,建议你出门左拐下两层楼,先看完相对定位和绝对定位再来学习下拉菜单吧。
下拉菜单作为导航目录较多的网站的必备武器,的确可以实现用最少的空间放置最多的目录。在PC电脑端,大型的下拉菜单很好用,但是到了平板手机移动端,受到屏幕大小的限制,一般都会削减不必要的菜单,然后利用下拉菜单以达到最少的占用空间。
查看万博manbext3.0首页登录 下载万博manbext3.0首页登录
一、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="&rvpu;#&rvpu;&octq;je=&rvpu;ncobw&rvpu;&hu;μj&octq;dmbtt=&rvpu;gb&octq;gb-ui&rvpu;&hu;μ/j&hu;μ/b&hu;" <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万博manbext备用网址</a></li>" <li><a href=""#"><i class="fa fa-eye"></i> CSS万博manbext备用网址</a></li>" <li><a href="#"><i class="fa fa-gear"></i> javascript万博manbext备用网址</a></li> <li><a href=""#"><i class="fa fa-gears"></i> jQuery万博manbext备用网址</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();}) })
具体的效果可以下载万博manbext3.0首页登录查看,没有提供下载的,只提供了查看万博manbext3.0首页登录的,可以用“网页另存为”的方式保存万博manbext3.0首页登录到本地电脑上。
发表评论:
◎请发表你卖萌撒娇或一针见血的评论,严禁小广告。