汉堡按钮的制作以及其中的问题

最新推荐文章于 2022-10-13 17:20:54 发布
最新推荐文章于 2022-10-13 17:20:54 发布
阅读量1k 收藏 1
点赞数 1
分类专栏： CaseShow css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39148344/article/details/83105058
版权

第一种自己写的，下面的第二种是网上的用一个span使用做出来的

HTML

<div class="box"><!--chang用来判断是否变换-->
            <span class="s1"></span>
            <span class="s2"></span>
            <span class="s3"></span>
        </div>

CSS

*{
    margin: 0px;
    padding: 0px;
}
.box{
    width: 50px;
    height: 50px;
    margin: 100px auto 0px;
    border: 1px solid saddlebrown;
    background-color: rgba(0,0,0,.8);
    position: relative;
    
    
}

.box span{
    position: absolute;
    display:block;
    width: 50px; height: 1px;
    border: 1px solid #FFFFFF;
    background-color: #FFFFFF;
    left: 0; right: 0; top: 0; bottom: 0;
    margin: auto;/*用来达到水平垂直，居中*/
    transition: transform .3s ease;
    
}

/*这里有个问题就是在格式高宽同时设置了margin：auto时候top等属性的移动的时候是2被的数值*/
.box .s1{
    top:-47px;/*（重要）这里为什么是-50px，而不是-25px，因为设置了margin：auto，解析每当我的top上升了2px，也就是说下面多了2px，因为margin的存在就会分1px去上面所以感觉就是向上移了1px*/
}
.box .s2{
    

}
.box .s3{
     top:47px;
}
.box .s1rotate{
    -moz-transform-origin: 30 0; /*以中兴为旋转点，这里可以不用写英文默认就是以中心点旋转*/
    -webkit-transform-origin:30 0;
    -moz-transform-origin: 30 0;
    transform:rotate(45deg);
}
.box .s2translate{   /*下面2个展现方法一个是隐藏中的线 ，一个是位移出去的*/
    /*transform: scale(0); *//*这个是隐藏*/
    transform: translateX(-55px) ;/*这个是位移*/
}
.box .s3rotate{
    
    -moz-transform-origin: 30 0;
    -webkit-transform-origin:30 0;
    -moz-transform-origin: 30 0;
    transform:rotate(-45deg);
}

js

var box =  document.querySelector(".box");
        var s1 = document.querySelector(".s1");
        var s2 = document.querySelector(".s2");
        var s3 = document.querySelector(".s3");//在这里必须放在全局为由去除.S1一但去除那么这里的代码就没有用了
        box.onclick = function(){
            //用与判断不同是否已经变化的情况    
            if(this.className.indexOf("chang") > -1){ //判段当该改变了,执行true
                s1.classList.add("s1");
                s3.classList.add("s3");
                s1.classList.remove("s1rotate");
                s2.classList.remove("s2translate");
                s3.classList.remove("s3rotate");
                this.classList.remove("chang");//去除
            }else{
                s1.classList.add("s1rotate");
                s2.classList.add("s2translate");
                s3.classList.add("s3rotate");
                s1.classList.remove("s1");
                s3.classList.remove("s3");
                this.classList.add("chang");//增加
            }
            
        }

