HTML+Sass实现HambergurMenu(汉堡包式菜单)

  发布时间:2020-06-09 17:19:21   作者:NicholWang   我要评论
这篇文章主要介绍了HTML+Sass实现HambergurMenu,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
如果你想靠AI翻身,你先需要一个靠谱的工具!

前几天看了国外一个大佬用HTML+CSS实现HamburgerMenu的视频,然后最近在看Sass,所以用Sass来实现一下。

最终效果图如下:

在VS Code中的文件结构(编译scss文件用的是easy sass):

页面结构(index.html):

_config.scss:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/*设置颜色及max-width*/
$primary-color: rgba(13,110,139,.75);
$overlay-color: rgba(24,39,51,.85);
$max-width: 980px;
 
/*设置文本颜色,如果背景色浅,则设置为黑色,否则设置为白色*/
@function set-text-color($color){
  @if(lightness($color)>70){
    @return #333;
  }@else{
    @return #fff;
  }
}
 
/*混合器,设置背景色及文本颜色*/
@mixin set-background($color){
  background-color: $color;
  color: set-text-color($color);
}

style.scss:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
@import '_config';
*{
  margin: 0;
  padding: 0;
}
 
.container{
  max-width: $max-width;
  margin: 0 auto;
}
 
/*给showcase设置背景颜色,利用伪类再添加一个背景图,同时将背景图的z-index设置为-1(这样图片会显示在里面);
然后为了让文字显示在中间,所以使用flex布局*/
.showcase{
  position: relative;
  height: 100vh;
  background-color: $primary-color;
  &:before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url('../img/pexels-photo-533923.jpeg') no-repeat center center / cover;
    z-index: -1;
  }
  &-inner{
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    font-weight: 100;
    h1{
      font-size: 4rem;
      padding: 1.2rem 0;
    }
    p{
      white-space: pre-wrap;
      font-size: 1.6rem;
      padding: 0.85rem 0;
    }
    .btn{
      padding: .65rem 1rem;
        /*使用混合器设置背景色及文本颜色*/
      @include set-background(lighten($primary-color,30%));
      border: none;
      border: 1px solid $primary-color;
      border-radius: 5px;
      text-decoration: none;
      outline: none;
      transition: all .2s ease .1s;
        /*按钮hover的时候利用css3的scale设置一个缩放效果*/
      &:hover{
        @include set-background(lighten($overlay-color,30%));
        border-color: lighten($overlay-color, 25%);
        transform: scale(.98);
      }
    }
  }
}
 
/*原理:通过checkbox的点中与否来进行样式的变化(将checkbox透明度设置为0,z-index设置更高),单击时,会出现菜单,再次点击,菜单消失*/
/*给menu-wrap设置fixed,这样showcase就会占满整个屏幕;同时将checkbox的opacity设置为0;
另外注意,需要将checkbox的z-index设置为2,因为hamburger的z-index设置为1,不然会点击不起作用
*/
.menu-wrap{
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
  .toggle{
    position: absolute;
    left: 0;
    top: 0;
    width: 50px;
    height: 50px;
    opacity: 0;
    z-index: 2;
    cursor: pointer;
      /*当checkbox为checked时,设置hamburger里面的div及伪类的旋转效果*/
    &:checked ~ .hamburger>div{
      transform: rotate(135deg);
        /*伪类实际上旋转了225度,需要将top设置为0,不然形成的❌长短不一致*/
      &:before,&:after{
        transform: rotate(90deg);
        top: 0;
      }
    }
 
      /*当checkbox选中时再hover,也会设置一个旋转效果*/
    &:checked:hover ~ .hamburger>div{
      transform: rotate(235deg);
    }
    &:checked ~ .menu{
      visibility: visible;
      >div{
        transform: scale(1);
        >div{
          opacity: 1;
        }
      }
    }
  }
     
  .hamburger{
    position: absolute;
    left: 0;
    top: 0;
    width: 60px;
    height: 60px;
    padding: 1rem;
    background-color: $primary-color;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 1;
      /*div自身生成中间的横线,然后设置定位为relative,后面再将其伪类设置为absolute,
      相对于div进行偏移*/
    >div{
      position: relative;
      left: 0;
      top: 0;
      width: 100%;
      height: 2px;
      background-color: #fff;
      transition: all .7s ease;
        /*利用伪类生成第一条和第三条横线*/
      &:before,
      &:after{
        content: '';
        position: absolute;
        left: 0;
        top: -10px;
        width: 100%;
        height: 2px;
        background-color: inherit;
      }
      &:after{
        top: 10px;
      }
    }
  }
 
    /*设置选中后的菜单的样式*/
    /*将menu设置为fixed,同时宽高为100%,然后设置display为flex,否则菜单不会出现在中间*/
  .menu{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;    /*将菜单设置为不可见,然后在checkbox选中时设置为可见*/
    transition: all .75s ease;
    >div{
      @include set-background($overlay-color);
      width: 200vw;
      height: 200vh;
      overflow: hidden;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      transform: scale(0);
      transition: all .4s ease;
      >div{
        max-width: 90vw;
        max-height: 90vh;
        opacity: 0;
        transition: all .4s ease;
        >ul>li{
          list-style: none;
          font-size: 2rem;
          padding: .85rem 0;
          text-transform: uppercase;
          transform: skew(-5deg,-5deg) rotate(5deg);/*设置文字倾斜*/
          a{
            color: inherit;
            text-decoration: none;
            transition: color .4s ease;
          }
        }
      }
    }
  }
}

到此这篇关于HTML+Sass实现HambergurMenu(汉堡包式菜单)的文章就介绍到这了,更多相关HTML+Sass实现HambergurMenu内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

蓄力AI

相关文章

  • Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码

    这篇文章主要介绍了Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们
    2020-03-17
  • html5写一个BUI折叠菜单插件的实现方法

    这篇文章主要介绍了html5写一个BUI折叠菜单插件的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一
    2019-09-11
  • html 仿百度百科导航下拉菜单功能

    这篇文章主要介绍了html 仿百度百科导航下拉菜单功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-04
  • HTML+CSS实现下拉菜单的实现

    这篇文章主要介绍了HTML+CSS实现下拉菜单的实现的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-18
  • Html屏蔽右键菜单和左键划字功能的示例

    这篇文章主要介绍了Html屏蔽右键菜单和左键划字功能的示例的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-09
  • HTML+CSS实现简单下拉菜单效果

    使用Html+css实现简单的下拉菜单代码非常简单,具有参考借鉴价值,需要的的朋友参考下吧
    2017-06-22
  • HTML5中原生的右键菜单创建方法

    这篇文章主要为大家详细介绍了HTML5中原生的右键菜单创建方法,教大家如何用基本的HTML标记来创建个性化的右键菜单,感兴趣的小伙伴们可以参考一下
    2016-06-28
  • HTML5手机端弹出遮罩菜单特效代码

    本文给大家分享html5手机端弹出遮罩菜单,通过点击显示菜单,菜单会飞的弹出,效果非常漂亮,对html5弹出遮罩菜单相关知识感兴趣的朋友一起学习吧
    2016-01-27
  • 基于HTML5代码实现折叠菜单附源码下载

    基于html5代码实现折叠菜单附源码下载,效果逼真,非常方便使用,对html5折叠菜单感兴趣的朋友可以参考下
    2015-11-27
  • html 可输入下拉菜单的实现方法

    可输入下拉菜单,不可思议是不是, 本例通过一些方法实现这个不可能的事情,感兴趣的朋友可以参考下
    2014-09-06

最新评论