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');
})
に
.site-nav--openでCSSを交換するには、私が1000pxにダウンメニューをウィンドウのサイズを変更する場合にのみ問題があり、働いていたことをありがとう画面全体で閉じます。 – atlas24画面全体にそのメニューを表示したくない場合は、固定幅を設定してください。 –
固定幅があり、問題は解決しません。 1000pxより広い画面を作成し、1000px幅に縮小すると、私の意図がわかります。私が見つけた唯一の解決策は、開かれていないナビゲーションメニューですが、デスクトップナビは見えなくなります。 – atlas24