создать динамическую навигационную панель с помощью 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

Ответ на это прост и тремя способами 1. Использование медиа-запросов Это cdd медиа запросы. Это слишком просто и удобно, и всегда лучше учиться этому 2. Изучите любой CSS-фреймворк, такой как Bootstrap, Использование начальной загрузки эффективно, так как это лидер на рынке в этой области, но это может занять некоторое время, чтобы изучить Мое предложение использовать skeleton.css это шаблон и для меня его лучший ! ссылка: www.getskeleton.com 3 Сделайте это с помощью javascript / jquery Но это будет худший выбор, но он улучшит ваши навыки JavaScript, как в современном мире JAVASCRIPT ВЕЗДЕ

Answer 2

Вы можете использовать медиа-запросы для достижения этой цели. Быстрый пример с медиа-запросами и немного JS. Рабочая скрипка там .

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');
  });
});

Answer 3

Используйте @media запрос для создания адаптивного сайта https://css -tricks.com / CSS-медиа-запросы /