Вертикальное меню с помощью CSS3

Have a question? Ask in chat with AI!

Вертикальное менюСегодня на сайте RusDigi еще одна практическая статья из раздела CSS3. Статья представляет из себя свободный перевод англоязычной статьи. В статье мы научимся создавать вертикальное раздвигающееся меню. Такое меню позволит разместить массу ссылок в небольшом пространстве, а приятная анимация при развертывании украсит ваш сайт. Если вы новичок, то у вас все равно должно все получиться, т.к. мануал достаточно подробный и вы сможете узнать для себя что-то новое из CSS. Для подкрепления знаний по CSS3 вы можете обратиться к циклу статей CSS3 для начинающих.

[adsense]
Посмотреть демо

Вертикальное меню

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

Теперь, когда у нас есть идея давайте приступим к ее реализации.

HTML разметка

Первое, что мы сделаем, это применим HTML5 элемент nav. Новый элемент nav представляет из себя красивый семантический контейнер для нашего меню.



Давайте теперь займемся структурой нашего меню. Наше меню не будет просто набором ссылок. Каждая пункт будет представлять из себя ссылку с дополнительным пространством под ней. Все это будет в находиться в блоке div. Внутри каждого div’a нам понадобится основная ссылка (цветная часть) и список дополнительных ссылок (белая чатсь). Для основной ссылки можно использовать тег h4, а для дополнительных ссылок несортированный список ul.



Чтобы создать остальные пункты меню мы просто скопируем, вставим и изменим названия ссылок. У нас будут разделы Портфолио, О нас и Контакты, каждый будет содержать по 3 дополнительных ссылки. Каждая секция имеет один и тот же класс menu-item, что позволит нам задать стили для них всего один раз.



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



Вот мы и закончили с HTML разметкой. Пока мы не прописали CSS стили мы увидим только общую структуру и иерархию.
Вертикальное меню

Если вы не знаете с помощью какой программы просмотреть видео на компьютере то вам непременно надо скачать видеоплеер бесплатно с сайта бесплатного софта softbeta.com

Основные CSS стили

Для того, чтобы начать стилизацию нашего меню, нам необходимо задать общие стили. Для начала мы установим отступы для всех элементов в 0, чтобы каждый блок вплотную прилегал к другому. Далее мы зададим цвет фона для всего документа — оттенок белого, который будет применяться для дополнительных пунктов меню. Далее мы зададим настройки шрифта и добавим небольшую тень с помощью свойства box-shadow к нашему меню. Свойство margin у блока nav используется только для того, чтобы центрировать меню на экране. В реальных условиях использовать это свойство не обязательно.
Вот код, который у нас получился в итоге:

* {
  margin: 0px;
  padding: 0px;
}

body {
  background: #e5e5e7;
}

nav {
  font-family: Helvetica, Arial, sans-serif;
  line-height: 1.5;
  margin: 50px auto; /*только для центрирования меню*/
  width: 200px;
  -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
     -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
          box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}

.menu-item {
  background: #fff;
  width: 200px;
}

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

Стили для заголовка

Теперь настало время стилизовать наши теги h4. Для начала сменим цвет фона и немного отодвинем от левого края. Так же изменим размер и толщину шрифта:

.menu-item h4 {
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  padding: 7px 12px;
  background: #a90329;
}

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

Давайте изменим цвет ссылки с голубого на белый. Мы так же отменим любые подчеркивания с помощью свойства text-decoration. Остался еще один небольшой момент: сейчас у нас ссылкой является только текст. Нам же надо чтобы ссылкой был весь верхний блок. Для этого мы установим свойство display в значение block, а ширину установим в 200px — такую же как и у всего меню.

.menu-item h4 a {
  color: white;
  display: block;
  text-decoration: none;
  width: 200px;
}

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

.menu-item h4 {
  border-bottom: 1px solid rgba(0,0,0,0.3);
  border-top: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  padding: 7px 12px;

  /*Градиент*/
  background: #a90329; /* Старые барузеры */
  background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
  background: linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}