/*第二种的使用*/

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
    span {
      margin: 15% auto;
      
      width: 45px;
      height: 45px;
      position: relative;
      display: block;
      width: 1.5em;
      height: 0.25em;
      background: #E04681;
      border-radius: 3px;
      cursor: pointer;
      transition: transform .2s ease;
    }
    span:before, span:after {
      border-radius: 3px;
      transition: transform .3s ease;
    }
    span:before {
      content: '';
      display: block;
      position: absolute;
      width: 1.5em;
      height: 0.25em;
      top: -0.5em;
      background: #E04681;
    }
    span:after {
      content: '';
      display: block;
      position: absolute;
      width: 1.5em;
      height: 0.25em;
      top: 0.5em;
      background: #E04681;
    }
    span.close {
      width: 45px;
      height: 45px;
      margin: 15% auto;
      /*left: 10px;*/
      position: relative;
      display: block;
      width: 0;
      height: 0;
      background: transparent;
      transform: rotate(-180deg);
    }
    span.close:before, span.close:after {
      transition: transform .3s ease;
    }
    span.close:before {
      content: '';
      display: block;
      position: absolute;
      width: 1.5em;
      height: 0.25em;
      top: 0;
      background: #E04681;
      transform: rotate(-45deg);
    }
    span.close:after {
      content: '';
      display: block;
      position: absolute;
      width: 1.5em;
      height: 0.25em;
      top: 0;
      background: #E04681;
      transform: rotate(45deg);
    }
    </style>
    </head>
    <body>
        <span class="sdasd sdasdaa"></span>
        <script>
            var btn = document.querySelector("span");
            btn.onclick = function(){
                
                if(this.className.indexOf('close')>-1?true:false){
                    this.classList.remove("close");
                }else{
                    this.classList.add("close");
                }
                console.log(this.className);
                
            }
        </script>
    </body>
</html>

