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

三种方式实现网页二级菜单方法一:使用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)


相关推荐

  • xgboost入门与实战(原理篇)

    xgboost入门与实战(原理篇)xgboost入门与实战(原理篇)前言:xgboost是大规模并行boostedtree的工具,它是目前最快最好的开源boostedtree工具包,比常见的工具包快10倍以上。在数据科学方面,有大量kaggle选手选用它进行数据挖掘比赛,其中包括两个以上kaggle比赛的夺冠方案。在工业界规模方面,xgboost的分布式版本有广泛的可移植性,支持在YARN,MPI,SungridEn

  • UDP攻击是什么呢

    UDP攻击是什么呢用户数据报协议(UDP)是一个无连接协议。当数据包经由UDP协议发送时,发送双方无需通过三次握手建立连接,接收方必须接收处理该资料包。因此大量的发往受害主机UDP报文能使网络饱和。在一起UDP洪流攻击中,UDP报文发往受害系统的随机或指定端口。通常,UDP洪流攻击设定成指向目标的随机端口。这使得受害系统必须对流入数据进行分析以确定哪个应用服务请求了数据。如果受害系统在某个被攻击埠没有运行服务,它将用ICMP报文响应一个“目标端口不可达”消息。通常,攻击中的DDOS工具会伪造攻击包的源IP地址。这有助于隐藏

  • python中用来抛出异常的关键字是( )_python异常抛出

    python中用来抛出异常的关键字是( )_python异常抛出广告关闭腾讯云11.11云上盛惠,精选热门产品助力上云,云服务器首年88元起,买的越多返的越多,最高返5000元!主动抛出异常raisetypeerror(类型错误)#7.触发异常try:raisetypeerror(类型错误)exceptexceptionase:print(e)#8.自定义异常classmy…syntaxerror语法错误python代码非…

    2022年10月17日
  • java代码 软件_适合新手的java代码编写软件有哪些?

    java代码 软件_适合新手的java代码编写软件有哪些?适合新手的java代码编写软件有哪些?发布时间:2020-05-1816:39:11来源:亿速云阅读:196作者:Leah适合新手的java代码编写软件有哪些?相信很多人对java代码编写软件的了解处于一知半解状态,小编给大家总结了以下内容。如下资料是关于java代码编写软件的内容。1、eclipseEclipse是一个开放源代码的、基于Java的可扩展开发平台。就其本身而言,它只是一个框架和…

  • BGP选路原则(2)-local-preference

    BGP选路原则(2)-local-preference

  • Python 运算符优先级

    Python 运算符优先级

    2021年10月28日

发表回复

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

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