Главная » Записи по метке: меню

Выдвигающееся боковое меню на чистом CSS

Боковые меню, выдвигающиеся по клику, в последнее время широко используются разработчиками сайтов. Самое известное, на данный момент, это конечно же меню навигации, упакованное под кнопки в стиле "гамбургер". Наверняка каждый из вас хотя бы раз встречал в интернетах сайт, на котором сбоку, справа или слева, красуется кнопа такого вида:  ☰ , при клике на которую и появляется(выдвигается) панелька с вертикальным меню. Существует масса готовых ...

5 Вариантов одного меню аккордеон

Однажды я выложил развернутый урок по созданию компактного меню в стиле аккордеон, раскрывающееся по клику, со встроенным счётчиком подпунктов. Меню получилось довольно симпатичным и функциональным. Внешний вид сформирован исключительно на CSS3, градиентная заливка, внешняя тень блока и т.д. Работа меню построена на библиотеке jQuery, исполняющий плагин получился очень лёгким и простым в настройках, так что меню привлекло внимание пользователей. ...

jQuery & CSS3 меню аккордеон с помощью CSS Menu Maker

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

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

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

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

Кроссбраузерный «аккордеон» с помощью CSS3

Кроссбраузерный «аккордеон» с помощью CSS3 В последнее время, в силу того, что практически все современные и популярные браузеры (Opera, Firefox, Safari, Chrome, Flock и даже вечный тормоз - IE), активно подключаются к поддержке новых свойств CSS3, стало возможным в плотную заняться разработкой, более-менее кроссбраузерного, компактного "аккордеона", раскрывающегося при наведении. Конечно, способов создания таких "гармошек", в интернетах можно найти на любой вкус и цвет, все они разные и ...

Создаем многоуровневое горизонтальное меню с эффектом анимации на CSS3

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

Создаем выпадающее меню навигации на CSS3

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

Меню навигации в стиле «Аккордеон» (CSS3 + jQuery)

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

10 Уроков по созданию отличных меню навигации для ваших сайтов

10 Уроков по созданию отличных меню навигации для ваших сайтов В своей работе, немало времени уделял разработке различных видов меню навигации для сайтов, как с применением jQuery, так и используя чистый стиль CSS3 без дополнительных изображений и подключаемых javascript. Решил все наработки по теме собрать воедино и выложить в качестве своеобразной подборки уроков по созданию меню навигации. В обзоре представлены разные типы меню, по стилю исполнения и функционалу, многоуровневые с выпадающими подменю, ...

Чистый стиль меню с помощью CSS3

Чистый стиль меню с помощью CSS3 Всем снова здравствуйте! В своих статьях, я не раз обращался к различным способам создания навигационных меню для сайтов. Рассматривались менюшки на любой вкус и цвет, навигация в популярном стиле "аккордеон", горизонтальные и вертикальные, с использованием javascript и картинок, не мало внимания уделялось многоуровневым меню на jQuery. Как вы понимаете способы создания меню ограничены лишь фантазией разработчиков, а она у них воистину ...

Меню «аккордеон» на основе jQuery и CSS

Меню «аккордеон» на основе jQuery и CSS

Всем, снова здравствуйте.
Давно не обращался к разработке меню для сайтов, а технологии не стоят на месте, да и наш пытливый ум не дает покоя. В комментариях к записи о способе создания Меню «Аккордеон» без javascript и изображений меня спрашивали, как сделать такое меню с открытием ссылок не при наведении, а при нажатии на пункт меню. Сегодня именно о таком способе построения навигации и пойдет речь, мы рассмотрим технику создания меню в стиле "аккордеон" на основе CSS и совсем немного jQuery.

Вертикальное меню навигации CSS с подменю

В недавнем прошлом я подробно расписывал способ и технику создания "Вертикального меню для сайта". Мы рассмотрели решение выполнения простой навигации, построенной полностью на использовании CSS и небольшого файла изображения. В своих комментариях читатели высказались о том, что вариант с вложенными подпунктами не был бы лишним, ну что же, как говориться: сказано - сделано. Сегодня опишу, какие изменения необходимо внести в css и разметку html, ...
1 2