Адаптивное меню css: Как сделать Адаптивное меню навигации

Leave a Comment / Адаптив / By /

css — Адаптивное меню со скрывающимися иконками

Вопрос задан

Изменён 11 месяцев назад

Просмотрен 45 раз

Необходимо реализовать с использованием одного css адаптивное меню со следующими условиями:
Кнопки фиксированной высоты и одинаковой ширины, текст может быть разной ширины
В случае если в одну из кнопок не входит текст и иконка в одну строку, то иконки должны скрыться на всех кнопках. Демонстрация поведения на гифке:

Проблема состоит именно в одновременном скрытии иконок
Ссылка на код: https://codepen.io/Commissioner-Juve/pen/YzYNgxW

ul{
  margin: 0;
  margin-top: 15px;
  margin-left: 15px;
  padding: 0;
  list-style: none;
  display: flex;
  width: 100%;
}
. ul li {
  box-sizing: border-box;
  overflow: hidden;
  max-height: 36px;
  max-width: 300px;
  width: 100%;
}
.ul li:first-child > .adaptive-button {
  border-radius: 8px 0 0 8px;
}
.ul li:last-child > .adaptive-button {
  border-radius: 0 8px 8px 0;
}
.ul li:not(:last-child) {
  border-right: 1px solid #4cc15a;
}
button {
  font-family: Roboto, sans-serif;
  font-size: 16px;
  box-sizing: border-box;
  background-color: #009b27;
  max-width: 300px;
  width: 100%;
  min-height: 36px;
  border: none;
  color: #ffffff;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  direction: rtl;
}
button svg {
  margin-right: 10px;
}
button p {
  box-sizing: border-box;
  max-height: 36px;
  order: -1;
  margin: 0;
  padding: 10px 0;
}
<ul className="nav-block">
      <li>
        <button className="adaptive-button">
          <svg viewBox="0 0 23 18" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M23 4.
  96898h30.913h28.723C20.104 2.55998 18.302 -0.125015 15.588 0.00398488C14.377 0.0609849 13.309 0.739985 12.729 1.82298L11.482 4.16498L10.234 1.82098C9.656 0.739985 8.588 0.0609849 7.377 0.00498488C4.664 -0.123015 2.897 2.55998 4.278 4.96998h3.094H0V7.09198L2.009 7.09498L1.991 15.878C1.991 17.05 2.927 18 4.082 18L18.804 17.997C19.959 17.997 20.895 17.047 20.895 15.875L20.913 7.09198h33V4.96898ZM14.217 2.64198C14.51 2.09399 15.052 1.74998 15.666 1.72098C17.002 1.65798 17.93 3.09798 17.278 4.33698C16.983 4.89698 16.465 4.93898 15.853 4.97098h22.839L14.217 2.64198ZM5.686 4.33598C5.049 3.12298 5.923 1.71798 7.216 1.71798C7.244 1.71798 7.271 1.71898 7.299 1.71998C7.913 1.74898 8.454 2.09299 8.747 2.63999L10.161 4.96998H7.147C6.535 4.93798 5.981 4.89598 5.686 4.33598ZM18.804 15.874L4.082 15.878L4.1 7.09498L18.822 7.09198L18.804 15.874Z" fill="white"/>
          </svg>
          <p>
            Lorem ipsum dolor.
          </p>
        </button>
      </li>
      <li>
        <button className="adaptive-button">
          <svg viewBox="0 0 23 18" fill="none" xmlns="http://www.
 
 w3.org/2000/svg">
            <path d="M23 4.96898h30.913h28.723C20.104 2.55998 18.302 -0.125015 15.588 0.00398488C14.377 0.0609849 13.309 0.739985 12.729 1.82298L11.482 4.16498L10.234 1.82098C9.656 0.739985 8.588 0.0609849 7.377 0.00498488C4.664 -0.123015 2.897 2.55998 4.278 4.96998h3.094H0V7.09198L2.009 7.09498L1.991 15.878C1.991 17.05 2.927 18 4.082 18L18.804 17.997C19.959 17.997 20.895 17.047 20.895 15.875L20.913 7.09198h33V4.96898ZM14.217 2.64198C14.51 2.09399 15.052 1.74998 15.666 1.72098C17.002 1.65798 17.93 3.09798 17.278 4.33698C16.983 4.89698 16.465 4.93898 15.853 4.97098h22.839L14.217 2.64198ZM5.686 4.33598C5.049 3.12298 5.923 1.71798 7.216 1.71798C7.244 1.71798 7.271 1.71898 7.299 1.71998C7.913 1.74898 8.454 2.09299 8.747 2.63999L10.161 4.96998H7.147C6.535 4.93798 5.981 4.89598 5.686 4.33598ZM18.804 15.874L4.082 15.878L4.1 7.09498L18.822 7.09198L18.804 15.874Z" fill="white"/>
          </svg>
          <p>
            Lorem ipsum.
          </p>
        </button>
      </li>
      <li>
        <button className="adaptive-button">
          <svg viewBox="0 0 23 18" fill="none" xmlns="http://www.
  w3.org/2000/svg">
            <path d="M23 4.96898h30.913h28.723C20.104 2.55998 18.302 -0.125015 15.588 0.00398488C14.377 0.0609849 13.309 0.739985 12.729 1.82298L11.482 4.16498L10.234 1.82098C9.656 0.739985 8.588 0.0609849 7.377 0.00498488C4.664 -0.123015 2.897 2.55998 4.278 4.96998h3.094H0V7.09198L2.009 7.09498L1.991 15.878C1.991 17.05 2.927 18 4.082 18L18.804 17.997C19.959 17.997 20.895 17.047 20.895 15.875L20.913 7.09198h33V4.96898ZM14.217 2.64198C14.51 2.09399 15.052 1.74998 15.666 1.72098C17.002 1.65798 17.93 3.09798 17.278 4.33698C16.983 4.89698 16.465 4.93898 15.853 4.97098h22.839L14.217 2.64198ZM5.686 4.33598C5.049 3.12298 5.923 1.71798 7.216 1.71798C7.244 1.71798 7.271 1.71898 7.299 1.71998C7.913 1.74898 8.454 2.09299 8.747 2.63999L10.161 4.96998H7.147C6.535 4.93798 5.981 4.89598 5.686 4.33598ZM18.804 15.874L4.082 15.878L4.1 7.09498L18.822 7.09198L18.804 15.874Z" fill="white"/>
          </svg>
          <p>
                    Lorem ipsumww.
          </p>
        </button>
      </li>
    </ul>
  • css
  • adaptive-design

