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 : 100 vh; 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 ; h 1 { font-size : 4 rem; padding : 1.2 rem 0 ; } p{ white-space : pre-wrap; font-size : 1.6 rem; padding : 0.85 rem 0 ; } .btn{ padding : . 65 rem 1 rem; /*使用混合器设置背景色及文本颜色*/ @include set-background(lighten($primary-color, 30% )); border : none ; border : 1px solid $primary-color; border-radius: 5px ; text-decoration : none ; outline : none ; transition: all . 2 s ease . 1 s; /*按钮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( 135 deg); /*伪类实际上旋转了225度,需要将top设置为0,不然形成的❌长短不一致*/ &:before,&:after{ transform: rotate( 90 deg); top : 0 ; } } /*当checkbox选中时再hover,也会设置一个旋转效果*/ &:checked:hover ~ .hamburger>div{ transform: rotate( 235 deg); } &:checked ~ .menu{ visibility : visible ; >div{ transform: scale( 1 ); >div{ opacity: 1 ; } } } } .hamburger{ position : absolute ; left : 0 ; top : 0 ; width : 60px ; height : 60px ; padding : 1 rem; 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 . 7 s 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 . 75 s ease; >div{ @include set-background($overlay-color); width : 200 vw; height : 200 vh; overflow : hidden ; border-radius: 50% ; display : flex; justify- content : center ; align-items: center ; text-align : center ; transform: scale( 0 ); transition: all . 4 s ease; >div{ max-width : 90 vw; max-height : 90 vh; opacity: 0 ; transition: all . 4 s ease; >ul>li{ list-style : none ; font-size : 2 rem; padding : . 85 rem 0 ; text-transform : uppercase ; transform: skew( -5 deg, -5 deg) rotate( 5 deg); /*设置文字倾斜*/ a{ color : inherit; text-decoration : none ; transition: color . 4 s ease; } } } } } } |
到此这篇关于HTML+Sass实现HambergurMenu(汉堡包式菜单)的文章就介绍到这了,更多相关HTML+Sass实现HambergurMenu内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
相关文章
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
这篇文章主要介绍了Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们2020-03-17- 这篇文章主要介绍了html5写一个BUI折叠菜单插件的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一2019-09-11
- 这篇文章主要介绍了html 仿百度百科导航下拉菜单功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下2019-09-04
- 这篇文章主要介绍了HTML+CSS实现下拉菜单的实现的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-07-18
- 这篇文章主要介绍了Html屏蔽右键菜单和左键划字功能的示例的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-03-09
- 使用Html+css实现简单的下拉菜单代码非常简单,具有参考借鉴价值,需要的的朋友参考下吧2017-06-22
- 这篇文章主要为大家详细介绍了HTML5中原生的右键菜单创建方法,教大家如何用基本的HTML标记来创建个性化的右键菜单,感兴趣的小伙伴们可以参考一下2016-06-28
- 本文给大家分享html5手机端弹出遮罩菜单,通过点击显示菜单,菜单会飞的弹出,效果非常漂亮,对html5弹出遮罩菜单相关知识感兴趣的朋友一起学习吧2016-01-27
- 基于html5代码实现折叠菜单附源码下载,效果逼真,非常方便使用,对html5折叠菜单感兴趣的朋友可以参考下2015-11-27
- 可输入下拉菜单,不可思议是不是, 本例通过一些方法实现这个不可能的事情,感兴趣的朋友可以参考下2014-09-06
最新评论