javascript - 如何使我的导航栏响应？

我在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");

});

最佳答案

您需要使用媒体查询。请参阅下面的工作示例（您应该检查全屏版本并使用浏览器宽度播放）
如果创建响应式布局，则按百分比考虑会更容易。不创建640px宽的元素，但创建100%宽但最大宽度为640px的元素。因此，如果用户的视窗宽度大于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>