Создание вытягиваемого бокового меню для веб-сайта

Создание вытягиваемого бокового меню для веб-сайта

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

В посте рассмотрю два вопроса:

  • как фиксировать меню при прокрутке страницы, когда блок навигации «прижимается» к верху экрана (простое решение на css и с jquery).
  • плюс заодно поговорим о прокрутке до якоря с фиксированным меню, которая не совсем корректно работает без дополнительных хаков.

Новичкам информация пригодится, плюс запишу ее для себя, т.к. похожие задачи возникают время от времени. Не буду вдаваться в подробности всех деталей кода, укажу лишь основные нюансы. Чтобы попрактиковаться советую скопировать эти примеры и попробовать их на своих проектах, а полным новичкам — дополнительно глянуть сервис обучения верстке Interneting is Hard.

Фиксированное меню на CSS + HTML

В общем случае при создании простого горизонтального фиксированного меню для сайта вам нужно использовать CSS свойства position:fixed и top:0. Также основному блоку контента придется задать верхний отступ margin-top.

Итак, возьмем простую структуру HTML страницы:

<div class="menu"> <a href="#main">Главная</a> <a href="#about">О нас</a> <a href="#contacts">Контакты</a> </div> <div class="main"> <p>Какой-то текст для примера.</p> </div>

<div class="menu"> <a href="#main">Главная</a> <a href="#about">О нас</a> <a href="#contacts">Контакты</a> </div> <div class="main"> <p>Какой-то текст для примера.</p> </div>

В файл стилей CSS добавляете:

