企业网站模板

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

作者 HambergurMenu 2020-07-29 898

这篇文章主要介绍了HTML+Sass实现 HambergurMenu,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。

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

最终效果图如下:

HTML+Sass实现 HambergurMenu(汉堡包式菜单)-好哇网

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

HTML+Sass实现 HambergurMenu(汉堡包式菜单)-好哇网

页面结构(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内容请搜索好哇网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持好哇网!

点击【分享给朋友】生成专属代理二维码,享受推广消费现金奖励!

发表评论

好哇网,累计帮助1000+用户成功建站,为小微企业提供助力!

立刻开启你的建站之旅

留言咨询

现在加入好哇网,注册一个账号