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

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

javascript jquery html css

Javascript jQuery-如何以一定的宽度显示完整的导航栏？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,当我点击3栏按钮时，导航栏向下滑动，当我移开鼠标时，导航栏又向上滑动。这工作得非常好，但是当我将浏览器的宽度变大时，导航栏就不存在了，因为在jquery中，我让它向上滑动。如何将jquery设置为以特定宽度和更大宽度上下滑动以显示导航栏。我希望我的导航栏折叠在一个小的宽度，但在一个更大的宽度，我希望整个导航栏显示 CSS: HTML: 在单独的窗口中运行此代码段，并调整窗口大小以查看差异。我临时将您的img更改为div以模拟菜单图标变量菜单={ 选项：{ 最小宽度：500，平均分:700,

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

CSS:

HTML:

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

变量菜单={ 选项：{ 最小宽度：500，平均分:700,，更新：700， }, Init：函数{ $icon.onclick，Menu.SlideDown； $window.onresize，Menu.AdjustSize；菜单。调整大小； }, 向下滑动：函数{ $'navbar，navbar li'。slideDownMenu.options.downDelayMs； }, 幻灯片：函数{ $'navbar li，navbar'。slideUpMenu.options.upDelayMs； }, 调整大小：功能{ 如果$window.width>=Menu.options.minWidth{ if！Menu.windowWidth | | Menu.windowWidth=Menu.options.minWidth{ $'navbar li，navbar'。隐藏； $top-content.show； $'navbar，navbar ul'.onmouseleave，Menu.SlideUp； } } Menu.windowWidth=$window.width； } }; Menu.Init； fakeicon先生{ 背景颜色：绿色；宽度：40px；高度：40px；背景图像：urlmages/dropdown.png；光标：指针； } .fakeicon:悬停{ 盒形阴影：2×2×6×3×ccc； } 保险商实验室{ 列表样式：无； } 李{ 空白：nowrap； } a{ 文字装饰：无；字体系列：Segoe UI，Arial，无衬线；字体大小：16px；颜色：333；显示：内联块；填充：6px 20px； } a:悬停{ 背景色：eee；盒形阴影：2×2×6×3×ccc； } @媒体屏幕和最小宽度：200px{ 包装纸{ 宽度：300px； } 顶级内容{ 高度：40px； } 李国宝{ 显示：无；垫面：4%；文本对齐：居中； } 纳瓦尔{ 高度：130像素； } 图标{ 宽度：12%；浮动：对；左边框：实心1px； } 导航栏{ 显示：无； } } @媒体屏幕和最小宽度：500px{ 包装纸{ 宽度：450px； } 纳瓦巴利阿{ 显示：内联块； } 图标{ 显示：无； } 纳瓦尔{ 高度：40px；显示：内联flex；宽度：96%； } 顶级内容{ 显示：无； } 导航栏，李国宝{ 显示：块； } 李国宝{ 填充顶部：13%； } } @媒体屏幕和最小宽度：700px{ 包装纸{ 宽度：680px； } 导航栏，李国宝{ 显示：块； } 李国宝{ 填充顶部：13%； } } @媒体屏幕和最小宽度：900px{ 包装纸{ 宽度：850px； } 导航栏，李国宝{ 显示：块； } 李国宝{ 填充顶部：13%； } }

将事件处理程序绑定到$window.resize，然后在窗口达到一定大小时更改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%;
  }

}

<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>

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

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

});