1

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Адаптивное меню для Blogger на двух уровнях

Оставить комментарий 15 Просмотров

Это меню представлено с переработкой кода для загрузки файлов на Google Sites . Адаптивный дизайн или дизайн отзывчивый, является методом который используется для создания веб — страниц , которые адаптируются графически в различных разрешениях экрана, в которых они открыты. Учитывая большое развитие мобильных устройств и учитывая, что теперь трафик со смартфонов и планшетов для определенных типов сайтов стал не только очень важным, но даже распространенным, полезно постараться вести блог с внешним видом, который дружелюбен для тех, кто посещает его с мобильного устройства.
Пользователи Blogger могут активировать мобильную версию, чтобы иметь сайт, который можно легко просматривать даже с мобильного телефона. Это, однако, приводит к отказу от того, что касается боковых панелей, которые не отображаются, и к меню, даже если вы выбираете настроенную мобильную версию, не открываются правильно. Давайте посмотрим, как мы можем создать меню, которое будет отображаться как в настольной версии, так и в мобильной версии, с разными режимами навигации.

На предыдущем скриншоте показано меню, открытое обычным настольным браузером . При открытии на смартфоне, меню представлено таким образом

 

 

В планшетах меню будет выглядеть немного иначе

 

 

После сохранения шаблона перейдите в Тема> Редактировать HTML , найдите тег </head> и сразу же вставьте следующий код.

 

<!— Адаптивное меню Пуск—><link href=’https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css’ rel=’stylesheet’/><!— File CSS per personalizzare aspetto menu —>  <link href=’https://sites.google.com/site/progetto3322/archivio/hybridmenu.css‘ rel=’stylesheet’/><!—[if lt IE 9]><script src=»https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js»/>

<script src=»<script src=»https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js»/>
<![endif]—><![endif]—><!— Адаптивноеменю конец  —>

 

где выделенная серым цветом часть используется исключительно для устройств, которые используют Internet Explorer 9/10/11 . Если вас не интересуют посетители, у которых еще есть этот браузер, мы можем обойтись без их вставки. Файл javascript, выделенный зеленым цветом был загружен на Google Drive, и было бы целесообразно изменить его, а затем снова загрузить на тот же хостинг. Изменения в основном касаются чтобы сделать их более гармоничными с кодами вашего сайта.

Далее мы ищем строку в шаблоне блога, которая является следующей

<body expr:class=’&quot;loading&quot; + data:blog.mobileClass’>

