Как легко и быстро построить фиксированное меню


Как легко и быстро построить фиксированное меню

Фиксированное меню является трендом в веб-дизайне за 2014 год. Данный вид меню прекрасно выглядит, а также эффективен для посетителей.

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

HTML

Начнем с основы, HTML. Вставьте данный код сразу после открывающего тега вашего HTML документа. Если вы применяете этот урок для WordPress блога, тогда код должен быть в файле header.php.

 

Как вы видите, мы создали контейнер ( #fixmenu), логотип для сайта и ссылку, а также список <ul> содержащий наши пункты меню. Не бойтесь добавлять дополнительные пункты меню в свои проекты.

CSS

Вторым шагом является CSS. Давайте создадим красивое фиксированное меню! Вставьте приведенный ниже код в ваш style.css файл.

 

Если вы прямо сейчас посмотрите на ваш HTML документ, то тогда там ничего не будет отображаться. Почему? Все из-за display:none; свойства, которое мы добавили к #fixmenu контейнеру. Это необходимо, потому что нам нужно, чтобы фиксированное меню было видимым тогда, когда обычное меню header’a не видно из-за прокрутки.

jQuery

Так как же нам определить, когда страница уже прокрутилась  настолько, что заголовок сайта больше  не видно? Пришло время jQuery! Вставьте этот код в нижней части HTML документа; в файле footer.php, если вы применяете это в блоге WordPress. Убедитесь, что вы включили jQuery фреймворк перед этим кодом

В строке 3 мы определяем, если документ был прокручен более 300 пикселей сверху. Если да, то тогда вызывается ()FadeIn функция jQuery, чтобы отобразить фиксированное меню. С другой стороны, функцияfadeOut() используется, чтобы скрыть меню, когда верхняя часть документа видна. В строке 9, мы добавили код, чтобы определить, когда активируется #scrolltop ссылка.

 

Источник: webdesignmagazine.ru

Previous Добавляем локацию мест Google Maps на ваш WordPress-сайт
Next 25 новых тем для OpenCart (июль-август 2014)

Suggested Posts

Как получить первые 10 тиц

45 бесплатных адаптивных HTML5-шаблонов

Адаптивный шаблон Opencart 2.1.0.1-2.1.0.2 — Magazin

Woocommerce — интернет-магазин на WordPres

Создаем портфолио с помощью WordPress плагина Projects от WooThemes

Лучшие плагины CAPTCHA для вашего WordPress-сайта