三种方式实现网页二级菜单
来源:互联网 发布:淘宝物流信息谁更新 编辑:程序博客网 时间:2024/05/01 08:58
方法一:使用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>
- 三种方式实现网页二级菜单
- 三种方式实现网页二级菜单
- 网页二级菜单的实现
- 二级指针作为函数输入的三种实现方式:
- Struts2树状菜单三种实现方式
- 三种实现下拉菜单的方式
- 下拉菜单——css方式实现二级菜单
- 简单三步实现导航分类二级菜单
- 二级菜单实现
- ListView实现二级菜单
- 实现二级Menu菜单
- jquery实现二级菜单
- 实现伸缩二级菜单
- CSS3实现二级菜单
- css实现二级菜单
- android 二级菜单实现
- 实现伸缩二级菜单
- HTML实现二级菜单
- 2017中兴校园招聘成都地区笔试题
- Java 字符串与整数的转换
- 大数-乘法
- Howto Simulate Sensor Networks in NS-2
- L02_基本数据类型
- 三种方式实现网页二级菜单
- Unable to load configuration. - bean - jar:file:/C:/Program Files/Apache Software Foundation/T
- Mkaefile的使用
- (43)友元
- webpack资源整理及笔记
- 51nod-【1396 还是01串】
- 获取网页内容---Proxy
- Activity与Fragment生命周期交互
- Win7启动修复(Ubuntu删除后进入grub rescue的情况)