精华内容
下载资源
问答
  • css菜单栏的隐藏和显示
    2021-06-10 16:25:10
    Document

    /* 采用多个ul配合实现隐藏显示菜单栏 */

    *{margin: 0;padding: 0;}

    ul{ list-style: none;;margin-right: 1px;width: 115px;visibility:hidden;}/* 隐藏子菜单 */

    img{ display: block;}

    a{text-decoration: none;color: black;width: 100%;height: 100%;display: block;}

    li{text-align: center;line-height: 35px;font-size: 16px;background-color: #eeeeee;}

    .l{float: left;}

    .r{float: right;}

    #main{margin: 0 auto;width: 464px;}

    a:hover{color: white;text-decoration: underline;background-color: #333333;}

    /* 显示子菜单 */

    ul:hover{visibility:visible}

    /* 第一个li要显示 */

    #main .submenu .li-1{visibility:visible;}

    更多相关内容
  • 这是一款使用js和css3制作的智能隐藏和显示的顶部导航菜单。该顶部导航菜单在页面向下滚动时可以帧动画隐藏,在向上滚动到一定距离时优惠显示出来。
  • NULL 博文链接:https://dcrpp.iteye.com/blog/695637
  • 我们这一篇来用JavaScript脚本实现下拉菜单显示和隐藏。使用JavaScript方法实现我们需要用的知识有: 1)JS事件:onmouseover鼠标经过事件和onmouseout鼠标离开事件。 2)JS基础语法:使用function关键字定义函数。 ...
  • 利用css3 transform属性制作的14种不同效果的侧边栏导航的隐藏和显示动画效果。该侧边栏导航可用于移动设备等小屏幕设备,效果极赞。
  • CSS元素的显示和隐藏

    2021-10-14 15:31:35
    CSS中,隐藏和显示是我们经常会用到的方法,最常用的方法有三种:display、visibility、overflow。它们的主要目的是让一个元素在页面中消失,但并不是让它们被删除掉,比如网页中的小广告,关掉以后再次刷新页面又...

    目录

    前言

    一、display

    二、visibility

    三、overflow

    总结





    前言

            在CSS中,隐藏和显示是我们经常会用到的方法,最常用的方法有三种:display、visibility、overflow。它们的主要目的是让一个元素在页面中消失,但并不是让它们被删除掉,比如网页中的小广告,关掉以后再次刷新页面又会重新出现。




    一、display

    要点:display元素隐藏后,不再占有原来的位置。

    用途:配合js做特效,比如下拉菜单,原先没有,鼠标经过显示下拉菜单,应用极为广泛。

    display:none(隐藏元素)

    display:block(除了转换为块级元素外,还有显示元素的意思)

    示例:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .tudou {
                position: relative;
                width: 444px;
                height: 320px;
                background-color: pink;
                margin: 30px auto;
            }
            
            .tudou img {
                width: 100%;
                height: 100%;
            }
            
            .mask {
                display: none;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.4) url(../images/arb.png) no-repeat center;
            }
            
            .tudou:hover .mask {
                display: block;
            }
        </style>
    </head>
    
    <body>
        <div class="tudou">
            <div class="mask"></div>
            <img src="../images/tb.png">
        </div>
    </body>
    
    </html>

     效果如图所示:

     可以看到当鼠标没有放到图片上时,图片正常显示,当鼠标放到图片上时,图片原本隐藏的内容就会出现。

    二、visibility

    要点:visibility元素隐藏后,继续占有原来的位置。

    用途:使用较少。

    visibility:visible(显示元素)

    visibility:hidden(隐藏元素)

    三、overflow

    要点:只是隐藏超出大小的部分。

    用途:可以清除浮动,可以保证盒子里面的内容不会超出该盒子范围。

    overflow:visible(显示元素)

    overflow:hidden(隐藏元素)

    overflow:scroll(内容超出盒子后显示滚动条)

    overflow: auto( 文字内容没有超出盒子内容时没有滚动条,当超出时显示滚动条)

    示例:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div {
                width: 200px;
                height: 200px;
                border: 1px solid skyblue;
                overflow: scroll;
                overflow: auto;
                margin: 10px auto;
            }
        </style>
    </head>
    
    <body>
        <div>
            溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字 溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字 溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字 溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字 溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字 溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字 溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字 溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字 溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字 溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字
            溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字 溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字 溢出的文字溢出的文字溢出的文字溢出的文字溢出的文字
        </div>
    </body>
    
    </html>

    效果如图所示:


     



    总结

            以上就是今天要讲的内容,本文仅仅简单介绍了CSS隐藏和显示的使用,还需要多做练习熟练这些方法。

    展开全文
  • 菜单隐藏和显示

    2017-07-30 12:31:11
    jQuery下拉菜单显示和隐藏
  • 手机浏览器中可点击展开类似qq隐藏显示功能 很好用
  • 左边栏菜单隐藏显示

    2018-05-31 11:30:16
    bootstrap左边菜单栏隐藏显示,非常亮眼,前端框架优秀的设计
  • initial-scale=1.0"> 纯CSS实现点击显示隐藏</title> </head> <style> /* 在手机端正常的操作是默认隐藏,点击菜单的时候显示 */ div { display: none; } /* 当单选框被选中的时候显示兄弟元素div */ #btn:checked~...

    思路来自B站表严肃

    感谢表老师

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CSS实现点击显示隐藏</title>
    </head>
    <style>
        /* 在手机端正常的操作是默认隐藏,点击菜单的时候显示 */
        div {
            display: none;
        }
    
        /* 当单选框被选中的时候显示兄弟元素div */
        #btn:checked~div {
            display: block;
        }
    
        /* 设置单选框为隐藏 */
        #btn {
            display: none;
        }
    </style>
    
    <body>
        <!-- 使用labe把按钮和单选框绑定到一起 -->
        <label for="btn">菜单</label>
        <input id="btn" type="checkbox">
        <div>内容</div>
        <div>内容</div>
        <div>内容</div>
    </body>
    
    </html>
    

    仅是自己学习用途

    展开全文
  • 9种html5+css3隐藏侧边栏导航菜单动画效果
  • JS/CSS-实现菜单内容的显示隐藏

    JS/CSS-实现菜单内容的显示隐藏

    一、效果

    在这里插入图片描述

    二、对应代码

    HTML

    <!-- 三条横线的代码 -->
    <div class="banner_menu" id="openMenu" data-flag="0">
        <s></s>
        <s></s>
        <s></s>
    </div>
    

    CSS

    /* less写法 */
    
    /* 移动端弹出菜单 */
    .menu_popup {
      height: calc(100vh - @m_bannerHeight);
      background-color: #161616;
      position: fixed;
      left: 0;
      top: @m_bannerHeight;
      width: 100%;
      z-index: 99;
      
      /* 先让其向上移动 隐藏起来 */
      transform: translateY(-200%);
      transition: transform .5s ease-in-out;
    }
    .show_popup {
      /* 再让其移动复原 显示出来 */
      transform: translateY(0);
    }
    
    /* 让body静止不动 */
    .still_body {
      overflow: hidden;
      position: fixed;
      left: 0;
      width: 100%;
    }
    

    JS

    // 打开菜单弹出层
    var scrollTop = 0; // 滚动距离
    $('#openMenu').on('click', function () {
    	// 让菜单弹出层在显示和隐藏状态之间相互切换
      	$('.menu_popup').toggleClass('show_popup');
        // 图标变换【忽略,这儿未给出相关代码,详情可查看我的另外一篇博客:https://blog.csdn.net/weixin_48850734/article/details/122855864?spm=1001.2014.3001.5501】
        $(this).toggleClass('changeFigure');
        // 防止菜单弹出层出现后仍有滚动条。。。
        var flag = $('#openMenu').attr('data-flag');
        if(flag == 0) { // 菜单弹出层已打开
            $('#openMenu').attr('data-flag',1);
            // 监听起始的滚动距离
            scrollTop = $(window).scrollTop();
            setTimeout(function () {
            	$("body").addClass('still_body');
            },600)
         } else { // 菜单弹出层已关闭
            $("#openMenu").attr('data-flag',0);
            $("body").removeClass('still_body');
            // 当菜单弹出层关闭后,回到先前记录的滚动距离
            window.scrollTo(0,scrollTop);
         }
    })
    

    【补充知识】

    example:先获取到起始的滚动距离,当活动详情页打开再关闭后,让其滚动到起始监听到的滚动距离

    var scrollTop = 0; // 起始滚动距离
    
    // pc端-点击其它活动的图片,弹出详情页
    $('.swiper-container1 .swiper-slide1').on('click',function () {
      var index = $(this).attr('data-swiper-slide-index');
      // 先获取到滚动距离
      scrollTop = $(window).scrollTop();
      // 再弹出详情页
      $('.otherAct_details').eq(index).css('display','block').siblings().css('display','none');
      $('.Banner').css('display','none');
      $('.footer1').css('display','none');
      $('.Match').css('display','none');
    })
    // pc端-点击其它活动详情页上的关闭按钮,关闭详情页
    $('.closeBtn').on('click',function () {
      // 先关闭详情页
      $(this).parent('.otherAct_details').css('display','none');
      $('.Banner').css('display','block');
      $('.footer1').css('display','block');
      $('.Match').css('display','block');
      // 再让其滚动到起始监听到的滚动距离
      window.scrollTo(0,scrollTop);
    })
    
    展开全文
  • 利用css3 transform属性打造的6种隐藏侧边导航菜单动画效果,这个导航菜单是为移动设备量身定制的。
  • CSS3手机侧边导航滑动隐藏特效

    千次阅读 2021-08-05 03:36:48
    【温馨提示】源码包解压密码:www.youhutong.com效果图:描述说明:共4种CSS3手机侧边导航滑动隐藏特效1、默认的点击滑动侧边栏菜单效果。2、带3D transforms的滑动侧边栏效果。3、文字缩放淡入淡出效果的滑动侧...
  • 放在网页左侧的DIV+CSS隐藏菜单代码- www.webdm.cnbody {background: #fff;font-family: "Lucida Grande", Helvetica, Arial, sans-serif;font-size: 12px;}.menu {position:absolute; z-index:100; margin-top:20px...
  • CSS系列之元素的显示隐藏

    千次阅读 2022-03-08 08:47:32
    1、元素显示和隐藏的出现的目的 2、使用场景 3、display 显示 4、visibility 可见性 5、overflow 溢出 后记 1、元素显示和隐藏的出现的目的 让一个元素在页面中消失或者显示出来。 2、使用场景 类似广告网站,当...
  • 阅读目录导航导航=链接列表垂直导航垂直导航条实例激活/当前导航条实例创建链接并添加边框全屏高度的固定导航条水平导航内联列表项浮动列表项水平导航条实例链接右对齐添加分割线固定导航条源码示例 1CSS ...
  • 主要介绍了jQuery实现的点击显示隐藏下拉菜单功能,结合完整实例形式分析了jQuery事件响应及页面元素属性动态操作简单实现技巧,需要的朋友可以参考下
  • 通过html,css菜单的默认显示效果编写出来,然后利用css伪类hover并改变当前菜单项的样式,从而高亮显示当前菜单,或者在当前菜单项上添加class="highlight"来高亮显示,lighlighthover的样式代码一致。...
  • 隐藏与滑出显示css+js菜单实例,可以内嵌到页面作为顶部文件使用
  • CSS的元素的显示隐藏

    千次阅读 2020-08-21 00:45:59
    CSS中元素标签的显示隐藏可以通过对元素的css样式编写的过程中,在元素样式下以三种不同的属性进行显示隐藏,通过对html标签进行显示隐藏,从而实现web中特定的功能,例如:导航的功能展示等。 三种不同的...
  • 首先说一下左侧菜单栏 这是一个最基本的左侧菜单栏,实现的过程很简单,官方的说明文档就有,但是我在导入layer.js之后,直接复制这段官方代码到我的编辑器上时,发现页面是这样的: 发现,绑定属性的菜单并没有...
  • 9种html5+css3隐藏侧边栏导航菜单动画效果;有波浪形、滑动形、角落隐藏形,方便用于模板,可直接使用,快速建网
  • 这个页面效果实现了,但是存在 bug,当页面跳转之后菜单栏显示不出来了
  • 如有侵权,立马删除,谢谢
  • 主要介绍了CSS仿网易首页的头部菜单栏按钮三角形制作方法的相关资料,需要的朋友可以参考下
  • <!DOCTYPE html> <... <head> ...meta charset="UTF-8">...菜单显示和隐藏</title> <style> * { margin: 0; padding: 0; } body { width: 100vw; height: 100vh; } .
  • 本篇文章主要介绍了使用HTML+CSS实现鼠标划过的二级菜单栏的示例,非常具有实用价值,需要的朋友可以参考下
  • 通过HTML和CSS制作二级菜单栏

    千次阅读 2021-08-17 20:54:19
    我们在很多网站浏览时,通常会遇到很多二级菜单栏,通常它们是隐藏起来的,只有我们鼠标移过去后,它们才会显现出来,比如说下面这张图片。 但是我们如何实现类似的效果呢?下面我们仅使用 HTML+ CSS来实现一个...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 20,291
精华内容 8,116
关键字:

css菜单栏的隐藏和显示

友情链接: THUM_instruction_ref.rar