方法一:使用HTML和CSS实现
首先是Html代码,习惯上会将菜单放在一个div里,使用盒子模型,方便以后的操作和设置样式。
二级菜单也就是在一级菜单中的li中再添加一个ul-li结构
<div class="test">
<ul>
<li>A</li>
<li>B</li>
<li>C
<ul>
<li>C1</li>
<li>C2</li>
<li>C3</li>
</ul>
</li>
</ul>
</div>
使用css代码设置样式
<style type="text/css">
.test ul{
list-style-type: none;
}
.test ul li{
float:left;
/*以下设置仅为方便查看效果*/
width:50px;
height:20px;
border:1px solid black;
text-align: center;
}
.test ul li ul{
display: none;
}
.test li:hover ul{
display:block;
}
</style>
解释三个重要的css代码:
2.当鼠标悬浮在有二级菜单的一级菜单选项时,才会出现二级菜单,所以在鼠标不悬浮的情况下,需要把二级隐藏起
来display:none
3.最后,设置li :hover ul 这个意思是,当鼠标悬浮在li上时,li下的ul呈现状态,hover是悬浮的意思,在设置a标签样
式时应该会接触过
方法二:使用jQuery实现
要用到jQuery首先第一步就是引入jquery.js文件
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
在平时做网页项目时,最好是将css,html,js分开,在html页面中引入css和js文件,css文件引入放在head中,js放在body的最后,这是为了在加载网页时,先加载出它的样式,最后加载js动态。那么注意了,在这里如果你的js代码是放在body中,那么引入jquery文件必须放在js代码之前,浏览器编译html文件时,是从上自下编译的,如果jquery文件放在最后,那么在你的js代码又使用到了jquery的功能,后果可想而知,效果是出不来的。
下面两种方式都是可行的,第一种二级菜单出现的很直接,fade呢有一个渐入渐出的过程
200,300的都是时间,估计是以ms为单位,有待查验。
js代码:
<script type="text/javascript">
/* js 语句 $(function(){});*/
$(function(){
$(".test li").hover(
/*找父亲(li)下面的ul*/
function() {
$(this).find("ul").show(200);
},function(){
$(this).find("ul").hide(300);
}
);
$(".test li").hover(
function(){
$(this).find("ul").fadeIn(300);
},function(){
$(this).find("ul").fadeOut(300);
}
);
});
</script>
方法三:使用Bootstrap实现
如果不了解Bootstrap是什么,出门找百度咨询一下
和jquery类似的,需要引入三个文件:
1. bootstrap.min.css 2. jquery-3.1.0.min.js 3. bootstrap.min.js
因为bootstrap所有js代码都是需要jquery做支撑的,所以只要引入bootstrap.js都必须引入jquery
其实博主前面都偷了个懒,没有给每个li添加a标签,在实际操作中这是非常必要的,除非你要做一个不实现跳转功能
的摆设菜单,那就随便怎么玩了。使用Bootstrap框架就必须使用a标签了,因为它的很多样式是设置在a标签上的,
不使用没有效果,相比前面的两种来说,使用框架又省力又省心,非常简单。
只需三步:
1.为一级菜单的ul添加class-nav nav-pills(或者nav-tabs 等等)
2.为一级菜单中有下拉二级菜单的li添加 class-dropdown
为a标签添加属性:data-toggle="dropdown" 以及class-dropdown-toggle
3.给2步骤中li下的ul添加class-dropdown-menu
实例:
<ul class="nav nav-pills">
<li>
<a href="#">A</a>
</li>
<li class="dropdown">
<!-- span标签 是添加一个下三角的图标 -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown">B<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">B1</a></li>
<li><a href="#">B2</a></li>
<li><a href="#">B3</a></li>
<li><a href="#">B4</a></li>
</ul>
</li>
<li><a href="#">C</a></li>
</ul>