В некоторых старых шаблонах все еще может быть только тег <body>. Затем мы ищем закрывающий тег, который в обоих случаях является </body> . Сразу после и над этими двумя строками вставляются еще две, чтобы весь видимый код блога был в div с классом- wrapper.

 

<body expr:class=’&quot;loading&quot; + data:blog.mobileClass’><div id=’wrapper’>… Codice della parte visibile del blog …</div></body>

 

Этот шаг необходим для горизонтального перемещения содержимого страницы при открытии меню в режиме мобильного устройства . Теперь нам нужно вставить фактическое меню между строкой <body expr:class=’&quot;loading&quot; + data:blog.mobileClass’> и строкой

<div id=’wrapper’> только что вставленой. Вот пример кода меню

 

<!— Адаптивное меню Пуск —><nav id=’mobile-menu’/><nav id=’hybridmenu’><ul class=’main-menu’><li class=’mobile-menu-item’><i class=’fa fa-bars’/></li><li class=’logo’>  <a href=‘URL_LINK’ title=’Titolo Logo’>    <img alt=’nome-logo’ src=’https://lh6.googleusercontent.com/UXipNDtbkCc78c1U7T-YXoj6LNTzKqeg4lZshsuV30JL=w105-h96-no’/>  </a></li>                 <li class=’parent‘>  <a href=’#’><i class=’fa fa-html5’/><span>Menu Elemento 1</span></a>  <ul class=’sub-menu’>    <li><a href=’#’>Sottomenu Elemento 1</a></li>    <li><a href=’#’>Sottomenu Elemento 2</a></li>    <li><a href=’#’>Sottomenu Elemento 3</a></li>    <li><a href=’#’>Sottomenu Elemento 4</a></li>  </ul></li><li class=’parent‘>  <a href=’#’><i class=’fa fa-css3’/><span>Menu Elemento 2</span></a>  <ul class=’sub-menu’>    <li><a href=’#’>Sottomenu Elemento 1</a></li>    <li><a href=’#’>Sottomenu Elemento 2</a></li>    <li><a href=’#’>Sottomenu Elemento 3</a></li>  </ul></li><li class=’parent‘>  <a href=’#’><i class=’fa fa-gear’/><span>Menu Elemento 3</span></a></li>        <li class=‘menu-right parent’>  <a href=’#’><i class=’fa fa-phone’/><span>Menu Elemento 5</span></a>  <ul class=’sub-menu’>    <li><a href=’#’>Sottomenu Elemento 1</a></li>    <li><a href=’#’>Sottomenu Elemento 2</a></li>    <li><a href=’#’>Sottomenu Elemento 3</a></li>  </ul></li><li class=‘menu-right parent’>  <a href=’#’><i class=’fa fa-comment’/><span>Menu Elemento 4</span></a>  <ul class=’sub-menu’>    <li><a href=’#’>Sottomenu Elemento 1</a></li>    <li><a href=’#’>Sottomenu Elemento 2</a></li>  </ul></li>               </ul></nav><!— Адаптивноеменю конец  —>

 

Мы еще не закончили. Теперь мы должны вернуться к строке </body> и вставить этот последний код поверх него.

 

<!— Пуск в меню адаптивных скриптов —><script src=’https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js’/><script src=’https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js’/><script src=’https://sites.google.com/site/progetto3322/archivio/hybridmenu.js’>  </script><!— Адаптивный скрипт Menu —>

 

Наконец сохраняем шаблон. Возможно, нам нужно обобщить положение трех блоков кода

<!— Адаптивноеменю начало  —>
… Код первого блока …
<!— Адаптивноеменю завершение —>
</head>
<body expr:class=’&quot;loading&quot; + data:blog.mobileClass’>
<!— Адаптивноеменю запуск  —>
… Код второго блока …
<!— Адаптивноеменю конец  —>
<div id=’wrapper’>
…Код шаблон исходного шаблона … 
</div> 
<!— адаптивное меню  скрипта Start —>
… код третьего блока …
<!— адаптивное меню  скрипта End —>

в котором они были окрашены в синий цвет строки и код уже присутствует. Поскольку вставка сценариев выше строки </body> является обычной практикой, после установки этого меню, было бы целесообразно вставить эти новые коды выше строки </div>, выделенной коричневым цветом вместо</body> .

персонализации

Как сказано, для внешнего вида меню, вам нужно отредактировать файл css выделенный зеленым цветом. Другой javascript, выделенный таким же образом, должен быть загружен в учетную запись Google Drive пользователя, чтобы избежать проблем с пропускной способностью. В двух файлах есть комментарии на русском языке для облегчения персонализации. Это меню использует JQuery и JQuery UI .

