Цели

1. получить базовые навыки работы с Flexbox свойствами;
2. разработать горизонтальное адаптивное меню;
3. полученное решение применить в проекте.

Инструменты и документация

1. NPM – в качестве менеджера пакетов (теперь активно переезжаем на Yarn)
2. Grunt – инструмент, который поможет в сборке проекта
3. Документация по Flexbox (см. Полезные ссылки);
4. SASS

Структура

• layout– описывает положение компонентов и элементов на странице;
• component– описывает отображение и поведение элементов, которые входят в компонент;
• element– описывает отображение и поведение единичного элемента;

• Base — описание констант, базовых стилей (как в normalize.css)
• Component — описание компонентов приложения. В нашем случае компонент «Menu»
• Element — описание стилей для элементов таких как кнопка, ссылка и т.п.
• Layout — описание расположения блоков на странице
• style.scss — в этом файле мы соберем все вместе

CSS и HTML теги input & label

<label for="input-0" class="label">Текст 1</label>
<input type="radio" name="input-trigger" id="input-0" class="input" />
<label for="input-1" class="label">Текст 1</label>
<input type="radio" name="input-trigger" id="input-1" class="input" />

.input:checked {
    border-color: red;
}

.input:checked + .label {
    color: red;
}

<input type="radio" name="menu-item-trigger" id="menu-close" class="input input-hidden">
    <nav class="menu">
        <input type="radio" name="menu-item-trigger" id="menu-item-0" class="input input-hidden" />
        <div class="menu-item menu-item-trigger">
            <label for="menu-close" class="menu-item-close"> </label>
            <label for="menu-item-0" class="menu-item-label">
                <i class="fa fa-home"></i>
                <span class="menu-item-label-text">Menu Item 0</span>
            </label>
            <div class="menu-sub">
                <li class="menu-item menu-item-sub">
                    <a href="#" class="menu-item-label">
                        <span class="menu-item-label-text">Sub Item Menu 0</span>
                    </a>
                </li>
                <li class="menu-item menu-item-sub">
                    <a href="#" class="menu-item-label">
                        <span class="menu-item-label-text">Sub Item Menu 1 - With long label</span>
                    </a>
                </li>
                <li class="menu-item menu-item-sub">
                    <a href="#" class="menu-item-label">
                        <span class="menu-item-label-text">Sub Item Menu 2 - Withtooolongwordslikeingerman</span>
                    </a>
                </li>
            </div>
        </div>
   </nav>

1. Каждый элемент name=menu-item-trigger, кроме первого, в состоянии :checked будет изменять видимость и позиции последующих элементов label.menu-item-close и div.menu-sub таким образом, чтобы элемент label.menu-item-close полностью перекрывал элемент label.menu-item-label, а div.menu-sub отображался под элементом label.menu-item-label. То есть мы открываем подменю и меняем поведение при клике на основное меню;
   
   
2. Первый элемент name=menu-item-trigger будет использован только для того, чтобы отменить все примененные изменения в предыдущем пункте, то есть закрыть подменю;

Flexbox

• элементы меню с длинными словами, как «knowledge base» и его немецкий перевод «Wissensdatenbank». В данном случае добавляется оборачивающий элемент для текста, к которому применяются примерно следующие стили:
  
  

  .label-text {
      // @link: http://htmlbook.ru/css/text-overflow
      overflow: hidden;
      text-overflow: ellipsis;
      width: 100%;
      display: inline-block;
  }
  

  
  
• Картинки, которые нужно растянуть по ширине, но при задании width: 100%; они вылезают за пределы родительского блока. Тут поможет box-sizing: border-box; для этого элемента;
  
  
• Так же могут возникнуть проблемы с тем, что дочерние элементы не занимают всю возможную длину или не распределяются равномерно. Тут возможно поможет flex: 1 1 auto.

.menu {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.menu-item {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

Итог

1. Не требуется ожидать загрузки JavaScript. Чаще всего меню находится в шапке сайта, поэтому эти стили можно положить в core.css, который описывает основные стили элементов, видимые пользователю при загрузке страницы;
2. Меню будет работать, даже если в JavaScript произойдет что-то страшное и не будет инициализирован скрипт для меню.

1. Ограниченные возможности CSS селекторов, например нельзя изменить родительский элемент при изменении дочернего;
2. На iOS была замечена потеря производительности. Пришлось разбираться и проставлять will-change свойства;
3. Нет возможности скрыть под меню через N секунд после потери фокуса (особенности реализации);
4. Трудно разобраться в HTML разметке меню;
5. Поддержка Flexbox в IE на уровне «вырви глаз»

Полезные ссылки

• PCSS — описание концепции построения компонентного CSS;
• Guide To Flexbox (EN) — тут хорошо описаны свойства Flexbox;
• Guide To Flexbox (RUS) — тут хорошо описаны свойства Flexbox на русском языке;
• Mr. Froggy — поможет Вам овладеть навыками использования Flexbox
• Demo
• Github Project