Создание плавающего HTML меню с использованием jQuery и CSS.
На связи Андрей Бернацкий.
С данной статьей мы открываем новый раздел на нашем блоге. Данный раздел будет называться jQuery.
jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML.
Впрочем, без лишних слов начинаем рассматривать нашу первую статью по данной теме.
Перед тем, как мы приступим к практическим шагам, я Вам рекомендую скачать исходный код, чтоб он у Вас был под рукой.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Узнать подробнееТакже результат того, что мы будем делать, Вы можете посмотреть здесь.
Для всех, кто имеет дело с длинными веб-страницами и кому необходимо прокрутить в верх страницы к меню, есть хорошая альтернатива: плавающее меню, которое перемещается при прокрутке страницы. Это делается с помощью HTML, CSS и JQuery, и полностью совместимо с W3C.
Что мы строим
В этой статье описывается, как создать «плавающее меню» с использованием HTML, CSS и JQuery. Подчеркиваю, плавающее меню остается видимым, даже если вы прокрутите вниз веб-страницу. Они анимационные, поэтому движутся вверх и вниз при прокрутке окна браузера, вверх или вниз. Я собираюсь показать вам, как сделать плавающим меню с помощью JQuery и CSS, и мы надеемся, что появятся новые ученики JQuery:D.
Прежде, чем приступить к кодированию, взгляните на два скриншота ниже. Первый показывает веб-страницу с плавающим меню в верхнем правом углу. Конечно, вы не можете сказать, что оно плавающее пока не увидите это на самом деле вживую и не прокрутите страницу. Так что смотрите на втором скриншоте, вы видите, что меню переместилось.
Шаг 1
Давайте начнем с HTML разметки для приятного меню, состоящего из трех суб-меню:
<div> <ul> <li><a href=»#»> Home </a></li> </ul> <ul> <li><a href=»#»> Table of content </a></li> <li><a href=»#»> Exam </a></li> <li><a href=»#»> Wiki </a></li> </ul> <ul> <li><a href=»#»> Technical support </a></li> </ul> </div>
<div> <ul> <li><a href=»#»> Home </a></li> </ul>
<ul> <li><a href=»#»> Table of content </a></li> <li><a href=»#»> Exam </a></li> <li><a href=»#»> Wiki </a></li> </ul>
<ul> <li><a href=»#»> Technical support </a></li> </ul> </div> |
Это основа разметки, которую мы будем использовать. Основную часть в этом небольшом коде выполниет
Похожие статьи:
Комментарии Вконтакте:
Плавающее меню на сайте с помощью css
Думаю, многие видели на современных сайтах верхнее меню, которое при прокрутки мыши прилипает (фиксируется) сверху экрана. Рассмотрим способ реализации данной задачи.
Проще всего сделать такое меню с помощью обычного css.
Рассмотрим на живом примере. Допустим у нас такая структура меню (горизонтальное, сверху экрана).
<div><ul>
<li><a href=»#»>Главная</a></li>
<li><a href=»#»>Joolma</a></li>
<li><a href=»#»>WordPress</a></li>
<li><a href=»#»>PHP</a></li>
</div>
Для того, чтобы оно автоматически прилипало к верху страницы достаточно добавить стиль:
<style>.menuskived {position:fixed;top:0px;left:0px; width:100%;padding:5px 0;}</style>
position:fixed; — позволяет прокручивать меню сверху страницы
top:0px; — указывает, что меню начинается с самого верха страницы.
left:0px; — сдвигает меню в левую часть экрана
Таким не хитрым методом мы можем зафиксировать любое меню сверху экрана.
Полный код примера со стилями:
<style>
.menuskived {position:fixed;top:0px;left:0px;width:100%;padding:5px 0;text-transform: uppercase; text-align: center; line-height: 50px; background: #69c; }
.menuskived ul {padding:0; margin:0;}
.menuskived li{display: inline;}
.menuskived li a {padding: 5px 20px; color: #fff;text-decoration: none;}
</style>
<div><ul>
<li><a href=»#»>Главная</a></li>
<li><a href=»#»>WordPress</a></li>
<li><a href=»#»>PHP</a></li>
</ul>
</div>
Останется только сдвинуть основной контент сайта на величину, равную высоте меню. Так как если после такого меню вывести какой-либо контент, то меню будет закрывать его. Чтобы избежать данной проблемы поставьте отступ сверху на body или div с вашим контентом. Например так: body {margin-top: 100px;}.
На заметку.
Свойство fixed часто используется для создания плавающего фона. Например, когда нужно, чтобы при прокрутки страницы фон оставался на месте, а сайт прокручивался. Для этого вы можете использовать следующий стиль:
<style>
background: url(‘ссылка_на_картинку_фона’) fixed no-repeat;
background-size: cover;
</style>
Читайте также
blogprogram.ru | 2016-11-21 | Плавающее меню на сайте с помощью css | Думаю, многие видели на современных сайтах верхнее меню, которое при прокрутки мыши прилипает (фиксируется) сверху экрана. Рассмотрим способ реализаци | http://blogprogram.ru/wp-content/uploads/2016/09/32131231-131×131.jpg
Плавающее адаптивное вертикальное меню на CSS3 и jQuery
@import «//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css» all;
.menu,.menu-bar {
position: fixed;
top: 0;
left: 0;
height: 100%;
list-style-type: none;
margin: 0;
padding: 0;
background: #f7f7f7;
z-index: 10;
overflow: hidden;
box-shadow: 2px 0 18px rgba(0,0,0,0.26);
}
.menu li a {
display: block;
text-indent: -500em;
height: 5em;
width: 5em;
line-height: 5em;
text-align: center;
color: #72739f;
position: relative;
border-bottom: 1px solid rgba(0,0,0,0.05);
transition: background .1s ease-in-out;
}
.menu li a:before {
font-family: FontAwesome;
speak: none;
text-indent: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 1.4em;
}
.menu li a.search:before {
content: «\f002»;
}
.menu li a.archive:before {
content: «\f187»;
}
.menu li a.pencil:before {
content: «\f040»;
}
.menu li a.contact:before {
content: «\f003»;
}
.menu li a.about:before {
content: «\f007»;
}
.menu li a.home:before {
content: «\f039»;
}
.menu-bar li a:hover,.menu li a:hover,.menu li:first-child a {
background: #267fdd;
color: #fff;
}
.menu-bar {
overflow: hidden;
left: 5em;
z-index: 5;
width: 0;
height: 0;
transition: all .1s ease-in-out;
}
.menu-bar li a {
display: block;
height: 4em;
line-height: 4em;
text-align: center;
color: #72739f;
text-decoration: none;
position: relative;
font-family: verdana;
border-bottom: 1px solid rgba(0,0,0,0.05);
transition: background .1s ease-in-out;
}
.menu-bar li:first-child a {
height: 5em;
background: #267fdd;
color: #fff;
line-height: 5;
}
.para {
color: #033f72;
padding-left: 100px;
font-size: 3em;
margin-bottom: 20px;
}
.open {
width: 10em;
height: 100%;
}
@media all and (max-width: 500px) {
.container {
margin-top: 100px;
}
.menu {
height: 5em;
width: 100%;
}
.menu li {
display: inline-block;
float: left;
}
.menu-bar li a {
width: 100%;
}
.menu-bar {
width: 100%;
left: 0;
height: 0;
}
.open {
width: 100%;
height: auto;
}
.para {
padding-left: 5px;
}
}
@media screen and (max-height: 34em) {
.menu li,.menu-bar {
font-size: 70%;
}
}
@media screen and (max-height: 34em) and (max-width: 500px) {
.menu {
height: 3.5em;
}
}
Как зафиксировать меню с «липкой» навигацией при прокрутке на WordPress
На современных одностраничных сайтах с бесконечно длинной главной страницей, липкий хедер (sticky header) — это та деталь, которая помогает пользователям всегда и везде быстро перейти к нужному разделу сайта.
Для создания липкого хедера вы можете использовать тему, например Upfront, в которой на это вы потратите всего несколько секунд, или прибегнуть к помощи плагина WordPress.
Сегодня в этом посте мы рассмотрим плюсы и минусы липкой панели навигации на вашем сайте и сделаем небольшой обзор плагинов, с помощью которых вы сможет создать sticky header у себя на сайте. Приступим!
Смотрите также:
Плюсы и минусы Липких Хедеров
В последнее время липкие хедеры становятся все более популярными, и это не просто результат того, что они круто влияют на дизайн сайта. Быстрый доступ к навигации по сайту — очень важный нюанс, и его невозможно не учитывать в наше время бесконечной прокрутки.
Тем не менее, мнения по поводу липких заголовков разделяются, есть достойные аргументы за и против их применения.
Давайте начнем с плюсов
- Взаимодействие с пользователем. Здесь все очевидно: мгновенный доступ к основным разделам сайта, быстрая навигацию по сайту, независимо от того, насколько далеко пользователь проскролил вниз. Безумно удобно при использовании на мобильных устройствах.
- Брендинг. Грамотно расположенный логотип в хедере поможет закрепить основную часть брендинга вашего сайта на самом видном месте. Естественно, тут не нужно слишком усердствовать. При правильном подходе вы сможете повысить узнаваемость бренда.
- Лучше показатели аналитики. После улучшения навигации, как правило, сокращается показатель «ненужных просмотров» и увеличивается количество просматриваемых страниц за одно посещение сайта. Конечно, мы не можем ничего гарантировать, но это правило сработало для наших сайтов.
Однако, везде есть и свои минусы
В нашем случае, самым очевидным будет неправильное оформление заголовка. Вы можете просто запутаться в реализации и сделать хедер слишком большим и навязчивым, особенно для мобильных устройств. Здесь нет идеальной формулы, так что экспериментируйте, тестируйте результаты на реальных устройствах и эмуляторах, используйте различные инструменты и плагины, которые могут помочь в данной ситуации.
Липкий хедер должен содержать элементы, которые реально будут необходимы пользователю. Обратите внимание на сайт Medium, там есть строка поиска, регистрация и навигация, которая исчезает, когда пользователь прокручивает страницу вниз, и мгновенно появляется на экране, когда он начинает прокручивать наверх. Это маленький штрих, но с точки зрения общей практичности — он великолепен.
Так же стоит упомянуть о том, что есть риск напортачить в коде. У вас может получиться настоящий Франкенхедер, который будет полностью скрывать содержимое сайта или просто вызывать раздражающие баги. Ниже мы представим плагины, которые помогут вам избежать подобных ситуаций.
Но прежде чем приступить к обзору наших WordPress плагинов, давайте взглянем на несколько примеров.
Примеры сайтов с липкой навигацией
Oasis
Сайт Oasis — это отличный пример фиксированной верхней панели навигации. В любой момент, с любого устройства у вас будет доступ к хедеру сайта.
В десктопной версии сайта для вас доступно полное меню. Переключившись на мобильное устройство, вы увидите самые необходимые опции и меню-гамбургер.
Gareth Emery
На сайте Gareth Emery липкий хедер будет уменьшаться при прокрутке и становится прозрачным.
Переключитесь на мобильную версию и увидите замечательный пример того, как sticky header влияет на брендинг: на сайте будет виден только логотип и меню-гамбургер.
Squid Compression
Сайт Squid Compression — пример того, как можно выгодно использовать липкий боковой хедер.
Теперь, когда мы рассмотрели достоинства и недостатки липких хедеров, посмотрели на несколько реальных примеров, давайте перейдем к обзору инструментов.
Плагины для создания липких хедеров в WordPress
1. Sticky Header
Sticky Header от ThematoSoup — это простой плагин, который предоставляет все необходимые базовые функции.
Большинство настроек вы сможете сделать через Customizer, можно изменять цвет фона, текста и задавать максимальную ширину хедера. Можно установить ширину хедера после скролинга вниз и выбрать определенные параметры для мобильных устройств.
2. Sticky Menu
Название плагина, конечно, очень необычное, но оно точно описывает его возможности.
Плагин позволяет сделать «липким» практически каждый элемент сайта, но помните, что не стоит слишком увлекаться. Для реализации потребуются минимальные знания HTML/CSS, чтобы правильно разместить селектор на нужной странице. Это достаточно тривиальная вещь, так что не следует этого опасаться.
Есть все необходимые базовые параметры, вы сможете сделать нужные настройки для отображения хедера на мобильных устройствах, к тому же есть настройки для указания Z-индекса вашего липкого элемента, чтобы убедиться, что его всегда видно. Также доступен режим отладки.
Изначально плагин myStickymenu был разработан специально для темы Twenty Thirteen, но он должен отлично работать и со всеми другими современными, отзывчивыми темами.
Плагин полностью готов к локализации, отзывчивый, включает в себя простые опции для добавления пользовательского кода CSS.
Авторы плагина создали полезную демо страницу, где вы можете увидеть его в действии, прежде чем загрузите. Это плагин с отличным рейтингом 5 звезд и на данный момент имеет более 10,000 активных загрузок.
4. WordPress Notification Bar
Варианты, которые мы рассматривали до сих пор, прежде всего были направлены на создание навигации в липком хедере, но иногда все, что нужно, это закрепить простое уведомление или кнопку «call to action». Классический случай — когда нам нужно выделить специальные предложения на сайте или напомнить пользователям, подписаться на рассылку новостей.
WordPress Notification Bar от SeedProd отлично подойдет для решения этой задачи. Его несложно установить, идут простые настройки для цветов, есть совместимость с MultiSite-установками.
5. WPFront Notification Bar
WPFront Notification Bar также, как можно предположить из названия, больше ориентирован на уведомления, а не навигацию.
Параметры настроек чуть более продвинутые, чем в предыдущем варианте. Можно задавать высоту, выбирать где конкретно размещать уведомление во время скролинга, настраивать цвета и т.д.
Также можно задавать дату для начала и конца отображения хедера, ограничивать его появление на конкретных постах или страницах.
Разработчики проделали хорошую работу, собрав простые, но интересные идеи с примерами на одной странице. Более подробное руководство также доступно.
6. Hero Menu
Hero Menu — это единственный платный плагин в нашем списке (доступен за $19).
Он позволяет пользователям создавать все виды меню в течение нескольких минут, начиная от многофункциональных мега меню вплоть до самых простых drop-down вариантов.
Плагин Hero Menu полностью совместим с WooCommerce, был тщательно протестирован с различными ведущими премиум темам WordPress, такими как Enfold, Avada и Divi, вместе со всеми последними версиями WordPress, выбирались темы по умолчанию начиная от Twenty Eleven и до Twenty Fifteen. Полная информация о настройке с самыми популярными темами входит в руководство плагина.
Для создания липкого хедера вам понадобится всего один клик. Есть необходимые настройки для цвета, прозрачности и логотипа. Полная документация и поддержка также доступны на сайте разработчика. Если вы ищете инструмент из серии «все-в-одном», то этот плагин именно то, что вам нужно.
Добавление липкой навигации на ваш сайт
Неважно, хотите ли вы просто закрепить определенное сообщение на видном месте или создать удобную навигацию, липкий хедер — это отличное решение, которое будет полезным как для посетителей сайта, так и для его владельца.
В этой статье мы попытались описать самые интересные плагины, но если вы заметили, что мы что-то упустили, обязательно делитесь с нами своими замечаниями и советами в комментариях.
Источник: wpmudev.org
Смотрите также:
Плавающее меню – плагин WordPress
Если вы посмотрите в правый угол экрана, читая мой пост, то увидите плавающее меню — плашку со словами «Загляни сюда!» Это очень приятный и удобный плагин, который привлечет внимание Вашего посетителя к особенно важным, по вашему мнению, моментам на вашем сайте.
Это могут быть какие-либо рубрики, или даже сторонние ссылки, выводящие посетителя на мини сайты с формой подписки или другими предложениями.
У этого плагина, пожалуй, есть только один отрицательный момент. Когда Вы даете ссылку на сторонний ресурс, она, к сожалению, уводит посетителя с Вашего сайта. То есть ссылка открывается в том же окне.
Загружается этот плагин очень просто. Он есть в коллекции WordPress. Значит, можно ввести в строку поиска название Floating Menu и он появляется на первом месте выдачи.
Или можно скачать с официального сайта http://wordpress.org/extend/plugins/floating-menu/.
Активируем и приступаем к настройкам.
Найдете Вы этот плагин в вижетах опции Внешний вид.
А вот теперь обратим внимание на следующий момент. Виджет, как известно, надо установить на определенное место сайт бара. Но так как этот виджет плавающий, то отображаться он будет только на той странице, на которой отображается область сайт бара с этим плагином. Если же вы настроили страницу без показа сайт бара ( как на моем сайте страница – Содержание) , то и плавающее меню на этой странице не будет отображаться.
Теперь проведем некоторую подготовительную работу. Дело в том, что бы создать ссылки в плавающем меню, надо создать произвольное меню на Вашем сайте. Это то самое меню, которое расположено в той же опции – Внешний вид. Как его создать Вы можете узнать, прочитав внимательно статью по настройке Произвольного меню.
Теперь открываем виджет и принимаемся за его настройки.
1. Выбор меню из созданных в Произвольном меню;
2. Click – меню будет открываться по клику наведенного курсора и закрываться тоже по клику;
3. Hover – меню открывается по клику курсора и автоматически закрывается;
4. Заголовок. В этом окне вводите название меню. У меня – Загляни сюда!
5. Ширина кнопки в пикселях. Можете установить по своему усмотрению.
6. Локализация верх-низ. TOP –BOTTON. Выбираете расположение плашки меню, внизу или вверху.
Второе окно устанавливает отступ от верхнего или нижнего края окна.
7. Локализация право-лево. Второе окно устанавливает расстояние от бокового края;
8. Скорость «плавания». Это скорость движения кнопки по экрану, в случае соответствующей установки .
10. «Бегающее» меню. Поставив галочку в этом чек боксе, Вы позволите меню передвигаться с
движением экрана.
11. Фиксированное открытое меню. Такое меню установится и «привяжется» к определенному месту
экрана в открытом виде.
12. Фиксированное выпадающее меню. А такое меню будет закреплено на определенном месте и
открываться по клику. Именно такое меню установлено у меня на сайте.
13. Последнее окно – выбор внешнего вида. Просто поэкспериментируйте и подберите под дизайн
вашего сайта.
Не забудьте сохранить изменения.
Ну, вот и все. Меню создано.
Удачного продвижения
