Динамическая навигация с отзывчивым дизайном и чистым CSS - PullRequest
Новая
       12

Динамическая навигация с отзывчивым дизайном и чистым CSS

0 голосов
/ 16 февраля 2019

Я уже создал несколько сайтов с адаптивной навигацией.Существует множество решений для адаптивного дизайна навигации по сайту, если у вас есть статическая навигация.

Однако для моего текущего проекта я строю динамическую навигацию для каждого пользователя, поэтому количество элементов навигации, а также их содержимоемогут быть изменены и являются индивидуальными пользователями.Поэтому я уже пробовал разные вещи с flexbox и плавающими макетами, но не нашел решения, отвечающего моим потребностям.

У вас есть идея, как решить проблему, показанную на картинке?

Responsive Navigation

Я также приложил пример кода. 

<!DOCTYPE html>
<html>
<head>
<style>
        * {
            font-family: "Avenir";
        }
        body {
            margin: 0;
        }
        header {
            background: #303ca2;
            color: white;
            margin-bottom: 20px;
            display: flex;
        }
        h1 {
            font-size: 24px;
            margin: 0;
            text-transform: uppercase;
            font-weight: 400;
            padding: 10px;
            line-height: 40px;
            flex-shrink: 0;
        }
        nav {

        }
        nav ul {
            margin: 0;
            padding: 0;
            text-align: right;
        }

        nav ul li {
            list-style: none;
            display: inline-block;
            font-size: 16px;
            padding: 10px 10px;
            line-height: 40px;
        }

    </style>
   </head>
   <body>
    <header>
        <h1>Title Zone</h1>
        <nav>
            <ul>
                <li>Navigation Elem 1</li>
                <li>Navigation Element 2</li>
                <li>Navigation 3</li>
                <li>Element 4</li>
                <li>Element 5</li>
                <li>Navigation 6</li>
                <li>Element n</li>
            </ul>
        </nav>
   </header>

   </body>
   </html>

1 Ответ

0 голосов
/ 16 февраля 2019

вам нужно использовать медиа-запрос, чтобы установить, что будет отображаться при каждом размере экрана.В файле HTML вы определите все случаи, включая тег div «more» с тегом yheir li, но когда размер экрана меньше определенного значения, этот div получит display: none, например: 

<ul>
  <li>element 1</li>
  <li>element 2</li>
  <li class="disabledOnMobile">element 3</li>
  <li class="disabledOnMobile">element 4</li>
  <div  class="activeOnMobile">more...
    <ul>
      <li>element 3</li>
      <li>element 4</li>
  </ul>
</div>
</ul>

и с помощью медиа-запроса вы можете скрыть или показать что-либо на основе ширины экрана, например: 

@media only screen and (max-width: 400px) {
  .disabledOnMobile {
    display: none;
  }
}

скрытие всех тегов с классом disabledOnMobile (элементы 3 и 4 показывают их только с"more") 

@media only screen and (min-width: 400px) {
  .activeOnMobile {
    display: none;
  }
}

Здесь мы скрываем activeOnMobile, когда экран больше, чем 400px, показывая только элемент 3 и 4, который находится за пределами activeOnMobile class

, в вашем случае выНужно добавить наведите курсор на «more» и установить чужие настройки, это всего лишь пример, вы также можете добавить точку останова в любом размере экрана.Чтобы быть легче, вы можете использовать некоторую библиотеку, такую ​​как начальная загрузка.Вы можете узнать больше о медиа-запросе здесь

...