如何使我的导航栏响应？

Question

我在 codepen:http://codepen.io/DogburnDesign/pen/zymID 有这个导航栏。 这很好，但我意识到它没有响应。我在制作网站方面很有经验，但我对这个响应式的东西很陌生。有帮助吗？

谢谢。这是代码：

HTML：

    <div id="bg"></div>
<section>
  <nav>
    <div></div>
    <ul>
      <li data-xcoord="0px" class="active">Home</li>
      <li data-xcoord="160px">About</li>
      <li data-xcoord="320px">Contact</li>
      <li data-xcoord="480px">Store</li>
    </ul>
  </nav>
</section>

CSS：

#bg{
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:100%;
background: #38a8d1;
background: -moz-linear-gradient(top,  #38a8d1 0%, #34bc9a 36%, #34bc9a 57%, #8645f7 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#38a8d1), color-stop(36%,#34bc9a), color-stop(57%,#34bc9a), color-stop(100%,#8645f7));
background: -webkit-linear-gradient(top,  #38a8d1 0%,#34bc9a 36%,#34bc9a 57%,#8645f7 100%);
background: -o-linear-gradient(top,  #38a8d1 0%,#34bc9a 36%,#34bc9a 57%,#8645f7 100%);
background: -ms-linear-gradient(top,  #38a8d1 0%,#34bc9a 36%,#34bc9a 57%,#8645f7 100%);
background: linear-gradient(to bottom,  #38a8d1 0%,#34bc9a 36%,#34bc9a 57%,#8645f7 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#38a8d1', endColorstr='#8645f7',GradientType=0 );
}

section{
  position:relative;
  width:640px;
  margin:50px auto;
}
nav{
  width:100%;
}
nav ul li{
  display:inline-block;
  list-style:none;
  width:160px;
  text-align:center;
  font-family:Helvetica, sans-serif;
  border: 1px dashed rgba(255,255,255, 0);
  color:#fff;
  padding:10px 0 10px 0;
  margin:-1px -5px -1px -1px;
  cursor:pointer;
  transition:all .2s;
  -webkit-transition:all .2s;
}
nav ul li:hover{
  /*border:1px dashed #fff;*/
  background:rgba(255,255,255,.1);
}
nav ul{
  border: 1px solid #fff;
  position:absolute;
  width:100%;
  padding:0;
  z-index:100;
}
nav div{
  position:absolute;
  left:0;
  top:16px;
  background: #fff;
  width:162px;
  height:40px;
  z-index:99;
}
.active{
  color:rgba(55, 186, 177, 1);
}

最后但同样重要的是，JS：

$("nav ul li").click(function(){
  var xcoord = $(this).data("xcoord");

  $("nav div").stop().animate({marginLeft:xcoord}, 500, "easeInOutExpo");
  $(this).addClass("active");
  $("nav ul li").not(this).removeClass("active");

});

Answer 1

您需要使用媒体查询。 查看下面的工作示例 （您应该检查全屏版本并使用浏览器宽度）

如果您创建响应式布局，则以百分比来考虑会更容易。您不会创建 640 像素宽的元素，而是创建 100% 宽但最大宽度为 640 像素的元素。因此，如果用户的视口宽度大于 640px，则元素为 640px，如果视口宽度小于 640px，则元素为宽度的 x%。我的观点是你需要考虑响应式，为每 10 像素的屏幕宽度创建数千个媒体查询并不是一个好习惯

我还建议您使用一些响应式 css 框架，即 Bootstrap 3

$("nav ul li").click(function(){
  var xcoord = $(this).data("xcoord");

  $("nav div").stop().animate({marginLeft:xcoord}, 500, "easeInOutExpo");
  $(this).addClass("active");
  $("nav ul li").not(this).removeClass("active");

});

#bg{
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:100%;
background: #38a8d1;
background: -moz-linear-gradient(top,  #38a8d1 0%, #34bc9a 36%, #34bc9a 57%, #8645f7 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#38a8d1), color-stop(36%,#34bc9a), color-stop(57%,#34bc9a), color-stop(100%,#8645f7));
background: -webkit-linear-gradient(top,  #38a8d1 0%,#34bc9a 36%,#34bc9a 57%,#8645f7 100%);
background: -o-linear-gradient(top,  #38a8d1 0%,#34bc9a 36%,#34bc9a 57%,#8645f7 100%);
background: -ms-linear-gradient(top,  #38a8d1 0%,#34bc9a 36%,#34bc9a 57%,#8645f7 100%);
background: linear-gradient(to bottom,  #38a8d1 0%,#34bc9a 36%,#34bc9a 57%,#8645f7 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#38a8d1', endColorstr='#8645f7',GradientType=0 );
}

section{
  position:relative;
  width: 100%;
  max-width:640px;
  margin:50px auto;
}
nav{
  width:100%;
}
nav ul li{
  display:inline-block;
  list-style:none;
  width:160px;
  text-align:center;
  font-family:Helvetica, sans-serif;
  border: 1px dashed rgba(255,255,255, 0);
  color:#fff;
  padding:10px 0 10px 0;
  margin:-1px -5px -1px -1px;
  cursor:pointer;
  transition:color .2s, background .2s;
  -webkit-transition:color .2s, background .2s;
}
nav ul li:not(.active):hover{
  /*border:1px dashed #fff;*/
  background:rgba(255,255,255,.1);
}
nav ul{
  border: 1px solid #fff;
  position:absolute;
  width:100%;
  padding:0;
  z-index:100;
}
.active{
  color:rgba(55, 186, 177, 1);
  background: #fff;
}

@media only screen and (max-width : 720px) {
  nav ul{
    width: 80%;
    left: 10%;
  }
  nav ul li{
    display: block;
    width: 100%;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="bg"></div>
<section>
  <nav>
    <ul>
      <li class="active">Home</li>
      <li>About</li>
      <li>Contact</li>
      <li>Store</li>
    </ul>
  </nav>
</section>

解决方案 2 不需要媒体查询并保持列表元素浮动。 请参阅下面的解决方案

$("nav ul li").click(function(){
  var xcoord = $(this).data("xcoord");

  $("nav div").stop().animate({marginLeft:xcoord}, 500, "easeInOutExpo");
  $(this).addClass("active");
  $("nav ul li").not(this).removeClass("active");

});

#bg{
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:100%;
background: #38a8d1;
background: -moz-linear-gradient(top,  #38a8d1 0%, #34bc9a 36%, #34bc9a 57%, #8645f7 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#38a8d1), color-stop(36%,#34bc9a), color-stop(57%,#34bc9a), color-stop(100%,#8645f7));
background: -webkit-linear-gradient(top,  #38a8d1 0%,#34bc9a 36%,#34bc9a 57%,#8645f7 100%);
background: -o-linear-gradient(top,  #38a8d1 0%,#34bc9a 36%,#34bc9a 57%,#8645f7 100%);
background: -ms-linear-gradient(top,  #38a8d1 0%,#34bc9a 36%,#34bc9a 57%,#8645f7 100%);
background: linear-gradient(to bottom,  #38a8d1 0%,#34bc9a 36%,#34bc9a 57%,#8645f7 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#38a8d1', endColorstr='#8645f7',GradientType=0 );
}

section{
  position:relative;
  width: 100%;
  max-width:640px;
  margin:50px auto;
}
nav{
  width:100%;
}
nav ul li{
  display:inline-block;
  list-style:none;
  width:25%;
  text-align:center;
  font-family:Helvetica, sans-serif;
  border: 1px dashed rgba(255,255,255, 0);
  color:#fff;
  padding:10px 0 10px 0;
  margin:-1px -5px -1px -1px;
  cursor:pointer;
  transition:color .2s, background .2s;
  -webkit-transition:color .2s, background .2s;
}
nav ul li:not(.active):hover{
  /*border:1px dashed #fff;*/
  background:rgba(255,255,255,.1);
}
nav ul{
  border: 1px solid #fff;
  position:absolute;
  width:100%;
  padding:0;
  z-index:100;
}
.active{
  color:rgba(55, 186, 177, 1);
  background: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bg"></div>
<section>
  <nav>
    <ul>
      <li class="active">Home</li>
      <li>About</li>
      <li>Contact</li>
      <li>Store</li>
    </ul>
  </nav>
</section>