Меню

Выезжающее меню с помощью CSS и jQuery

Выезжающее меню с помощью CSS и jQuery

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

Плавная навигация «Go To» на одностраничном сайте

Плавная навигация "Go To" на одностраничном сайте

Здравствуйте друзья! В этой статье предлагаю вашему вниманию очередной интересный и простой пример создания плавной навигации на странице сайта в стиле «Go To». Это не первая подобная статья, и если вам интересует данная тематика, вы можете ознакомиться с другими схожими статьями тут и тут. Работает данный пример так: Для начала необходимо создать блок, в котором будет страница. Делаем это так: Как ... Читать далее »

Плавная навигация (прокрутка) страницы до якоря

Плавная навигация (прокрутка) страницы до якоря

В этом примере я хочу показать вам как создать плавную навигацию (прокрутку) страницы до якоря для вашего сайта. При нажатии на любой из пунктов меню происходит плавный переход без перезагрузки и обновления страницы к заданному блоку или элементу. Такой скролл называют еще «go to». Данный пример вы легко можете применить при создании своего сайта или для улучшения уже существующего проекта. Для ... Читать далее »

Анимация display:none

Анимации для иконок меню

Интересный пример создания блоков, каждый из которых исчезает после нажатия по нему. Использование данного примера ограничивается только фантазией, но мне кажется что с помощью таких исчезающих блоков можно сделать простенькую рекламу при входе на сайт. Для создания данного примера использовался CSS и немного скрипта, для работы которого необходимо подключить библиотеку jQuery. Если есть вопросы, задавайте их в комментариях. HTML CSS JS Читать далее »

Крутые идеи для выпадающего меню

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

Горизонтальное выпадающее меню

Горизонтальное выпадающее меню

Отличное горизонтальное выпадающее меню. Конечно, возможно кто-то предпочитает создавать горизонтальное меню без использования JS, а на чистом CSS. Но я надеюсь, что данный способ реализации меню не оставит вас равнодушными. HTML CSS JavaScript Читать далее »

Горизонтальное выпадающее меню

Горизонтальное выпадающее меню

Отзывчивое горизонтальное выпадающее меню как на Microsoft.com. Это большое горизонтальное выпадающее меню показывает подменю, которое открывается после щелчка по элементу меню. Вдохновение пришло от меню на Microsoft.com. Некоторые примеры отзывчивых запросов показывают как настроить меню для небольших экранов. HTML CSS JavaScript Источник урока: http://tympanus.net/codrops/2013/03/05/horizontal-drop-down-menu Перевел для сайта wordpress-club.com: Александр Овчаренко Читать далее »

Выкатывающееся закругленное меню

Выкатывающееся закругленное меню

В этом уроке мы будем использовать невероятно удивительные вращения и масштабирования JQuery на основе патча от Захари Джонсона. Мы создадим меню с небольшими значками, которые будут чередоваться при наведении. Кроме того, мы сделаем пункты меню с ссылками и окном поиска. Итак, давайте начнем, это проще, чем кажется. Разметка Для этого меню мы не будем создавать список, но создадим div элементы для каждого ... Читать далее »

Классня навигация пузырьками

Навигация пузырьками

В данном уроке мы создадим пузырьковую навигацию с помощью jQuery. Идея заключается в том, чтобы сделать несколько круглых иконок, на которых при наведении курсора мыши «раскрывается» круглое подменю с дополнительными пунктами. Мы будем использовать плагин jQuery Easing для получения замечательного эффекта сглаживания. Разметка Код HTML состоит из основного элемента div с классом navigation и id nav. В основном элементе div ... Читать далее »