.menu { overflow: hidden; background-color: #999; position: fixed; top: 0; width: 100%; } .menu a { float: left; display: block; color: #000; padding: 15px 15px; text-decoration: none; } .content { font-style: italic; width: 40%; margin-top: 60px; margin-left: 10px; }

.menu { overflow: hidden; background-color: #999; position: fixed; top: 0; width: 100%; } .menu a { float: left; display: block; color: #000; padding: 15px 15px; text-decoration: none; } .content { font-style: italic; width: 40%; margin-top: 60px; margin-left: 10px; }

В результате получится такая картинка:

Создание фиксированного меню на CSS

Ничего оригинального, но главное, что работает. Дабы увидеть эффект фиксированного меню при прокрутке страницы вам нужно будет добавить больше текста в блок контента (чтобы появилась полоса прокрутки).

Основные детали кода выше, как я уже говорил, это  position:fixed, top:0 и margin-top: 60px. Верхний отступ может быть другим, если высота меню у вас меньше/больше.

Кстати, если требуется зафиксировать меню внизу страницы, заменяете код на:

. menu { position: fixed; bottom: 0; width: 100%; }

. menu { position: fixed; bottom: 0; width: 100%; }

Все то же самое, только вместо top указывается bottom:0. Единственное, нужно будет погуглить как правильно сделать отступ контенту снизу чтобы он тот скрывался за плашкой меню. Решение с margin-bottom:30px; почему-то не сработало.

Фиксированное меню с jQuery и CSS

Второй пример чуть более сложный — с применением библиотеки jQuery. Она встречается на многих сайтах, плюс в большинстве шаблонов WordPress и других CMS подключена изначально. Из Javascript функций здесь используется всего 2, поэтому данное решение можно считать достаточно легким по сравнению с некоторыми другими из интернета. Англоязычный исходник найдете здесь, а вот что в итоге должно получиться:

Фиксированное меню

Алгоритм внедрения данного фиксированного меню с jQuery состоит из трех шагов. Первым делом добавляем HTML код:

<div class="nav-container"> <div class="nav"> <ul> <li><a href="">Home</a></li> <li><a href="">CSS</a></li> <li><a href="">PHP</a></li> <li><a href="">SEO</a></li> <li><a href="">jQuery</a></li> <li><a href="">Wordpress</a></li> <li><a href="">Services</a></li> </ul> <div class="clear"></div> /clear floating div/ </div> </div>

<div class="nav-container"> <div class="nav"> <ul> <li><a href="">Home</a></li> <li><a href="">CSS</a></li> <li><a href="">PHP</a></li> <li><a href="">SEO</a></li> <li><a href="">jQuery</a></li> <li><a href="">Wordpress</a></li> <li><a href="">Services</a></li> </ul> <div class="clear"></div> /clear floating div/ </div> </div>

Если вы хотите внедрить данный метод на уже готовое собственное меню, тут 2 пути: либо в CSS и JS ниже подставляете свои стили, либо подгоняете имеющийся HTML под вариант сверху.

В стилях размещаете следующие строки:

.nav-container{ background: url('images/nav_bg.jpg') repeat-x 0 0;} .f-nav{ z-index: 9999; position: fixed; left: 0; top: 0; width: 100%;} .nav { height: 42px;} .nav ul { list-style: none; } .nav ul li{float: left; margin-top: 6px; padding: 6px; border-right: 1px solid #ACACAC;} .nav ul li:first-child{ padding-left: 0;} .nav ul li a { } .nav ul li a:hover{ text-decoration: underline;}

.nav-container{ background: url('images/nav_bg.jpg') repeat-x 0 0;} .f-nav{ z-index: 9999; position: fixed; left: 0; top: 0; width: 100%;} .nav { height: 42px;} .nav ul { list-style: none; } .nav ul li{float: left; margin-top: 6px; padding: 6px; border-right: 1px solid #ACACAC;} .nav ul li:first-child{ padding-left: 0;} .nav ul li a { } .nav ul li a:hover{ text-decoration: underline;}

Кроме непосредственно фиксации меню при прокрутке есть CSS для размещение ссылок в одну строку.

jQuery("document").ready(function($){ var nav = $('.nav-container'); $(window).scroll(function () { if ($(this).scrollTop() > 136) { nav.addClass("f-nav"); } else { nav.removeClass("f-nav"); } }); });

jQuery("document").ready(function($){ var nav = $('.nav-container'); $(window).scroll(function () { if ($(this).scrollTop() > 136) { nav.addClass("f-nav"); } else { nav.removeClass("f-nav"); } }); });

Логика работы функций следующая — когда пользователь находится или прокручивает страницу ниже 136 пикселей сверху, то для меню добавляется класс f-nav, а в нем прописаны знакомые нам position:fixed и top:0.

Значение в 136 пикселей можно менять в зависимости от вашего дизайна. Кроме того, если вы интегрируете данный пример в свое готовое горизонтальное фиксированное меню на сайте, то указывайте соответствующие значения классов в JS и CSS. Если у вас возникли какие-то нюансы с реализацией кода, загляните в комментарии к оригинальной статье — там есть парочка подсказок.

Напоследок предлагаю ознакомиться с еще одним вариантом реализации нашей задачи. Не буду особо детализировать его, просто размещаю вставку из онлайн редактора кода Codepen.

Прокрутка до якоря с фиксированным меню

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

Данная ситуация чаще всего возникает в лендингах. На скриншоте проблема заметна более наглядно:

Создаем якорь с отступом

На StackOverflow найдено два решения задачи, которые отличаются лишь CSS.

Чтобы создать якорь с отступом первым делом добавим ему определенный стиль, например, anchor:

<h1><a class="anchor" name="linktext">Some text</a></h1>

<h1><a class="anchor" name="linktext">Some text</a></h1>

Далее для него в стилях прописываете:

.anchor{ display:block; height:55px; margin-top:-55px; visibility:hidden; }

.anchor{ display:block; height:55px; margin-top:-55px; visibility:hidden; }

Здесь 55 пикселей — высота меню + отступ, которые нужны чтобы текст контента был виден. Указывайте значения, подходящие вашему сайту. В работе я применял именно этот вариант.

Альтернативный метод предлагает реализацию через padding, там вообще получается одна строка кода:

.anchor { padding-top: 90px; }

.anchor { padding-top: 90px; }

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

Если есть вопросы или что добавить по теме, пишем в комментариях.

Создание вытягиваемого бокового меню для веб-сайта 45
Вертикальное выпадающее меню на CSS при наведении и многоуровневые меню
Создание вытягиваемого бокового меню для веб-сайта 53
Код меню для сайта html: несколько простых примеров кода для улучшения
Создание вытягиваемого бокового меню для веб-сайта 7
Горизонтальное меню для сайта на HTMLCSS готовые шаблоны Как создать
Создание вытягиваемого бокового меню для веб-сайта 25
Фиксированное меню при прокрутке сайта Блог Костаневича Степана
Создание вытягиваемого бокового меню для веб-сайта 81
20 слайд-панелей навигации для сайта / jQuery плагины. / Постовой
Создание вытягиваемого бокового меню для веб-сайта 4
Как сделать фиксированное меню при прокрутке страницы
Создание вытягиваемого бокового меню для веб-сайта 72
Как сделать в html5 меню: горизонтальное и вертикальное
Создание вытягиваемого бокового меню для веб-сайта 39
Как зафиксировать меню при прокрутке страницы?
Создание вытягиваемого бокового меню для веб-сайта 75
Создание меню на CSS руководство для новичков CSS
Создание вытягиваемого бокового меню для веб-сайта 68
Как сделать мобильное меню, выезжающее сбоку?
Создание вытягиваемого бокового меню для веб-сайта 65
Создание вытягиваемого бокового меню для веб-сайта 62
Создание вытягиваемого бокового меню для веб-сайта 73
Создание вытягиваемого бокового меню для веб-сайта 96
Создание вытягиваемого бокового меню для веб-сайта 10
Создание вытягиваемого бокового меню для веб-сайта 30
Создание вытягиваемого бокового меню для веб-сайта 44
Создание вытягиваемого бокового меню для веб-сайта 93

Похожие записи:

  • Тля на перце в домашних условиях
  • Как сделать руки из конфет
  • Чем лечить чирей под мышкой в домашних условиях
  • Как сделать на двигателе плавный пуск
  • Как сажать тюльпан дома в горшке