Question

我正在处理我正在处理的网站的ccs3过渡问题。

您可以在此处查看该网站。 http://cornergrillny.com/index2.php

如果你调整到移动视图，我几乎可以使用它看起来很棒。

但是，在桌面上有一个我想修复的小故障。

请注意，当您将浏览器的大小调整为小于1000像素时，因为css3将max-height调整为0隐藏了导航栏，它会滑动并看起来很有趣。

我不能使用display：none，因为ccs3过渡需要＆＃34; height＆＃34;属性显示导航器上下滑动。

简单修复？一直困扰我一个小时。

我会在这里发布固定代码

提前致谢。 -O

Answer 1

单独使用CSS在这里没有帮助。使用JQuery的slideUp（）＆amp; slideDown（）函数可以获得所需的效果。快速概念：

＆＃13;

$(".button").click(function(){
  if($(this).hasClass("open")){
    $(".menu").slideUp();
    $(this).removeClass("open");
  }else{
    $(".menu").slideDown();
    $(this).addClass("open");
  }
});

＆＃13;

.wrap {
  background-color: red;
}
.wrap:after {
  content: "";
  display: table;
  clear: both;
}
@media (max-width: 600px) {
  .wrap .menu {
    display: none;
  }
}
@media (min-width: 600px) {
  .wrap .menu {
    display: block !important;
  }
}
@media (max-width: 600px) {
  .wrap .button {
    display: block;
  }
}
@media (min-width: 600px) {
  .wrap .button {
    display: none;
  }
}
.wrap li, .wrap .button {
  float: left;
  padding: 20px;
}
@media (max-width: 600px) {
  .wrap li, .wrap .button {
    float: none;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrap">
  <div class="button">[#]</div>
  <div class="menu">
    <ul>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
    </ul>
  </div>
</div>

＆＃13;

这里的工作示例：http://codepen.io/flowbob/pen/mymqvp

响应式CSS3 Transition Dropdown Nav Menu blip

1 个答案: