转换过渡不适用于响应式导航菜单

时间：2017-09-13 12:28:44

标签： html css css3

我有一个导航菜单，当我关闭菜单时，我无法让转换过渡工作，只有当我打开它时它才有效。这是我的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');

  })

1 个答案:

答案 0 :(得分：0)

只需将.site-nav--open中的css替换为.site-nav

即可 

$('.menu-toggle').click(function() {
  $('.site-nav').toggleClass('site-nav--open');
  $(this).toggleClass('open');
  $('.landing').toggleClass('landing-open');
})
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 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: fixed;
    top: 0%;
    right: 0%;
    transform: translateX(100%);
    transition:transform 0.8s ease;
    background: white;
    height: 100%;
    width: 310px;
    z-index: 100;
  }
  .site-nav a{
    display:none;
  }
  .site-nav li{
    display:block;
  }
  .site-nav--open {
    transform: translateX(0%);
  }
  .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;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<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>

工作Demo

相关问题
最新问题