媒体查询导航栏问题 [英] Navigation bar issue with media queries

问题描述

当我的网页通过媒体查询调整为移动版时，我会显示一个菜单栏（句柄），允许用户点击和 slideToggle 导航栏，以便他们可以看到它。

页面，我注意到以下问题：

当我在移动视图，导航栏是可见的，然后当我调整它的大小，导航栏是可见的。但是，如果我关闭导航栏在移动视图，然后调整到全屏，我的导航栏消失，我不知道为什么。我相信有一个问题，我的jQuery。

  $（document）.ready （function（）{var handle = $（。handle）; var navigation = $（。navigation）; handle.click（function（）{navigation.slideToggle（）;}）;}）;  

  nav ul {background-color：＃43a286; overflow：hidden;颜色：白色; padding：0; text-align：center; margin：0;} nav ul li：hover {background-color：＃399077; transition：0.5s;} nav ul li {display：inline-block; padding：20px;}。handle {width：100％; background：＃005c48; text-align：left; box-sizing：border-box; padding：15px;颜色：白色; display：none;}。handle i {float：right; cursor：pointer;} @ media screen和（max-width：400px）{nav-ul {box-sizing：border-box; width：100％;显示：block; padding：15px; text-align：left; box-shadow：1px 1px＃399077; } .handle {display：block; }}  

 < script src =https：// ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js\"&tt;/script><nav> < div class =handle>菜单< / div> < ul class =navigation> < a href =＃>< li>首页< / li>< / a> < a href =＃>< li>关于< / li>< / a> < a href =＃>< li>服务< / li>< / a> < a href =＃>< li>联系人< / li>< / a> < / ul>< / nav>  

解决方案

切换回桌面视图后，您需要将导航从隐藏重置为可见，否则如果导航已隐藏，它将保持隐藏。您可以通过 resize（）函数：

  $ ）.ready（mobileNav）; 
 $（window）.on（'resize'，mobileNav）; 
 
 function mobileNav（）{
 var handle = $（。handle）; 
 var navigation = $（。navigation）; 
 if（window.innerWidth< = 400）{
 navigation.hide（）; 
} else {
 navigation.show（）; 
} 
 handle.unbind（）。click（function（）{
 navigation.slideToggle（）; 
}）; 
} 
  

此外，< a> 不允许直接在< ul> 下，因此将它们移动到< li> / p>

jsFiddle

  $（document）.ready（mobileNav）; $ （window）.on（'resize'，mobileNav）; function mobileNav（）{var handle = $（。handle）; var navigation = $（。navigation）; if（window.innerWidth< = 400）{navigation.hide（）; } else {navigation.show（）; } handle.unbind（）。click（function（）{navigation.slideToggle（）;}）;}  

  nav ul {background-color：＃43a286; overflow：hidden;颜色：白色; padding：0; text-align：center; margin：0;} nav ul li：hover {background-color：＃399077; transition：0.5s;} nav ul li {display：inline-block;} nav ul li a {display：block; padding：20px; color：#fff;}。handle {width：100％; background：＃005c48; text-align：left; box-sizing：border-box; padding：15px;颜色：白色; display：none;}。handle i {float：right; cursor：pointer;} @ media screen和（max-width：400px）{nav-ul {box-sizing：border-box; width：100％;显示：block; text-align：left; box-shadow：1px 1px＃399077; } nav ul li a {padding：15px; } .handle {display：block; }}  

 < script src =https：// ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js\"&tt;/script><nav> < div class =handle>菜单< / div> < ul class =navigation> < li>< a href =＃>首页< / a>< / li> < li>< a href =＃>关于< / a>< / li> < li>< a href =＃>服务< / a>< / li> < li>< a href =＃>联系人< / a>< / li> < / ul>< / nav>  

When my page is resized for mobile via media queries, I show a menu bar (handle), that allows the user to click and slideToggle the navigation bar, so they can see it.

When I manually resize my page, I notice the following issue:

When I was in mobile view, and the navigation bar was visible, then when I resize it, the nav bar is visible. But, if I close the nav bar in mobile view, and then resize to full screen, my nav bar disappears, and I'm not sure why. I believe there is a problem with my jQuery. Can anyone point me in the right direction?

$(document).ready(function() {
  var handle = $(".handle");
  var navigation = $(".navigation");
  handle.click(function() {
    navigation.slideToggle();
  });
});

nav ul {
  background-color: #43a286;
  overflow: hidden;
  color: white;
  padding: 0;
  text-align: center;
  margin: 0;
}
nav ul li:hover {
  background-color: #399077;
  transition: 0.5s;
}
nav ul li {
  display: inline-block;
  padding: 20px;
}
.handle {
  width: 100%;
  background: #005c48;
  text-align: left;
  box-sizing: border-box;
  padding: 15px;
  color: white;
  display: none;
}
.handle i {
  float: right;
  cursor: pointer;
}
@media screen and (max-width: 400px) {
  nav ul li {
    box-sizing: border-box;
    width: 100%;
    display: block;
    padding: 15px;
    text-align: left;
    box-shadow: 1px 1px #399077;
  }
  .handle {
    display: block;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<nav>
  <div class="handle">Menu</div>
  <ul class="navigation">
    <a href="#"><li>Home</li></a>
    <a href="#"><li>About</li></a>
    <a href="#"><li>Service</li></a>
    <a href="#"><li>Contact</li></a>
  </ul>
</nav>

解决方案

You need to reset the navigation from hidden to visible after switch back to desktop view, otherwise it will remain hidden if he navigation is hidden. You can do it via resize() function:

$(document).ready(mobileNav);
$(window).on('resize', mobileNav);

function mobileNav() {
  var handle = $(".handle");
  var navigation = $(".navigation");
  if (window.innerWidth <= 400) {
    navigation.hide();
  } else {
    navigation.show();
  }
  handle.unbind().click(function() {
    navigation.slideToggle();
  });
}

Also, <a> is not allowed directly under <ul>, so move them into <li>s.

jsFiddle

$(document).ready(mobileNav);
$(window).on('resize', mobileNav);

function mobileNav() {
  var handle = $(".handle");
  var navigation = $(".navigation");
  if (window.innerWidth <= 400) {
    navigation.hide();
  } else {
    navigation.show();
  }
  handle.unbind().click(function() {
    navigation.slideToggle();
  });
}

nav ul {
  background-color: #43a286;
  overflow: hidden;
  color: white;
  padding: 0;
  text-align: center;
  margin: 0;
}
nav ul li:hover {
  background-color: #399077;
  transition: 0.5s;
}
nav ul li {
  display: inline-block;
}
nav ul li a {
  display: block;
  padding: 20px;
  color: #fff;
}
.handle {
  width: 100%;
  background: #005c48;
  text-align: left;
  box-sizing: border-box;
  padding: 15px;
  color: white;
  display: none;
}
.handle i {
  float: right;
  cursor: pointer;
}
@media screen and (max-width: 400px) {
  nav ul li {
    box-sizing: border-box;
    width: 100%;
    display: block;
    text-align: left;
    box-shadow: 1px 1px #399077;
  }
  nav ul li a {
    padding: 15px;
  }
  .handle {
    display: block;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<nav>
  <div class="handle">Menu</div>
  <ul class="navigation">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Service</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

这篇关于媒体查询导航栏问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！