我在移动设备中遇到了两个导航栏问题。 当我点击第一个导航栏图标时，两个导航都出来了。 我正在尝试CSS可见性：单击图标时没有代码，但我没有得到正确的结果。 你能帮我么？
我附上以下图片供您参考。
这是两个导航栏。 一个黑色，一个白色。
这是我遇到问题的地方。 你可以看到两者都出来了。
这是我们点击导航栏2时发生的情况。这是正确的。
谢谢。
I'm having issues with two navigation bars in mobile. When I click on the first navigation bar icon, both navigation is coming out. I'm trying the CSS visibility: none code upon clicking the icon but I'm not getting the right outcome. Can you please help me?
I have attached images below for your reference.
This is the two navigation bars. One in black, one in white.
This is the where I'm getting the issue. As you can see both are coming out.
This is what happens when we click on navigation bar 2. This is correct.
Thank you.
最满意答案
从这里删除可见性选项：
.td-js-loaded .td-menu-background, .td-js-loaded #td-mobile-nav { /* visibility: visible; ----- remove this */ -webkit-transition: transform 0.5s cubic-bezier(0.79, 0.14, 0.15, 0.86); -moz-transition: transform 0.5s cubic-bezier(0.79, 0.14, 0.15, 0.86); -o-transition: transform 0.5s cubic-bezier(0.79, 0.14, 0.15, 0.86); transition: transform 0.5s cubic-bezier(0.79, 0.14, 0.15, 0.86); }将可见性添加到：
.td-menu-mob-open-menu #td-mobile-nav { height: auto; overflow: auto; transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); left: 0; visibility: visible; /* it's added here */ }在：
.td-menu-mob-open-menu .td-menu-background { transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); visibility: visible; /* it's added here */ }它将解决您当前的问题。
但是你必须再做两次思考，这样如果用户打开第二个导航并滚动他只能看到导航菜单，他/她就不会关闭它。
.td-menu-background { background-repeat: no-repeat; background-size: cover; background-position: center top; position: absolute; /* before it was position: fixed; */ display: block; width: 100%; height: 113%; z-index: 9999; visibility: hidden; transform: translate3d(-100%, 0, 0); -webkit-transform: translate3d(-100%, 0, 0); -moz-transform: translate3d(-100%, 0, 0); -ms-transform: translate3d(-100%, 0, 0); -o-transform: translate3d(-100%, 0, 0); }并且为了在白色背景上显示交叉按钮，您应该更改它的颜色：
.td-mobile-close .td-icon-close-mobile { height: 70px; width: 70px; line-height: 70px; font-size: 21px; color: #bdbdbd; /* before it was "color: #fff;" if you don't like "color: #bdbdbd;" you can change it with your desire color */ top: 4px; position: relative; }Remove Visibility option from here:
.td-js-loaded .td-menu-background, .td-js-loaded #td-mobile-nav { /* visibility: visible; ----- remove this */ -webkit-transition: transform 0.5s cubic-bezier(0.79, 0.14, 0.15, 0.86); -moz-transition: transform 0.5s cubic-bezier(0.79, 0.14, 0.15, 0.86); -o-transition: transform 0.5s cubic-bezier(0.79, 0.14, 0.15, 0.86); transition: transform 0.5s cubic-bezier(0.79, 0.14, 0.15, 0.86); }Add Visibility to :
.td-menu-mob-open-menu #td-mobile-nav { height: auto; overflow: auto; transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); left: 0; visibility: visible; /* it's added here */ }And in:
.td-menu-mob-open-menu .td-menu-background { transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); visibility: visible; /* it's added here */ }It will solved your current issue.
but you have to do two more think, so that if user open 2nd nav and scroll he can see only navigation menu until, he/she don't close this.
.td-menu-background { background-repeat: no-repeat; background-size: cover; background-position: center top; position: absolute; /* before it was position: fixed; */ display: block; width: 100%; height: 113%; z-index: 9999; visibility: hidden; transform: translate3d(-100%, 0, 0); -webkit-transform: translate3d(-100%, 0, 0); -moz-transform: translate3d(-100%, 0, 0); -ms-transform: translate3d(-100%, 0, 0); -o-transform: translate3d(-100%, 0, 0); }And for showing cross button on white background, you should change the color of it:
.td-mobile-close .td-icon-close-mobile { height: 70px; width: 70px; line-height: 70px; font-size: 21px; color: #bdbdbd; /* before it was "color: #fff;" if you don't like "color: #bdbdbd;" you can change it with your desire color */ top: 4px; position: relative; }更多推荐
发布评论