Question

first image second image

当我点击3个小节按钮时，导航栏向下滑动，然后当我移动鼠标时，它会向上滑动。这工作得非常好，但是当我将浏览器的宽度设置得更大时，导航栏就不存在了，因为在jquery中我告诉它向上滑动。如何设置jquery以一定的宽度和更大的宽度上下滑动以显示我的导航栏。我希望我的导航栏以小宽度折叠，但宽度更大，我希望整个导航栏显示。

CSS：

@media screen and (min-width: 200px) {
  #wrapper { width: 300px; }

  #top-content{
    height: 40px;
  }

  #navbar li {
    display: none;
    padding-top: 4%;
    text-align: center;
  }

  #navbar ul{
    height: 130px;

  }

  #icon{
    width: 12%;
    float: right;
    border-left: solid 1px;
  }

  #navbar{
    display: none;
  }



}

@media screen and (min-width: 500px) {
  #wrapper { width: 450px;}

  #navbar li a {
    display: inline-block;

  }

  #icon{
    display: none;
  }

  #navbar ul{
    height: 40px;
    display: inline-flex;
    width: 96%;
  }

  #top-content{
    display: none;
  }

  #navbar, #navbar li {
    display: block;
  }

  #navbar li{
    padding-top: 13%;
  }

}

@media screen and (min-width: 700px) {
  #wrapper {width: 680px; }

  #navbar, #navbar li {
    display: block;
  }

  #navbar li{
    padding-top: 13%;
  }

}
@media screen and (min-width: 900px) {
  #wrapper { width: 850px; }

  #navbar, #navbar li {
    display: block;
  }

  #navbar li{
    padding-top: 13%;
  }

}

HTML：

<body>

 <div id="wrapper">

  <div id="top-content">
    <img id="icon" src="images/dropdown.png" />
  </div>
      <div id="navbar">

        <ul>
          <li> <a href="#"> Home </li> </a>
          <li> <a href="#"> About Me </li> </a>
          <li> <a href="#"> Contact Me </li> </a>
          <li> <a href="#"> Blog </li> </a>
        </ul>
      </div>
    </div>

</div>

JavaScript的：

$('#icon').click(function(){
  $('#navbar, #navbar li').slideDown();
});

$('#navbar,#navbar ul').mouseleave(function(){
    $('#navbar li, #navbar').slideUp(700);

});

Answer 1

在单独的窗口中运行此代码段并调整窗口大小以查看差异。我暂时将您的img更改为div以模拟菜单图标。

＆＃13;

var Menu = {
  options: {
    minWidth: 500,
    downDelayMs: 700,
    upDelayMs: 700,
  },
  Init: function() {
    $("#icon").on("click", Menu.SlideDown);
    $(window).on("resize", Menu.AdjustSize);
    Menu.AdjustSize();
  },
  SlideDown: function() {
    $('#navbar, #navbar li').slideDown(Menu.options.downDelayMs);
  },
  SlideUp: function() {
    $('#navbar li, #navbar').slideUp(Menu.options.upDelayMs);
  },
  AdjustSize: function() {
    if ($(window).width() >= Menu.options.minWidth) {
      if (!Menu.windowWidth || Menu.windowWidth < Menu.options.minWidth) {
        $('#navbar,#navbar ul').off("mouseleave", Menu.SlideUp);
        $('#navbar li, #navbar').show();
        $("#top-content").hide();
      }
    } else {
      if (!Menu.windowWidth || Menu.windowWidth >= Menu.options.minWidth) {
        $('#navbar li, #navbar').hide();
        $("#top-content").show();
        $('#navbar,#navbar ul').on("mouseleave", Menu.SlideUp);
      }
    }
    Menu.windowWidth = $(window).width();
  }
};
Menu.Init();

＆＃13;

.fakeicon {
  background-color: Green;
  width: 40px;
  height: 40px;
  background-image: url("images/dropdown.png");
  cursor: pointer;
}
.fakeicon:hover {
  box-shadow: 2px 2px 6px 3px #ccc;
}
ul {
  list-style: none;
}
li {
  white-space: nowrap;
}
a {
  text-decoration: none;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  color: #333;
  display: inline-block;
  padding: 6px 20px;
}
a:hover {
  background-color: #eee;
  box-shadow: 2px 2px 6px 3px #ccc;
}
@media screen and (min-width: 200px) {
  #wrapper {
    width: 300px;
  }
  #top-content {
    height: 40px;
  }
  #navbar li {
    display: none;
    padding-top: 4%;
    text-align: center;
  }
  #navbar ul {
    height: 130px;
  }
  #icon {
    width: 12%;
    float: right;
    border-left: solid 1px;
  }
  #navbar {
    display: none;
  }
}
@media screen and (min-width: 500px) {
  #wrapper {
    width: 450px;
  }
  #navbar li a {
    display: inline-block;
  }
  #icon {
    display: none;
  }
  #navbar ul {
    height: 40px;
    display: inline-flex;
    width: 96%;
  }
  #top-content {
    display: none;
  }
  #navbar,
  #navbar li {
    display: block;
  }
  #navbar li {
    padding-top: 13%;
  }
}
@media screen and (min-width: 700px) {
  #wrapper {
    width: 680px;
  }
  #navbar,
  #navbar li {
    display: block;
  }
  #navbar li {
    padding-top: 13%;
  }
}
@media screen and (min-width: 900px) {
  #wrapper {
    width: 850px;
  }
  #navbar,
  #navbar li {
    display: block;
  }
  #navbar li {
    padding-top: 13%;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div id="top-content">
    <div id="icon" title="Show Menu" class="fakeicon"></div>
  </div>
  <div id="navbar">
    <ul>
      <li><a href="#">Home</a>
      </li>
      <li><a href="#">About Me</a>
      </li>
      <li><a href="#">Contact Me</a>
      </li>
      <li><a href="#">Blog</a>
      </li>
    </ul>
  </div>
</div>

＆＃13;

jQuery - 如何以特定宽度显示完整的导航栏？

1 个答案: