Lecaw

Учимся создавать Web-сайты

Создаем плоское выпадающее меню

September 11, 2013
CSS
601hits

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

 

HTML

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

<div id='cssmenu'>
  <ul>
     <li class='active'><a href='index.html'>Home</a></li>
     <li class='has-sub '><a href='#'>Products</a>
        <ul>
           <li class='has-sub '><a href='#'>Product 1</a>
              <ul>
                 <li><a href='#'>Sub Item</a></li>
                 <li><a href='#'>Sub Item</a></li>
              </ul>
           </li>
           <li class='has-sub '><a href='#'>Product 2</a>
              <ul>
                 <li><a href='#'>Sub Item</a></li>
                 <li><a href='#'>Sub Item</a></li>
              </ul>
           </li>
        </ul>
     </li>
     <li><a href='#'>About</a></li>
     <li><a href='#'>Contact</a></li>
  </ul>
</div>

Каждый контейнер div имеет id "cssmenu". Внутри находится список дочерних меню 2го и 3го уровня. Также здесь видно, что у подменю есть класс .has-sub, что позволяет использовать дополнительные настройки CSS стилей. Также здесь есть класс .active, который выдвигает выбранный пункт меню на передний план.

CSS

@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Oxygen+Mono);
#cssmenu {padding: 0; margin: 0; border: 0;}
#cssmenu ul, #cssmenu li {list-style: none; margin: 0; padding: 0;}
#cssmenu ul {position: relative; z-index: 597; }
#cssmenu ul li { float: left; min-height: 1px; vertical-align: middle;}
#cssmenu ul li.hover,
#cssmenu ul li:hover {position: relative; z-index: 599; cursor: default;}
#cssmenu ul ul {visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 100%;}
#cssmenu ul ul li {float: none;}
#cssmenu ul ul ul {top: 0; left: auto; right: -99.5%; }
#cssmenu ul li:hover > ul { visibility: visible;}
#cssmenu ul ul {bottom: 0; left: 0;}
#cssmenu ul ul {margin-top: 0;	}
#cssmenu ul ul li {font-weight: normal;}
#cssmenu a { display: block; line-height: 1em; text-decoration: none; }

В первой строчке установим кодировку UTF-8. Вторая строка - подключаем шрифт Oxygen Mono из бесплатной библиотеки штрифтов Google. Далее представлены шаблоны для горизонтального выпадающего меню. Также в данном коде представлен сброс стилей по умолчанию, позиционирование и несколько других настроек, которые в сочетании создают простое, но довольно функциональное выпадающее меню.

Стиль времени

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

#cssmenu {
  background: #333;
  border-bottom: 4px solid #1b9bff;
  font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
  font-size: 12px; 
}
  #cssmenu > ul { *display: inline-block; }
  #cssmenu:after, #cssmenu ul:after {
    content: '';
    display: block;
    clear: both; 
}

В первую очередь создадим общий фон, добавим рамки и зададим шрифт для пунктов меню. При работе с выплывающим меню используем 3е правило cktfrfix, которое использует всего лишь 1 трюк CSS.

#cssmenu a {
    background: #333;
    color: #CBCBCB;
    padding: 0 20px; 
}
#cssmenu ul { text-transform: uppercase; }
    #cssmenu ul ul {
      border-top: 4px solid #1b9bff;
      text-transform: none;
      min-width: 190px; 
}
      #cssmenu ul ul a {
        background: #1b9bff;
        color: #FFF;
        border: 1px solid #0082e7;
        border-top: 0 none;
        line-height: 150%;
        padding: 16px 20px; 
}
      #cssmenu ul ul ul { border-top: 0 none; }
      #cssmenu ul ul li { position: relative }

Теперь настроим наши меню и подменю. Необходимо удостовериться, что элемент использует paddings/line-height а не li. Таким образом, при наведении мыши будет выплывать дочернее меню, если таковое имеется. Если же Вы не применили padding или li, то при наведении ссылка меняться не будет. Если Вы видите "ul ul", свойства будут применяться ко всем подменю, если же увидите "ul ul ul", они будут применяться только для третьего подменю. Обратите внимание, что последняя линия устанавливает относительное положение пунктов списка для всех наших подменю. Теперь наше меню выглядит следующим образом:

Откорректируем высоту главного меню и добавим эффекты при наведении:

#cssmenu > ul > li > a { line-height: 48px;  }
#cssmenu ul ul li:first-child > a { border-top: 1px solid #0082e7; }
        #cssmenu ul ul li:hover > a { background: #35a6ff; }
        #cssmenu ul ul li:last-child > a {
          border-radius: 0 0 3px 3px;
          box-shadow: 0 1px 0 #1b9bff; 
}
        #cssmenu ul ul li:last-child:hover > a { border-radius: 0 0 0 3px; }
        #cssmenu ul ul li.has-sub > a:after {
          content: '+';
          position: absolute;
          top: 50%;
          right: 15px;
          margin-top: -8px;
}

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

Окончательные настройки

   #cssmenu ul li:hover > a, #cssmenu ul li.active > a {
      background: #1b9bff;
      color: #FFF;
}
    #cssmenu ul li.has-sub > a:after {
      content: '+';
      margin-left: 5px; 
}
    #cssmenu ul li.last ul {
      left: auto;
      right: 0; 
}
      #cssmenu ul li.last ul ul {
        left: auto;
        right: 99.5%;
}

Существуют 4 правила, которыми мы руководствовались. Первое отвечает за создание выпадающего списка меню. Второе - добавление знака "+" для меню верхнего уровня. Третье и четвертое правило - добавление нового класса .last, который может использоваться для обратного отображения подменю.

Если хотите сделать длинное меню со всеми выпадающими подменю вплоть до конца экрана, то Вам необходимо настроить меню таким образом, чтобы оно открывалось не только вправо, но и налево. Итак мы закончили создание плоского выпадающего мню на основе CSS!

 

Дополнительная информация

Роман Воеводин

Воеводин Роман - дизайнер, модератор, соучредитель и член команды Lecaw.

Эл. почта
RATTING:
(2 голосов)

1 Комментарий

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