汉堡菜单

打开前

打开后

问题

在移动设备上，汉堡菜单打开后，点击“X”不能关闭，要点击页面空白处才可以。

原因

汉堡菜单功能完全由 css 实现，利用了 :acitve 和 :hover 选择器，造成任何点击事件都是打开状态。

解决方法

添加 js 事件，通过增减 class 名称切换打开和关闭状态。

修改 footer.php，在 script 标签内增加如下内容

var mobileMenu = document.querySelector('.navbar-mobile-menu');
mobileMenu.addEventListener('click', function() {
    mobileMenu.classList.toggle('menu-on');
});

修改 style.min.css，将 .navbar-mobile-menu:active 和 .navbar-mobile-menu:hover 相关的内容改为 .navbar-mobile-menu.menu-on

旧 css

.navbar-mobile-menu {
    line-height:70px;
    z-index:1;
    display:none;
    width:28px;
    padding:0 45px 0 10px;
    cursor:pointer
}
.navbar-mobile-menu:active,.navbar-mobile-menu:hover {
    cursor:pointer
}
.navbar-mobile-menu:active:before,.navbar-mobile-menu:hover:before {
    -webkit-animation:pointer-ball .3s ease 1;
    animation:pointer-ball .3s ease 1;
    -webkit-animation-timing-function:cubic-bezier(.61,.04,.17,1.32);
    animation-timing-function:cubic-bezier(.61,.04,.17,1.32)
}
.navbar-mobile-menu:active .icon-menu,.navbar-mobile-menu:hover .icon-menu {
    -webkit-transform:rotateZ(360deg);
    -ms-transform:rotateZ(360deg);
    transform:rotateZ(360deg)
}
.navbar-mobile-menu:active .icon-menu.cross .middle,.navbar-mobile-menu:active .icon-menu.cross:after,.navbar-mobile-menu:active .icon-menu.cross:before,.navbar-mobile-menu:hover .icon-menu.cross .middle,.navbar-mobile-menu:hover .icon-menu.cross:after,.navbar-mobile-menu:hover .icon-menu.cross:before {
    background:#eb5055
}
.navbar-mobile-menu:active .icon-menu.cross .middle,.navbar-mobile-menu:hover .icon-menu.cross .middle {
    opacity:0
}
.navbar-mobile-menu:active .icon-menu.cross:after,.navbar-mobile-menu:hover .icon-menu.cross:after {
    bottom:5px;
    -webkit-transform:rotate(135deg);
    -ms-transform:rotate(135deg);
    transform:rotate(135deg)
}
.navbar-mobile-menu:active .icon-menu.cross:before,.navbar-mobile-menu:hover .icon-menu.cross:before {
    top:5px;
    -webkit-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    transform:rotate(45deg);
    -webkit-box-shadow:0 0 0 #fff;
    box-shadow:0 0 0 #fff
}
.navbar-mobile-menu li {
    position:relative;
    display:inline;
    margin:0;
    text-decoration:none
}
.navbar-mobile-menu ul {
    position:absolute;
    z-index:1;
    top:100%;
    overflow:hidden;
    clip:rect(1px,1px,1px,1px);
    margin:0 0 0 -95px;
    padding:0;
    -webkit-transition:-webkit-transform .3s;
    transition:-webkit-transform .3s;
    transition:transform .3s;
    -webkit-transform:translate(120px,0);
    -ms-transform:translate(120px,0);
    transform:translate(120px,0);
    text-indent:0
}
.navbar-mobile-menu:active>ul,.navbar-mobile-menu:focus>ul,.navbar-mobile-menu:hover>ul {
    overflow:inherit;
    clip:inherit;
    -webkit-transition:-webkit-transform .3s;
    transition:-webkit-transform .3s;
    transition:transform .3s;
    -webkit-transform:translateX(0) translateY(0) translateZ(0);
    transform:translateX(0) translateY(0) translateZ(0)
}
.navbar-mobile-menu ul li a {
    font-size:15px;
    line-height:2.2;
    display:block;
    width:140px;
    margin:0;
    padding:8px 25px;
    background-color:#eee
}

新 css

.navbar-mobile-menu {
    line-height:70px;
    z-index:1;
    display:none;
    width:28px;
    padding:0 45px 0 10px;
    cursor:pointer
}
.navbar-mobile-menu.menu-on:before {
    -webkit-animation:pointer-ball .3s ease 1;
    animation:pointer-ball .3s ease 1;
    -webkit-animation-timing-function:cubic-bezier(.61,.04,.17,1.32);
    animation-timing-function:cubic-bezier(.61,.04,.17,1.32)
}
.navbar-mobile-menu.menu-on .icon-menu {
    -webkit-transform:rotateZ(360deg);
    -ms-transform:rotateZ(360deg);
    transform:rotateZ(360deg)
}
.navbar-mobile-menu.menu-on .icon-menu.cross .middle,.navbar-mobile-menu.menu-on .icon-menu.cross:after,.navbar-mobile-menu.menu-on .icon-menu.cross:before {
    background:#eb5055
}
.navbar-mobile-menu.menu-on .icon-menu.cross .middle {
    opacity:0
}
.navbar-mobile-menu.menu-on .icon-menu.cross:after {
    bottom:5px;
    -webkit-transform:rotate(135deg);
    -ms-transform:rotate(135deg);
    transform:rotate(135deg)
}
.navbar-mobile-menu.menu-on .icon-menu.cross:before {
    top:5px;
    -webkit-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    transform:rotate(45deg);
    -webkit-box-shadow:0 0 0 #fff;
    box-shadow:0 0 0 #fff
}
.navbar-mobile-menu li {
    position:relative;
    display:inline;
    margin:0;
    text-decoration:none
}
.navbar-mobile-menu ul {
    position:absolute;
    z-index:1;
    top:100%;
    overflow:hidden;
    clip:rect(1px,1px,1px,1px);
    margin:0 0 0 -95px;
    padding:0;
    -webkit-transition:-webkit-transform .3s;
    transition:-webkit-transform .3s;
    transition:transform .3s;
    -webkit-transform:translate(120px,0);
    -ms-transform:translate(120px,0);
    transform:translate(120px,0);
    text-indent:0
}
.navbar-mobile-menu.menu-on>ul {
    overflow:inherit;
    clip:inherit;
    -webkit-transition:-webkit-transform .3s;
    transition:-webkit-transform .3s;
    transition:transform .3s;
    -webkit-transform:translateX(0) translateY(0) translateZ(0);
    transform:translateX(0) translateY(0) translateZ(0)
}
.navbar-mobile-menu ul li a {
    font-size:15px;
    line-height:2.2;
    display:block;
    width:140px;
    margin:0;
    padding:8px 25px;
    background-color:#eee
}

本文由「管理员」创作，并被添加「主题 Typecho 移动设备」标签，最后更新于 2025-09-06 18:02:15，已有 2887 位童鞋阅读过。

本站所有文章除特别声明外，均采用「署名 4.0 国际」许可协议，可自由转载、引用，但需署名作者且注明文章出处！

相关文章

• Typecho 中代码段导致列表编号错乱
• Typecho 插件 Access 适配 SQLite3 数据库
• Typecho 主题推荐
• Jekyll 主题推荐