建站百科

文章导读：本文主要阐述了“css实现手机汉堡菜单效果代码”汉堡菜单在手机网站制作中非常常见，下面跨屏网给大家讲讲css实现手机汉堡菜单效果代码。html代码div class=container button id...，本文由跨屏网最后更新于2020-07-21，全文共1103个字，预计阅读时长3分40秒。

html代码

<div class="container"> <button id="data-menu-toggle" class="data-menu-toggle"> <span class="menu-bar bar"></span> </button> </div>

css代码

.container { padding-left: 15px; padding-right: 15px; margin-top: 100px; margin-left: auto; margin-right: auto; text-align: center; } .data-menu-toggle { position: relative; width: 40px; height: 30px; background-color: transparent; border: none; cursor: pointer; outline: none; }  .data-menu-toggle .menu-bar, .data-menu-toggle .menu-bar:before, .data-menu-toggle .menu-bar:after{ display: block; position: absolute; width: 100%; height: 5px; background-color: black; transition: all ease-in-out .3s; } .data-menu-toggle .menu-bar.bar { top: 12px; } .data-menu-toggle .menu-bar.bar:before { content: ""; top: -12px; } .data-menu-toggle .menu-bar.bar:after { content: ""; top: 12px; }  .data-menu-toggle.active .bar { background-color: transparent; } .data-menu-toggle.active .bar:before { top: 0px; transform: rotate(45deg); } .data-menu-toggle.active .bar:after { top: 0px; transform: rotate(-45deg); }

js 代码

const element = document.getElementById('data-menu-toggle');  element.onclick = function() { this.classList.toggle('active'); }

写在最后，以上就是对于“css实现手机汉堡菜单效果代码”的一些看法，欢迎指正、交流。

名称栏目：css实现手机汉堡菜单效果代码
网页链接：http://test.kuaping.com/article/show53.html