383 Codepen

Навигация по страницам

Креативный подход к оформлению компонента навигации по страницам. При нажатии на номер страницы, появляется рука снежного человека и передвигает индикатор текущей страницы на новую.

Навигация по страницам
3 089 Menu & Nav

Эффект зачеркивания при наведении в меню

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

Эффект зачеркивания при наведении в меню
2 325 Menu & Nav

Диагональное меню на CSS

Используя возможности CSS3 в этом уроке сделаем диагональное меню, и напишем media queries, чтобы придать ему адаптивности.

Диагональное меню на CSS
1 546 Menu & Nav

Lavalamp меню на CSS3

Скользящий эффект для меню при наведении, который более известен, как lavalamp эффект. Эффект реализован только на CSS с помощью transitions и селектора ~.

Lavalamp меню на CSS3
5 859 Menu & Nav

Адаптивное много-уровневое меню

Сегодня сделаем адаптивное много-уровневое меню. Для мобильной версии добавим несколько строчек jаvascript кода. Для лучшего восприятия пунктов навигации, добавим для каждого иконки, воспользовавшись уже знакомым нам по предыдущим урокам - font-awesome.css

Адаптивное много-уровневое меню
1 443 Menu & Nav

Выезжающие иконки меню при наведении

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

Выезжающие иконки меню при наведении
1 839 Menu & Nav

CSS3 меню с overlay эффектом

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

CSS3 меню с overlay эффектом
2 882 Menu & Nav

Адаптивное многоуровневое меню

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

Адаптивное многоуровневое меню