使用css创建动态导航栏

Question

我在html和css是新手。我无法动态调整此导航栏。我的问题是，当我调整窗口大小时，它的布局被打乱了，在较小的设备中，它也分散了。我希望当我使用较小的设备时，例如移动设备，或者当我调整窗口大小时，它的形状和布局不会改变

<style>
.page-numbers {
width:99%;
height:34px; 
margin:20px 0 auto;
border:1px solid #ddd;
border:1px solid rgba(0, 0, 0, 0.15);
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);
}

.page-numbers ul li{display:inline;}
.page-numbers a, 
.page-numbers .current{
 float:left;padding:0 14px;
 line-height:34px;
 border-right:1px solid;
 border-right-color:#ddd;
 border-right-color:rgba(0, 0, 0, 0.15);
 *border-right-color:#ddd;
 text-decoration:none;
 width:auto;
 }

.page-numbers a:hover,

.page-numbers .active a{background-color:#efefef;}

.page-numbers .current{
 background-color:none;
 color:#bfbfbf;
 }
.page-numbers .next a{border:0;}

</style>


<div class="page-numbers">
<span class="current" style="width:auto">← Previous</span>
<span class="current">1</span>
<a href="http://www.superpathshala.com/2018/05/the-hindu-vocabulary-with- 
mnemonics-english-to-hindi-A2.html" class="page">2</a>
<a href="http://www.superpathshala.com/2018/05/the-hindu-vocabulary-with- 
mnemonics-english-to-hindi-A3.html" class="page">3</a>
<a href="http://www.superpathshala.com/2018/05/the-hindu-vocabulary-with- 
mnemonics-english-to-hindi-A4.html" class="page">4</a>
<a href="http://www.superpathshala.com/2018/05/the-hindu-vocabulary-with- 
mnemonics-english-to-hindi-A5.html" class="page">5</a>
<a href="http://www.superpathshala.com/2018/05/the-hindu-vocabulary-with- 
mnemonics-english-to-hindi-A6.html" class="page">6</a>
<a href="http://www.superpathshala.com/2018/05/the-hindu-vocabulary-with- 
mnemonics-english-to-hindi-A7.html" class="page">7</a>
<a href="http://www.superpathshala.com/2018/05/the-hindu-vocabulary-with- 
mnemonics-english-to-hindi-A8.html" class="page">8</a>
<a href="http://www.superpathshala.com/2018/05/the-hindu-vocabulary-with- 
mnemonics-english-to-hindi-A9.html" class="page">9</a>
<a href="http://www.superpathshala.com/2018/05/the-hindu-vocabulary-with- 
mnemonics-english-to-hindi-A10.html" class="page">10</a>
<a href="http://www.superpathshala.com/2018/05/the-hindu-vocabulary-with- 
mnemonics-english-to-hindi-A2.html" class="nextpostslink" style="border- 
right:none; width:60px">Next →</a>
</div>

Answer 1

使用@media query创建响应式网站https://css-tricks.com/css-media-queries/

Answer 2

这个问题的答案很简单，有三种方法1.使用媒体查询，这就是cdd媒体查询。学习任何像Bootstrap这样的css框架，使用bootstrap是效率很高的，因为它是这个领域的市场领导者，但它可能需要一些时间来学习我的建议使用skeleton.css它是一个样板，对我来说它是最好的！链接: www.getskeleton.com 3.使用javascript/jquery可以做到这一点，但这将是最糟糕的选择，但它将提高您的javascript技能，因为在当今世界中，JAVASCRIPT无处不在

Answer 3

您可以使用media-queries来实现这一点。这是一个带有媒体查询和一些JS的快速示例。工作的小提琴是there。

HTML :

<div class="triggers">
  <div class="trigger"></div>
  <div class="trigger"></div>
</div>
<nav>
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
</nav>
<h1>
Resize under 720px
</h1>

CSS :

html {
  font-family: sans-serif;
}

h1 {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all .25s ease;
}

.triggers {
  display: none;
  position: fixed;
  top: 10px; right: 25px;
  width: 50px;
  height: 50px;
  justify-content: center;
  align-items: center;
  z-index: 99;
}

.trigger {
  position: absolute;
  width: 30px;
  height: 2px;
  background: #000;
  transition: all .25s ease;
}

.trigger:nth-child(1).is-active {
  transform: rotate(45deg);
}

.trigger:nth-child(2).is-active {
  transform: rotate(-45deg);
}

a {
  text-decoration: none; 
  margin: 10px;
}

@media (max-width:720px) {
  .triggers {
    display: flex;
  }

  nav {
    top: -50px;
  }

  nav.is-active {
    top: 0;
  }
}

JS (jQuery) :

$(function(){
  $('.triggers').click(function(){
    $('.trigger, nav').toggleClass('is-active');
  });
});