Здравствуйте друзья! В этой статье предлагаю вашему вниманию очередной интересный и простой пример создания плавной навигации на странице сайта в стиле «Go To». Это не первая подобная статья, и если вам интересует данная тематика, вы можете ознакомиться с другими схожими статьями тут и тут.
Работает данный пример так:
Для начала необходимо создать блок, в котором будет страница. Делаем это так:
</pre> <pre><div id="test"> <h2>Тестовая страница</h2> </div></pre> <pre>
Как видите, мы создали блок с идентификатором test, внутри которого будет информация (контент) страницы.
Далее необходимо добавить пункт меню, из которого будет возможна навигация на эту страницу. Для этого добавляем в меню демо примера строчку <a href=»#test»>Тестовая страница</a>, после чего html код меню будет выглядеть так:
</pre> <pre><nav id="mainNav">Перейти на: <a href="#page-one">Главная</a>| <a href="#page-two">О нас</a>| <a href="#page-three">Новости</a>| <a href="#page-four">Контакты</a>| <a href="#test">Тестовая страница</a> </nav></pre> <pre>
Для изменения фона и добавления стилей на созданную страницу используйте ее идентификатор. К примеру чтобы задать белый фон нужно добавить в стили следующий ccs код:
</pre> <pre>#test {background-color:#fff;}</pre> <pre>
Как видите все очень просто! Но если у вас что-то не получилось, или появились вопросы — пишите в комментариях, и я постараюсь вам помочь.
Важно! Для работы с данным примером трансформации текста не забудьте обязательно подключить библиотеку jQuery.
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
Посмотреть и скачать демо пример вы можете перейдя по ссылкам ниже.
Демо СкачатьHTML
<nav id="mainNav">Перейти на: <a href="#page-one">Главная</a>| <a href="#page-two">О нас</a>| <a href="#page-three">Новости</a>| <a href="#page-four">Контакты</a> </nav> <div id="page-one"> <h2>Простой пример<br> плавной навигации<br> "Главная" </h2> </div> <div id="page-two"> <h2>О нас</h2> </div> <div id="page-three"> <h2>Новости</h2> </div> <div id="page-four"> <h2>Контакты</h2> </div>
CSS
html, body, #page-one, #page-two, #page-three, #page-four { height:100%; } #page-one, #page-two, #page-three, #page-four {padding-top:2em;} #mainNav { background-color: #668AE4; color: #ddd; line-height:4em; padding:0 1em; position:fixed; top: 0em; width:100%; } a, a:link, a:visited, a:hover, a:active { color:#eee; text-decoration:none; display:inline-block; padding:0 1em; } a:hover {color: #4861A2;} h2 {font-size:3em; padding-top:1em; text-align:center;} #page-one {background-color:#fff;} #page-two {background-color:#ccc;} #page-three {background-color:#aaa;} #page-four {background-color:#888;}
JS
$(document).ready(function() { $('a[href*=#]').bind('click', function(e) { e.preventDefault(); var target = $(this).attr("href"); $('html, body').stop().animate({ scrollTop: $(target).offset().top}, 500, function() { location.hash = target; }); return false; }); });
Обзор
Проголосуйте за статью
Оценка
Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!
Добрый день! Понравилась статья, буду использовать её у себя. Подскажите, как проще всего модернизировать — сделать так чтобы меню с пунктами сначала было скрыто, а появлялось лишь при прокрутке вниз через некоторое время?
Доброе время суток! Спасибо за отзыв.
Могу предложить два варианта модернизации, при которых меню будет появляться не сразу, а после прокрутки страницы:
1) http://jsfiddle.net/r8pwd1jx/6/ (не забудьте добавить в CSS к #mainNav свойство display:none;)
2) http://jsfiddle.net/j219bfry/1/ (меню выползает с левой стороны)
Благодарю, Александр! Использую первый способ.
p.s. Понравился очень Ваш сайт уроками и их переводами. А также, конечно, Вашим участием. Спасибо за Вашу работу!
Как эту прелестную функцию вбить в шаблон WP? (У меня одностраничный шаблон ZerifLite)
Все очень просто, для того чтобы интегрировать данный пример WordPress нужно:
1) Добавьте в footer.php код:
2. На странице сайта выделите блоки к которым хотите создать навигацию идентификаторами
и т.д.. К примеру как-то так:
3) Создайте новое меню из «Ссылки», указав в них идентификаторы блоков. К примеру в пункте меню «Первый блок сайта» должна быть ссылка #page-one, а на пункте меню который будет скролить к второму блоку должна быть ссылка вида #page-two
Пробуйте 😉
Здравствуйте! Меню раньше было сделано. А дальше вроде сделала как вы написали. Но не работает(( Спасибо заранее!
Дабы понять как работает функция рекомендую сделать следующее:
1) Создайте новую страницу и вставьте на вкладке редактора Текст (не Визуально!) код ниже, после чего сохраните страницу.
2) После вставки перейдите на страницу и попробуйте нажимать на пункты навигации в «Перейти на:». Вы увидите, что прокрутка уже будет работать, но «рывком».
3) Теперь вставьте код ниже в footer.php, перед закрывающим тегом :
4) Все будет работать как нужно!
Теперь Вам останется создать меню из «ссылок» (подробнее в комментарии выше), а то меню что на странице удалить.
Надеюсь у Вас все получится 🙂
Thank you!!!
Здравствуйте! Подскажите как выделить(подчеркнуть или фон другой) в меню ссылку страницы где находится пользователь?
Вот пример. Немного другой, но надеюсь то, что Вам нужно http://jsfiddle.net/kynyh6bn/
Можете по шагам расписать, куда нужно вставить участок кода JavaScript и кода CSS?
Добрый день! Подскажите пожалуйста как подключить меню к админпанели, чтобы можно было управлять ею в разделе «Page».И чтобы можно было добавлять новые блоки, создавая новые страницы.
Спасибо!
Добрый день!
Этот пример не подключается к административной панели. Рекомендую использовать темы «одностраничные», в которых нужная Вам возможность будет по умолчанию.
Касательно интеграции такой навигации просто на страницу я ответил в комментариях выше.
Здравствуйте! А теперь объедините нам эти два кода в 1 меню пожалуйста. Поясню. Меню изначально видно, делаешь прокрутку вниз он цепляется к верху сайта, при прокрутке активное меню подсвечивался вместо вашего нижнего «подчеркивания» (неважно каким цветом). Я нашла примеры в интернете, но они на старых библиотеках и конфликтуют с моим слайдером(нужно на новых библиотеках 1.11 к примеру) буду очень благодарна! Спасибо!
Огромное спасибо! Просто выручили. Все доходчиво и понятно. Удачи вам в вашем труде! 🙂
WP, с первого раза все встало, конфликтов со скриптами нет. Спасибо, статья полезная.
здравствуйте,
простите, я совсем чайник и для меня вообще все эти коды темный лес, куда их вписывать надо? или можно это как-то настроить попроще?
хочу настроить тему stockholm, чтобы все страницы отображались на одной и в верхнем меню показывалось перемещение по страницам, примерно как тут stockholm18.select-themes.com
Здравствуйте! В этом комментарии я более подробно написал как работает данный пример: https://wp-lessons.com/plavnaya-navigatsiya-go-to-na-odnostranichnom-sayte#comment-1301
Второе меню постоянно когда его нажимаешь почему то встает так,чтобы прочитать заголовок надо наверх подняться немного.
Присоединяюсь
здравствуйте, хотел спросить… вот есть стандартный плагин вывода Содержания статьи.. это точно такое только в меню ? ….надеюсь поняли о чем…. Мне нужно чтобы Содержание статьи выводилось в навигации в меню.. как это делается ? … есть такой плагин ? ..спасибо
Добрый день. Установилось нормально, но подскажите как уменьшить шрифт пунктов меню для разрешений SM и MD например. А также как закрепить это меню вверху страницы, чтоб оно не исчезало при переходе по страницам