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

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

1
display
со значениями
1
none
и
1
block
.

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

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

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

<ul class="hormenu">
  <li>
    <a class="arrow" href="#">Link_1</a>
      <ul class="sub-hormenu">
      <li>
        <a href="#">Link_1-1</a>
      </li>
      <li>
        <a href="#">Link_1-2</a>
      </li>
      <li>
        <a href="#">Link_1-3</a>
      </li>
      <li>
        <a href="#">Link_1-4</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Link_2</a>
  </li>
  <li>
    <a class="arrow" href="#">Link_3</a>
      <ul class="sub-hormenu">
      <li>
        <a href="#">Link_3-1</a>
      </li>
      <li>
        <a href="#">Link_3-2</a>
      </li>
      <li>
        <a href="#">Link_3-3</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Link_4</a>
  </li>
  <li>
    <a class="arrow" href="#">Link_5</a>
      <ul class="sub-hormenu">
      <li>
        <a href="#">Link_5-1</a>
      </li>
      <li>
        <a href="#">Link_5-2</a>
      </li>
      <li>
        <a href="#">Link_5-3</a>
      </li>
      <li>
        <a href="#">Link_5-4</a>
      </li>
      <li>
        <a href="#">Link_5-5</a>
      </li>
    </ul>
  </li>
</ul>

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

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

1
arrow
, но о нем мы поговорим позже.

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

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

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

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

Чтобы пункты меню были легко различимы, сделаем промежуток между ними с помощью левого

1
margin
в 1px. И для аккуратности уберем левый
1
margin
у первого элемента
1
li
.

Далее оформляем ссылки внутри пунктов

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

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

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

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

1
a
:

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

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

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

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

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

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

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

1
dislay: none
:

.sub-hormenu{
  display: none;

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

1
hormenu
:

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

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

1
:after
.

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

1
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;
     }
   }
 }

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

Горизонтальное меню на CSS

Горизонтальное меню с выпадающим подменю

На этом все.


MongoDB - создание документа

![MongoDB]({{site.url}}/images/uploads/2017/05/mongodb-logo.jpg "MongoDB")Приступили к самому основному - операциям создания, чтения, изм...… Continue reading

MongoDB - документы

Published on May 23, 2017