Меню в стиле Flat

В продолжение верстки выкладываю также меню в стиле Flat. Собственно, простенькое меню, в пункты меню можно вложить выпадающее меню и количество чего-либо. В меню используются иконки от сайта icomoon.io. Демо меню вы можете просмотреть здесь.

UPD (24.07.2013): Совершенно случайно увидел, что забыл добавить код, необходимый для работы выпадающего меню. Теперь добавил.

Установка меню

1. Вставляем CSS в свою таблицу стилей:

Код

/*
* Меню в стиле Flat
* Автор: Kelin
* Сайт: Web41k.ru
* Рай для WEB-мастера
  */
@import url(http://web41k.ru/Scripts_files/verstka/menu1/icons.css) all;
  .ulMenu {background:#fff;border-radius:3px;box-shadow:0 1px 2px #ddd;list-style:none;overflow:hidden;padding:0;}
  .liMenu {font:Bold 16px Helvetica,sans-serif;border-bottom:1px solid #ddd;margin:-1px 0;}
  .liMenu > a {color:#333;text-decoration:none;display:block;padding:18px;}
  .liMenu > a > span[class*=icon-] {margin:0 15px 0 0;}
  .liMenu .num {float:right;font-size:11px;color:#fff;background:#2eb398;margin-top:1px;border-radius:50px;padding:2px 10px;}
  .liMenu:hover {background:#e76049;}
  .liMenu:hover > a, .liMenu.withSub.active > a {color:#fff;}
  .liMenu:hover > a > .num, .liMenu.withSub.active .num {background:#c84029;}
  .liMenu.active {background:#de4f37}
  .ulSubMenu {list-style:none;background:#e76049;padding:0;border-top:1px solid #ec806d;display:none;}
  .liSubMenu {color:#fff;font:Bold 12px Helvetica,sans-serif;}
  .liSubMenu > a {color:#fcd9d4;text-decoration:none;display:block;padding:10px 10px 10px 25px;}
  .liSubMenu:hover > a {color:#fff;}
  .liSubMenu > a > span[class*=icon-] {font-size:16px;vertical-align:-2px;margin:0 10px 0 5px;}

2. Непосредственно само меню вставляем в нужное место:

Код

<ul class="ulMenu">
 <li class="liMenu"><a href="#">Главная страница</a></li>
 <li class="liMenu"><a href="#">17Каталог статей</a></li>
 <li class="liMenu withSub active"><a href="#">6Меню в стиле Flat</a>
 <ul class="ulSubMenu" style="display: block;">
 <li class="liSubMenu"><a href="#">by Kelin</a></li>
 <li class="liSubMenu"><a href="#">Web41k.ru</a></li>
 <li class="liSubMenu"><a href="#">Рай для WEB-мастера</a></li>
 </ul>
 </li>
 <li class="liMenu"><a href="http://web41k.ru">Вернуться на сайт</a></li>
 </ul> <script type="text/javascript">$('.liMenu.withSub').click(function(){$(this).toggleClass('active').find('.ulSubMenu').slideToggle(500);}); </script>

3.Настраиваем на свое усмотрение.
Готово. Всем добра wink

Мне нравится 62

Просмотры: 6106 · Комментарии: 4 · Добавил: Kelin · Категория: Рецепты HTML и CSS

Порядок вывода комментариев:

20.12.2013 в 18:59

Initro

Мучился мучился и не смог решить проблему
как сделать чтоб раздел не был открытым?чтоб открывалось после нажатия

03.02.2014 в 20:38

Goodmind

Стереть класс active, не?

11.09.2013 в 14:04

Apocalypse

У вас есть существенный недочёт - вы не подключили css стили, отвечающие за прорисовку иконок. Скорее всего просто забыли это сделать. Достаточно в начале предложенного вами css вставить:

@import url(http://web41k.ru/Scripts_files/verstka/menu1/icons.css) all;

И иконки появятся smile

20.10.2013 в 14:21

Kelin

Спасибо, исправил