曾皙
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
12款CSS3汉堡包按钮变形动画特效
06-24
12款CSS3汉堡包按钮变形动画特效里面共有12种动画效果，分别是在用户点击汉堡包按钮之后，汉堡包按钮以不同的方式执行变形动画。
css实现汉堡菜单按钮
weixin_45032627的博客
06-18 2303
汉堡菜单按钮：当用户点击菜单按钮，在弹出导航栏的同时，汉堡形状的按钮也会动画渐变成叉号。再次对其点击时，导航栏收回，按钮也恢复原样。 关于汉堡菜单，虽然 GitHub 上已经有相关的库 hamburgers，但因为我使用的 nuxt 框架采用的是rem布局，对于px到rem的转换让我实在头疼。再三思量之下，还是决定自己手动模仿一个出来。具体实现效果如下动图。 一、设计思路 至于将三横杠动态渐变成叉号的具体过程，每个人都有自己的奇思妙想，不必拘泥。这里简要说明上述动画的设计思路： 将顶部横杠顺时针旋转90
纯干货 | UI界面中按钮设计汉堡按钮\菜单
awayaya1的博客
08-05 1320
汉堡按钮 汉堡菜单按钮（动画） 汉堡按钮 它是隐藏菜单的按钮。单击或点击它时，菜单会展开。 美丽的汉堡菜单 美丽的汉堡动画菜单 汉堡动画菜单 这种菜单（以及按钮）的名称由于它的形状由三条水平线组成，看起来像典型的汉堡包。 今天，它是一种广泛使用的移动端页面布局的互动元素 ; 关于其利弊的争论仍然很热烈。 汉堡菜单动画 汉堡菜单 汉堡GIF 汉堡菜单释放空间使界面更简约和通风; 从功能的角度来看，它为其他重要的布局元素节省了大量空间。对于响应和自适.
利用Bootstrap制作汉堡按钮（header部分）
夏天De风ly
05-15 2048
页面展示：本次网页header部分的页面效果。 技术要求：Bootstrap布局容器、Bootstrap导航栏 制作汉堡按钮的固定写法： 同时需要安装Bootstrap下载安装，下载地址：https://www.bootcss.com/ 解压之后会有css、js、fonts,但是js中没有jQuery文件。 这时复制此地址在网页打开：https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js，看到了版本信息后，在页面右击另存为之后会弹出
使用Boostrap制作导航栏和汉堡按钮
weixin_45684562的博客
10-05 3055
导航栏制作 使用Boostrap制作基础导航栏主要分为以下步骤： 1.事先引入jquery.js、boostrap.min.js和boostrap.min.css文件。 2.添加一个<div>标签或者一个容器<nav>,使用.navbar类和.navbar-default类，并添加role=“navigation”（增加可访问性）。 3.在上面的标签或容器内再添加一个div...
Bootstrap响应式导航栏的学习和如何清除汉堡按钮(.navbar-toggler)点击后的黑边框
黛琳ghz的博客，期待你的关注。
10-13 3680
导航栏是一个很好的功能，是 Bootstrap 网站的一个突出特点。导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。在 Bootstrap 导航栏的核心中，导航栏包括了站点名称和基本的导航定义样式。
汉堡菜单按钮：汉堡菜单按钮
03-02
汉堡菜单按钮完全自定义的汉堡菜单按钮。 受到启发如何使用它您可以通过Xcode Inspector配置按钮的外观 或者，您可以通过以下操作自己制作一个按钮： let firstButton = MenuButton(frame: CGRectMake(100, 100, 60,...
汉堡按钮效果案例
04-04
源码HamburgerButton，这是一个不错的汉堡按钮效果案例源码，实现汉堡按钮效果，流畅、漂亮，大家可以看看一下吧。
12种汉堡包图标按钮变形动画特效
11-28
插件描述：这是一款使用jquery和css3制作的炫酷汉堡包按钮变形动画特效。这组特效共12种动画效果，分别是在用户点击汉堡包按钮之后，汉堡包按钮以不同的方式执行变形动画。演示地址：...
CSS3点击汉堡菜单全屏折角显示
06-24
CSS3点击汉堡菜单全屏折角显示是一款基于js+css3制作的全屏折角页面导航特效。
汉堡制作及过程
03-26
flash制作汉堡过程，通俗易懂。flash制作汉堡过程，通俗易懂。
CSS实现汉堡按钮
zt_pursue的博客
05-21 6753
汉堡按钮的实现思想是：button内包含一个span，设置span为绝对定位，并设置背景颜色，使之成为汉堡按钮的夹心，同理，再用span:before、span:after，创造一上一下两片面包，具体实现如下：（效果如图） &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8...
汉堡按钮的实现
aizhe1517的博客
01-27 286
汉堡按钮的实现思想是：button内包含一个span，设置span为绝对定位，并设置背景颜色，使之成为汉堡按钮的夹心，同理，再用span:before、span:after，创造一上一下两片面包，具体实现如下： <body> <button class="hamburger"> <span>menu</span&g...
汉堡按钮html写法,ProtoPie 详解 — 汉堡按钮制作
weixin_36354131的博客
06-05 949
原标题：ProtoPie 详解 — 汉堡按钮制作每周一期的 ProtoPie 详解教程又来啦，上期马克笔设计留学的MUzi老师主要介绍了 ProtoPie 的交互动作原理《ProtoPie详解 — 交互动作》，从这期开始MUzi老师将为大家单独介绍具体动效的制作，这期的主题是——汉堡按钮的制作。汉堡按钮是非常常见的按钮，由于它的样子非常像汉堡所以被称为汉堡按钮。如今汉堡按钮的样子不再是单纯的三条线...
纯css制作三级菜单
汉堡请不要欺负面条
03-07 1885
一.注意点： 1.选择器的使用 ①element1>element2：如果元素element2不是父元素element1的直接子元素，则不会被选择。 ②element1+element2： 选择器用于选取第一个指定的元素element1之后（不是内部）紧跟的元素element2，同级元素 ③:hover :选择器用于选择鼠标指针浮动在上面的元素 ④:after: 选择器在被选元素的内
bootstrap 汉堡包导航条按钮
web前端小攻城狮
11-09 8105
bootstrap汉堡导航条 上面是引用的bootstrap官网的文档 下面是对实际引用做出的解释
Boostrap_响应式导航栏，点击汉堡按钮遮盖下方元素
Martin 的博客
04-28 1408
Boostrap_响应式导航栏，点击汉堡按钮遮盖下方元素官网那个是直接把其他元素挤到下面了根据这个大哥的源码改了改：https://blog.csdn.net/mazhili1991/article/details/53406868源码：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &...
bootstrap汉堡按钮
qq_34328404的博客
06-22 4988
为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 classes .collapse、.navbar-collapse 的 中。折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。第一个是 data-toggle，用于告诉 JavaScript 需要对按钮做什么，第二个是 data-target，指示要切换到哪一个元素。三个带有
汉堡菜单代码
最新发布
05-24
以下是一个简单的汉堡菜单代码示例： ... ``` <div class="bar"></div> ...这个代码示例创建了一个响应式汉堡菜单，当屏幕小于768像素时，菜单将变成一个汉堡按钮，点击按钮将展开一个下拉菜单。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值