В меню есть логотип, который можно настроить, заменив его изображением PNG размером около 100×100 пикселей . Любая ссылка может быть связана с этим логотипом, как и на главной странице. Ссылки на различные элементы должны быть вставлены вместо знаков решётка ( # ). Существует два класса меню: родительский, который будет размещать элементы слева, и родительское меню, который будет размещать их справа. Могут быть введены другие основные меню (левое или правое) и другие вторичные меню с единственным требованием для поддержания того же синтаксиса.

 

Предыдущий Как разделить виджеты Blogger с помощью линий или изображений.

Следующий 10 способов привлечь больше трафика на ваш блог

Ознакомьтесь также

Когда вы загружаете из Интернета такие файлы, как изображения, документы и т. Д., Они рассматриваются …

10 фрагментов кода CSS и JavaScript для создания адаптивной навигации

Одна из самых сложных частей хорошего адаптивного сайта — навигация. Это может занять некоторое время, чтобы понять, и есть много руководств, которые помогут с этим. Но я также являюсь поклонником использования фрагментов кода, подобных тем, которые мы собрали для этой статьи.

Все эти адаптивные фрагменты навигации можно бесплатно редактировать и клонировать для своих собственных проектов. Они также имеют различные стили, поэтому здесь найдется что-то, что подойдет для всех типов веб-сайтов.

Дополнительные фрагменты меню и навигации CSS

1. Адаптивный полностраничный макет

от Johnny Mango

Этот адаптивный пример показывает, как далеко вы можете зайти на этапе прототипирования веб-сайта. Вы заметите, что у навигации есть интересная функция, когда вы наводите курсор и автоматически фокусируетесь на ссылках. Этот эффект можно изменить на «живом» веб-сайте с той же навигацией, но в этом примере полезно показать UI/UX страницы.

См. демонстрацию адаптивной навигации с помощью пера с Kube от Johnny Mango

2. Выпадающая панель навигации

от Tania Rascia

Если вам нужны более длинные выпадающие элементы в навигации, это меню может работать лучше. Это сильная альтернатива более простой навигации, в которой есть только несколько пунктов меню. В этом случае вы найдете простой список ссылок с очень маленьким раскрывающимся списком. Ссылки подменю появляются только в событии щелчка, которое обрабатывается jQuery. Вы можете изменить это на использование только CSS, но вы потеряете триггер щелчка.

Тем не менее, при таком чистом дизайне я удивлен тем, насколько универсально этот фрагмент предлагает разработчикам.

См. выпадающую панель навигации, реагирующую на перо, автор Tania Rascia

3. Одностраничный макет

, автор Jan Czizikow

Одностраничные навигационные меню нуждаются в любви, как и любые другие. Это прекрасный пример одностраничной навигации в действии. Ссылки прокручиваются вниз с плавной анимацией, но не заставляют вас долго ждать.

Не говоря уже о том, что они автоматически изменяют размер до идеального размера независимо от размера вашего браузера. Я бы в основном рекомендовал этот тип навигации для страницы продаж или простого сайта-портфолио. Он чистый и имеет отличные функции анимации наряду с адаптивными методами.

See the Pen Полностью адаптивная навигация с анимацией CSS и jQuery от Jan Czizikow

4. Красное выпадающее меню

от Stéphanie Walter

Разработчик Стефани Уолтер создала несколько интересных проектов для Интернета. Этот фрагмент — всего лишь один пример с ярко-красной отзывчивой навигацией.

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

См. многоуровневую адаптивную навигацию Pen от Stéphanie Walter

5. Дизайн на чистом CSS

от Ahmad Hjazy

Вот уникальный дизайн с использованием чистого CSS для навигации. Это вертикальное меню с навигационными ссылками, имитирующими периодическую таблицу элементов.

Эффекты наведения немного запаздывают, но несомненно интересны. Не говоря уже о том, что адаптивный стиль удивительно удобен. Возможно, наиболее впечатляющей частью является то, что весь этот пример использует исключительно CSS 9.0008 .

См. Адаптивное меню навигации Pen CSS от Ahmad Hjazy

6. Адаптивный липкий заголовок

от Marc Libunao

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

Когда вы измените размер браузера, вы заметите, что в этом примере используется значок гамбургера с забавной анимацией. Это хорошо, учитывая стиль, но это может быть не для всех.

См. перо Адаптивная липкая навигация по заголовку от MarcLibunao

7. Отзывчивая и удобная для сенсорного ввода

от Dragoeco

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

Каждая ссылка ведет на новую страницу, но вы можете легко наводить курсор на раскрывающееся меню на любом сенсорном устройстве. Эта функция часто отсутствует в навигационных меню, и это одна из причин, по которой выпадающие списки могут быть сложными в разработке.

См. выпадающую навигацию с помощью пера: отзывчивая и удобная для сенсорного управления от Dragoeco

8. Простые навигационные ссылки

от AnabolicHippo

Когда я думаю о простых навигационных меню, я думаю о таком дизайне. Каждая ссылка отображается как отдельный элемент блока даже на небольших экранах. Здесь нет гамбургер-меню и функции скрытого анимированного меню. Вместо этого ссылки изменяются в размере и разбиваются на отдельные строки.

Самая сложная часть — обработка раскрывающегося списка на мобильных устройствах. У многих ссылок есть подменю, и они будут работать одинаково на небольших экранах.

Я бы сказал, что это лучше всего работает для сайтов с небольшим количеством подменю или без них, но стоит попробовать на мобильных устройствах, чтобы узнать, что вы думаете об этом опыте.

См. адаптивное меню навигации с помощью пера от AnabolicHippo

9. Меню занавеса Playstation

от Луи Шене

Разработчик Луи Шене создал одну из моих любимых адаптивных навигаций на основе веб-сайта PlayStation. Луис называет это «занавесом меню», когда оно скользит в поле зрения, занимая всю страницу. Это характерно для мобильных интерфейсов и быстро стало популярным и среди веб-дизайнеров.

Что мне действительно нравится, так это стиль анимации. Он гладкий и достаточно быстрый, чтобы отображать ссылки, не заставляя пользователей скучать. И самое главное, это похоже на то, что это может работать на рабочем веб-сайте.

См. принцип адаптивной навигации №3 — меню «Занавес» Луи Шене

10. Адаптивное мега-меню

Самир Элли

Вы можете поискать в Интернете и найти сотни примеров мега-меню навигации. Обычно они появляются в крупных блогах и на новостных сайтах, но также популярны в магазинах электронной коммерции или на сайтах крупных агентств. Самая сложная часть мегаменю — сделать его полностью адаптивным. Благодаря этому небольшому фрагменту вы можете легко изменить дизайн мегаменю, чтобы он подходил для любого экрана.

На мобильных устройствах используется скользящая навигация для отображения всех внутренних ссылок в одном меню. Это может показаться немного раздражающим, но вы также можете использовать jQuery, чтобы скрыть подссылки, если это имеет смысл. Это по-прежнему одно из лучших адаптивных решений, которое я видел для запуска мегаменю на рабочем столе, не отталкивая мобильных пользователей.

См. Pen Responsive Mega Menu – Navigation by samir alley

Эта страница может содержать партнерские ссылки. Без каких-либо дополнительных затрат для вас мы можем получать комиссию с любой покупки по ссылкам на нашем сайте. Вы можете ознакомиться с нашей Политикой раскрытия информации в любое время.

Адаптивные шаблоны навигации — прогрессивные веб-приложения (PWA)

Нужна помощь в разработке навигации вашего приложения? Эти шаблоны — отличное место для начала. Ниже представлены несколько способов управления навигацией на больших и малых экранах. Верхнее и левое навигационные меню распространены на больших экранах, но часто не являются оптимальным способом представления информации на маленьких экранах из-за меньшего размера экрана. Поэтому необходимо учитывать представление контента и удобство навигации для всех размеров экрана.

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

Вы можете ранжировать приоритеты элементов, чтобы наиболее важные элементы всегда отображались в верхней части навигации.

Профи

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

Минусы

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

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

На самом маленьком экране несколько элементов остаются внизу экрана, а остальные элементы скрыты. Пользователь может открыть меню и выбрать остальные элементы навигации. Вы можете выбрать элементы, которые остаются внизу.

Pros

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

Минусы

  • еще один шаг необходим для доступа к скрытым элементам навигации
  • Элементы навигации могут быть менее доступны для обнаружения , поскольку некоторые элементы скрыты
  • меньше места для контента при наименьшем размере экрана

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

Pros

  • потенциально отображает больше элементов навигации в левой навигации по сравнению с верхней панелью навигации
  • большинство элементов всегда видны кроме самого маленького размера экрана
  • одна кнопка в заголовке увеличивает пространство для контента на маленьком экране

Минусы

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

Обнаружили проблему с содержанием этой страницы?

  • Отредактируйте страницу на GitHub.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *