三种方式实现网页二级菜单

三种方式实现网页二级菜单方法一:使用HTML和CSS实现 首先是Html代码,习惯上会将菜单放在一个div里,使用盒子模型,方便以后的操作和设置样式。二级菜单也就是在一级菜单中的li中再添加一个ul-li结构 <divclass="test"> <ul> <li>A</li> <li>B&lt..

大家好,又见面了,我是你们的朋友全栈君。

方法一:使用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代码:

 

1.写出一个ul-li菜单时,它会默认垂直排列,而我们需要的是水平的菜单栏,所以需要设置li的浮动:float:left

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>

 

 

 

 

 

 

 

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/132476.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • visio 2003密钥

    visio 2003密钥序列号:GWH28-DGCMP-P6RC4-6J4MT-3HFDY序列号:WFDWY-XQXJF-RHRYG-BG7RQ-BBDHM

  • redis客户端

    redis客户端

  • debian系统版本查看_DEBIAN

    debian系统版本查看_DEBIANdebian官方默认只提供最新的版本下载,有时需要找一些旧的版本的debian,着实费用。下面这个debianiso镜像站可以下载各个版本的debian下载:debian系统各个版本ISO下载http://cdimage.debian.org/cdimage/archive/…

  • CentOS7开启防火墙及特定端口

    CentOS7开启防火墙及特定端口以前为了方便,把防火墙都关闭了,因为现在项目都比较重要,害怕受到攻击,所以为了安全性,现在需要将防火墙开启,接下来介绍一下步骤。1,首先查看防火墙状态:firewall-cmd–state下图所示为关闭防火墙,接下来需要开启2,开启防火墙,启动firewall:systemctlstartfirewalld.service设置开机自…

  • 关于列表转字符串这个过程的曲折

    关于列表转字符串这个过程的曲折

  • C#开发面试题_程序员面试题精选100题

    C#开发面试题_程序员面试题精选100题注明:经过本人面试的经历和在网上的资料整理出来的100道比较常见的C#面试题,想当初面试公司虽然不是很多,第一次找工作用了近两周的时间面试了二十多家公司,成功的不到十家,最后选择了一家大型的软件公司干了两个月就走人了。后来又找了一周工作,面试了十一家公司,成功9家。现在已经在公司工作了快两年的时间了。以下的面试题也是自己曾经做过的,希望能帮助更多的同行找到满意的工作!!!1..NET和C#有

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号