如何使导航栏响应

How can I make my navbar responsive?

本文关键字：响应 导航 何使      更新时间：2023-09-26

我在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%。我的观点是，您需要考虑响应式，为每 10px 的屏幕宽度创建数千个媒体查询不是一个好做法

我还建议您使用一些响应式 css 框架，即引导 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>

相关文章：