Вертикальное меню

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

.menu-item h4:hover {
  background: #cc002c; /* Old browsers */
  background: -moz-linear-gradient(top,  #cc002c 0%, #6d0019 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cc002c), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* IE10+ */
  background: linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc002c', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}

Вертикальное меню

Стили для параграфа

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

.alpha p {
	font-size: 13px;
	padding: 8px 12px;
	color: #aaa;
}

Верхняя секция теперь выглядит отлично.
Вертикальное меню

Стили для несортированного списка

А вот здесь нам понадобиться немного больше кода. Давайте сначала взглянем на код:

.menu-item ul {
  background: #fff;
  font-size: 13px;
  line-height: 30px;
  list-style-type: none;
  overflow: hidden;
  padding: 0px;
}

.menu-item ul a {
  margin-left: 20px;
  text-decoration: none;
  color: #aaa;
  display: block;
  width: 200px;
}

/*стили для пункта меню*/
.menu-item li {
  border-bottom: 1px solid #eee;
}

.menu-item li:hover {
  background: #eee;
}

Как вы видите из кода приведенного выше, в первом блоке мы задаем стили для всего списка. Здесь мы задаем размеры шрифта, цвет шрифта, отступы и убираем отображение меток рядом с пунктами списка с помощью свойства list-style-type.
Далее мы работаем с ссылками: сдвигаем их немного влево, убираем подчеркивание, задаем цвет и проделываем тот же трюк, что и с заголовком — устанавливаем ширину равную ширине всего списка и свойство display в значение block для того, чтобы ссылкой был весь пункт меню.
Заканчиваем мы заданием стилей для пунктов меню. Нижняя граница позволяет отделить пункты меню друг от друга. При наведении курсора мыши на пункт меню будет меняться его фоновый цвет. А вот и результат нашей работы.
Вертикальное меню

Сворачиваем меню и добавляем анимацию

До этого момента наше меню было полностью развернуто.Теперь же, когда все внутренние элементы мы стилизовали, нам необходимо меню свернуть и разворачивать мы будем отдельные пункты только при наведении на них курсора мыши.
По стандарту браузер установит высоту нашего списка в значение auto. Это говорит о том, что высота будет такой чтобы вместить весь контент в список. Для того чтобы свернуть наш список, нам достаточно установить его высоту в значение 0. Тогда у нас будут видны только основные пункты меню. Заметьте, что верхнюю секцию, где используется параграф вместо списка мы не трогаем.

.menu-item ul {
  background: #fff;
  font-size: 13px;
  line-height: 30px;
  height: 0px; /*Сворачивает меню*/
  list-style-type: none;
  overflow: hidden;
  padding: 0px;
}

Вертикальное меню

Теперь наше меню стало выглядеть гораздо компактнее и не занимает так много места. Теперь так же виден эффект от использования градиента и границ, которые мы применили ранее.
Ну и последнее что осталось сделать это добавить анимацию. Для создания анимации мы будем использовать свойство transition и применять его будем к высоте списка. Таким образом, при наведении курсора мыши на пункт меню высота списка будет плавно увеличиваться до 93px. Не забудьте так же добавить конструкции для определенных браузеров. Вот как будет выглядеть код:

.menu-item ul {
  background: #fff;
  font-size: 13px;
  line-height: 30px;
  height: 0px;
  list-style-type: none;
  overflow: hidden;
  padding: 0px;

  /*Animation*/
  -webkit-transition: height 1s ease;
     -moz-transition: height 1s ease;
       -o-transition: height 1s ease;
      -ms-transition: height 1s ease;
          transition: height 1s ease;
}

Осталось только прописать событие при наведении курсора мыши на список ul. Здесь следует учесть, что событие будет применяться не к списку (ul:hover неправильно), а ко всему элементу menu-item. Это позволит раскрывать меню при наведении на курсора мыши на любую часть нашего пункта меню.

.menu-item:hover ul {
  height: 93px;
}

Данная конструкция означает, что мы должны установить высоту списка в 93px если курсор мыши наведен на элемент menu-item.
Вертикальное меню

На этом собственно и все. Пример как всегда на демо сайте.
Посмотреть демо

Оригинальная статья http://designshack.net/articles/css/verticalaccordionav/


25 комментариев для “0

  1. Спасибо за ваши старания. Сайт по CSS3 один из лучших, по крайней мере на нем действительно полезные уроки. Подписался на сайт, одно плохо, фид прожигает только «огрызок» новости. С другой стороны, полная новость данной тематики на мобильном устройстве и не нужна.
    Могу дать подсказку на полезный урок, которая пригодилась бы самому. Довольно большое количество запросов «дизайн комментариев», «красивые комментарии», «верстка комментариев» и т.п. И ни одного интересного урока. Куча стандартных блоков, которые отличаются только цветом. Думаю, многим были бы интересны комментарии по типу:

      1. ruseller.com/lessons.php?rub=28&id=1371 пример, но слишком примитивный. Когда-то у 9seo стоял интересный вариант, но с ним, к сожалению связаться не могу, редко в сети бывает. Хотя, и описанный вариант не плох

  2. Здравствуйте!
    Спасибо большое за труды! Все получилось
    Только у меня разворачивает все пункты меню разом, без разницы куда наводишь курсор. Не подскажете в чем может быть ошибка??

  3. при значении
    .menu-item:hover ul {height: auto;}
    пропадает эффект анимации.

    Можно это как-то исправить?

  4. Подскажите пожалуйста, а как сделать активный пункт меню выделенным и раскрытым?

    1. думаю придется обратиться к javascript. с его помощью определять активный пункт и задавать какой-нибудь дополнительный класс. уже к этому классу применить нужные стили

        1. сейчас к сожалению совсем нет свободного времени. попробуйте поискать аналоги superfish menu и внедрить те стили которые здесь представлены в это меню

          1. У меня получилось задать дополнительный класс через пхп, но теперь не могу правильно сконструировать ксс.
            Не подскажете куда подставлять доп.класс и как правильно записать в ксс?

          2. сложно вам ответить не видя то, что вы делаете) давайте ссылку в студию и посмотрим. а лучше в аську

  5. Подскажите пожалуйста где в этом меню можно поменять цвет этих сиреневых окон?   И как можно сделать более 3 подсылок в пунктах. Заранее спасибо.

    1. где вы увидели сиреневые окна? Оо подсылки делайте добавляя пункты списка через

      1. Я имел в виду пункты меню где написано Portfolio, about и contact. Подпунктов с у меня пять, а открывается показывает только три подпункта.

        1. увеличьте высоту основного блока или выставьте значение height:auto

          1. Спасибо, помогло. Только если ставить значение height:auto, то подпункты выходят с задержкой и рывком. Можно как то исправить? 

          2. не получиться;) это минус этого способа

      2. Я имел в виду пункты меню где написано Portfolio, about и contact. Подпунктов с у меня пять, а открывается показывает только три подпункта.

  6. Хорошее меню…
    Но некоторые пользователи, представьте себе, пользуются IE9 или IE10, я уж не говорю про более ранние версии этого великого браузера. И этих пользователей тоже нужно уважать.

    1. те кто пользуется IE9 или IE10, и ранними версиями этого великого «браузера» — они себя не уважают!

  7. Все здорово, только у меня одна лажа — между пунктами меню остается расстояние в свернутом состоянии — за счет этого оно очень громоздкое ((
    что не так делаю?

  8. Здравствуйте, превосходное простое меню на чистом html и css — но у меня проблема такая — при внедрении его на сайт — родное меню ( горизонтальное) наследует стили этого, в общем берет его оформление, как решить эту проблему, не подскажете?

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

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