0
我有一个导航菜单，我做了，我无法让转换过渡到工作时，我关闭菜单，它只有当我打开它的作品。这里是我的html转换过渡不起作用在响应导航菜单上
header#main {
position: fixed;
width: 100%;
z-index: 10;
box-shadow: 4px 1px 5px 1px rgba(0,0,0,0.75);
}
.container {
width: 95%;
margin: 0 auto;
}
header {
background: #FFFFFF;
padding: 1em 0 !important;
position: relative;
}
header::after {
content: '';
clear: both;
display: block;
}
.logo-container {
float: left;
margin-left:1em;
}
.site-nav {
position: absolute;
top: 2.3em;
right: 0;
}
.site-nav--open {
}
.site-nav ul {
padding: 0;
list-style: none;
}
.site-nav li {
border-bottom: none;
display:inline-block;
margin-left:3em;
}
.site-nav li:last-child {
border-bottom: none;
}
.site-nav a {
font-family:abel;
color: #333;
letter-spacing:2px;
padding:1.3em;
text-transform: uppercase;
text-decoration: none;
text-align:center;
}
a.login-nav {
color: white;
background: #ef7899;
padding-top: 2.4em !important;
padding-bottom: 2.25em !important;
padding-left: 2em !important;
padding-right: 2em!important ;
transition:background 0.5s ease-in-out;
}
a.login-nav:hover {
background:#000 !important;
color:white !important;
}
.site-nav a:hover,
.site-nav a:focus {
color: #333;
}
.site-nav--icon {
display: inline-block;
font-size: 1.5em;
margin-right: 1em;
width: 1.1em;
text-align: right;
color: rgba(255,255,255,.4);
}
.menu-toggle {
padding: 1em;
position: absolute;
top: 1.8em;
right: .7em;
cursor: pointer;
z-index:101;
display:none;
}
.hamburger,
.hamburger::before,
.hamburger::after {
content: '';
display: block;
background: #555;
height: 3px;
width: 1.75em;
border-radius: 3px;
transition: all ease-in-out 500ms;
}
.hamburger::before {
transform: translateY(-6px);
}
.hamburger::after {
transform: translateY(3px);
}
.open .hamburger {
transform: rotate(45deg);
background:black;
}
.open .hamburger::before {
opacity: 0;
}
.open .hamburger::after {
transform: translateY(-3px) rotate(-90deg);
background:black;
}
@media screen and (max-width: 1000px) {
.logo-container img {
width: 200px;
}
.menu-toggle {
display:block;
}
.site-nav {
position: absolute;
top: 100%;
right: 0%;
transform: translateX(100%);
transition:transform 0.8s ease;
}
.site-nav a{
display:none;
}
.site-nav li{
display:block;
}
.site-nav--open {
display: flex;
position: fixed;
top: 0;
right: 0;
z-index: 100;
transform: translateX(70%);
background: white;
height: 100%;
width: 100%;
transition:transform 0.8s ease;
}
.site-nav--open ul{
align-self:center;
}
.site-nav--open a {
font-family:abel;
color: #000;
display: inline-block;
letter-spacing:2px;
padding:1.3em;
text-transform: uppercase;
text-decoration: none;
text-align:center;
}
}<header id="main">
<div class="container">
<div class="logo-container">
<h1>test</h1>
</div>
<nav class="site-nav">
<ul class="navi">
<li><span class="liner"><a class="vert" href="#one">Invest</a></span></li>
<li><span class="liner"><a class="vert" href="#two">Subscribe</a></span></li>
<li><span class="liner"><a class="vert" href="#why">Why Us</a></span></li>
<li><span class="liner"><a class="vert" href="#three">Faq</a></span></li>
<li class="log"><a class="login-nav" href="http://www.google.com"><i class="fa fa-sign-in" aria-hidden="true"></i>Login</a></li>
</ul>
</nav>
<div class="menu-toggle">
<div class="hamburger"></div>
</div>
</div>
</header>我也有一些jQuery代码，但这一切确实是切换菜单，并添加一个类时，它是开放的，从而不能确定是否发布它的重要与否但在这里。
$('.menu-toggle').click(function() {
$('.site-nav').toggleClass('site-nav--open');
$(this).toggleClass('open');
$('.landing').toggleClass('landing-open');
})
谢谢你的工作，唯一的问题是，如果我调整窗口，下至1000像素的菜单将关闭整个屏幕。 – atlas24
如果你不想在整个屏幕上的菜单，并设置固定的宽度.. –
我确实有一个宽度，它的问题仍然存在。有一个宽度超过1000像素的屏幕，然后缩小到1000像素宽度，你会明白我的意思。我找到的唯一解决方案就是translateX未打开的导航菜单，但随后我的桌面导航变得不可见。 – atlas24