В предыдущей статье “Создаем вертикальное меню на CSS” был освещен вопрос построения вертикального меню с подменю.

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

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

Код, написанный на SASS (SCSS) короче и логически читается проще, чем CSS. Поэтому, рекомендую изучить этот вопрос в статьях “SASS (SCSS) в картинках - Часть 1”, “SASS (SCSS) в картинках - Часть 2”.

Мы же приступим к созданию горизонтального меню с подменю “на коленках”. Почему говорю так? Дело в том, что существует масса готовых примеров и кода, а также генераторов различных меню. Но они неинтересны - нам нужно разобраться в принципе построения и возможности самому написать такую навигацию. Как обычно, начинаем с каркаса меню, выполненного на HTML:

 class="hormenu">
 

   class="arrow" href="#">Link_1
    class="sub-hormenu">
   

     href="#">Link_1-1
   
   

     href="#">Link_1-2
   
   

     href="#">Link_1-3
   
   

     href="#">Link_1-4
   
  
 
 

   href="#">Link_2
 
 

   class="arrow" href="#">Link_3
    class="sub-hormenu">
   

     href="#">Link_3-1
   
   

     href="#">Link_3-2
   
   

     href="#">Link_3-3
   
  
 
 

   href="#">Link_4
 
 

   class="arrow" href="#">Link_5
    class="sub-hormenu">
   

     href="#">Link_5-1
   
   

     href="#">Link_5-2
   
   

     href="#">Link_5-3
   
   

     href="#">Link_5-4
   
   

     href="#">Link_5-5
   
  
 

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

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

Приступим к оформлению нашего меню с помощью CSS. Сразу оговорюсь, что примеры кода, представленного здесь, написаны на SASS (SCSS). Начнем с того, что расположим навигацию горизонтально:

.hormenu{
 margin: 50px 0 0 50px;
 overflow: hidden;
 li{
  float: left;
  margin-left: 1px;
  &:first-child{
   margin-left: 0;
  }

Думаю, ничего загадочного в этой части кода нет. Делаем отступ для меню и располагаем элементы li внутри него горизонтально с помощью свойства float: left. Предотвращаем схлопывание (collapse) блока-родителя ul, прописав для него overflow: hidden.

Чтобы пункты меню были легко различимы, сделаем промежуток между ними с помощью левого margin в 1px. И для аккуратности уберем левый margin у первого элемента li.

Далее оформляем ссылки внутри пунктов li. Делаем ссылки блочными, чтобы кликабельной была вся область пункта навигации и задаем для нее высоту. Также указываем интерлиньяж, чтобы выровнять текст по вертикали и text-align для выравнивания по горизонтали. Цвет фона и цвет текста - как обычно.

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

Возможна ситуация, когда пункт подменю по ширине будет больше, чем пункт основного меню, и тогда ребенок “растянет” своего родителя.

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

a{
 display: block;
 line-height: 25px;
 height: 25px;
 width: 130px;
 text-align: center;
 background-color: #ccc;
 color: #ccc - #555;
 position: relative;
}

Продолжим стилизацию нашей навигации и займемся подменю, а точнее - его подпунктами li. Уберем у этих элементов плавание влево float и левый margin, чтобы они не наследовали эти свойства. Убираем плавание, чтобы элементы li расположились вертикально, а левый margin - убрать “лесенку”:

li{
 float: none;
 margin: 0 0 1px 0;

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

a{
 background-color: #ccc + #111;
 color: #ccc - #333;
 &:hover{
  background-color: #ccc + #222;
 }
}

Теперь самое главное - сделаем подпункты меню выпадающими. Для этого сначала спрячем его, убрав из DOM-модели HTML-документа с помощью значения свойства dislay: none:

.sub-hormenu{
 display: none;

… а затем будем показывать его только при наведении курсора мыши на пункт меню. Код здесь может показаться немного непонятным, но знак амперсанда означает тоже, что и класс hormenu:

&:hover .sub-hormenu{
 display: block;
}

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

Как раз здесь нам и понадобиться относительное позиционирование для ссылок, о котором говорилось ранее. Создание стрелки “поручим” отдельному классу arrow, который будем “вешать” только на нужные нам ссылки:

.arrow:after{
 content: '';
 position: absolute;
 top: 50%;
 left: 80%;
 width: 0;
 height: 0;
 border-top: 4px solid #ccc - 666;
 border-left: 4px solid transparent;
 border-right: 4px solid transparent;
 margin-top: -2px;
}

Вот, в принципе, и все. Основная задача выполнена и горизонтальное меню с выпадающим подменю у нас работает. Конечно, можно озадачиться целью “окрасить” активный пункт основного меню в тот же цвет, что и у подменю. Но эта проблема не входит в рассмотрение поставленной нами задачи. Ниже представлен полный код правил CSS (SCSS) для нашего меню:

@import "compass/reset";
 a{
  text-decoration: none;
 }
 .arrow:after{
  content: '';
  position: absolute;
  top: 50%;
  left: 80%;
  width: 0;
  height: 0;
  border-top: 4px solid #ccc - 666;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  margin-top: -2px;
 }
 .hormenu{
  margin: 50px 0 0 50px;
  overflow: hidden;
  li{
   float: left;
   margin-left: 1px;
   &:first-child{
    margin-left: 0;
   }
   &:hover .sub-hormenu{
    display: block;
   }
   .sub-hormenu{
    display: none;
    li{
     float: none;
     margin: 0 0 1px 0;
     a{
      background-color: #ccc + #111;
      color: #ccc - #333;
      &:hover{
       background-color: #ccc + #222;
      }
      &:after{
       content: none;
      }
     }
    }
   }
   a{
    display: block;
    line-height: 25px;
    height: 25px;
    width: 130px;
    text-align: center;
    background-color: #ccc;
    color: #ccc - #555;
    position: relative;
   }
  }
 }

… и то, как оно выглядит:

На этом все.