У вас включен AdBlock или иной блокировщик рекламы.

Пожалуйста, отключите его, доход от рекламы помогает развитию сайта и появлению новых статей.

Спасибо за понимание.

В другой раз
DevGang блог о програмировании
Авторизоваться

Используете меню-гамбургер? Попробуйте ссылки-сосиски!

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

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

Гамбургер Меню

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

Плюсы

  1. Минимизирует количество визуального пространства, которое требуется меню
  2. Довольно обычное явление сейчас, когда значительная часть пользователей понимает его функциональность.
  3. Облегчает жизнь дизайнеров, убирая все лишнее в мобильном представлении 😛

Минусы

  1. Требуется дополнительное тестирование, чтобы убедиться, что меню будет хорошо работать с программами чтения с экрана.
  2. Может быть слишком сложным с наличием дочерних выпадающих элементов, текста справки и т.д.
  3. Добавляет раздувание к проектам, которым может потребоваться дополнительный JavaScript для отображения этих меню (меню CSS только для гамбургеров позволяет избежать этой проблемы)
  4. Добавляет дополнительную точку взаимодействия с пользователем (нажмите, чтобы открыть, затем перейдите к просмотру доступных параметров)

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

Ссылки-сосиски

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

Достаточно болтовни, давайте взглянем на ссылки сосиски в действии:

Вышеупомянутый CodePen добавляет большое количество визуального дизайна, поэтому давайте взглянем на минимум HTML и CSS, необходимый для выполнения этого меню:

<nav class="sausage-links">
    <ul>
        <li><a href="">Homepage</a></li>
        <li><a href="">Categories</a></li>
        <li><a href="">Filter Properties</a></li>
        <li><a href="">Edit Optional Tags</a></li>
        <li><a href="">Research Papers</a></li>
        <li><a href="">Contact Our Team</a></li>
    </ul>
</nav>
/* Sausage Links Nav Container */
.sausage-links {
    position: relative;
}

/* The left and right "faded" pseudo elements */
.sausage-links:before, .sausage-links:after {
    content: '';
    height: calc(100% - 2em);
    pointer-events: none;
    position: absolute;
    top: 1em;
    width: 10px;
    z-index: 2;
}
.sausage-links:before {
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, white 100%);
    right: 0;
}
.sausage-links:after {
    background: linear-gradient(to left, rgba(255,255,255,0) 0%, white 100%);
    left: 0;
}

/* Basic flexbox to prevent items from breaking lines */
.sausage-links ul {
    display: flex;
    flex-wrap: nowrap;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.sausage-links ul li {
    white-space: nowrap;
}

.sausage-links ul li a, .sausage-links ul li a:visited {
    display: inline-block;
}

Довольно просто, а?

Плюсы

  1. Требуется минимальное количество CSS
  2. Screen reader / keyboard-only safe
  3. Не требуется JavaScript
  4. Нет необходимости в скрытых radio  инпутах для переключения родительских контейнеров и т.д.
  5. Пользователи могут видеть первые несколько доступных вариантов без какого-либо взаимодействия

Минусы

  1. Может не выглядеть наиболее привлекательным для определенных проектов (в некоторых случаях уродливая полоса прокрутки)
  2. Лучше подходит для небольших и средних списков меню по сравнению с массивными картами сайта
  3. Без надлежащего затухания / обрезания визуальных сигналов пользователи могут не понимать, что они могут прокручивать

Так, я должен использовать меню гамбургера или ссылки сосиски?

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

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

... кто-нибудь еще действительно голоден?

#CSS #HTML