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

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

Здравствуйте друзья! В этой статье предлагаю вашему вниманию очередной интересный и простой пример создания плавной навигации на странице сайта в стиле «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;
 });
});
Здравствуйте друзья! В этой статье предлагаю вашему вниманию очередной интересный и простой пример создания плавной навигации на странице сайта в стиле "Go To". Это не первая подобная статья, и если вам интересует данная тематика, вы можете ознакомиться с другими схожими статьями тут и тут. Работает данный пример так: Для начала необходимо создать блок, в котором будет страница. Делаем это так: Как видите, мы создали блок с идентификатором test, внутри которого будет информация (контент) страницы. Далее необходимо добавить пункт меню, из которого будет возможна навигация на эту страницу. Для этого добавляем в меню демо примера&hellip;

Обзор

Проголосуйте за статью

Оценка

Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

Рейтинг: 4.88 ( 6 голосов )
100

22 комментария

  1. Аватар
    Алексей

    Добрый день! Понравилась статья, буду использовать её у себя. Подскажите, как проще всего модернизировать — сделать так чтобы меню с пунктами сначала было скрыто, а появлялось лишь при прокрутке вниз через некоторое время?

    • Аватар

      Доброе время суток! Спасибо за отзыв.
      Могу предложить два варианта модернизации, при которых меню будет появляться не сразу, а после прокрутки страницы:
      1) http://jsfiddle.net/r8pwd1jx/6/ (не забудьте добавить в CSS к #mainNav свойство display:none;)
      2) http://jsfiddle.net/j219bfry/1/ (меню выползает с левой стороны)

      • Аватар
        Алексей

        Благодарю, Александр! Использую первый способ.
        p.s. Понравился очень Ваш сайт уроками и их переводами. А также, конечно, Вашим участием. Спасибо за Вашу работу!

  2. Аватар

    Как эту прелестную функцию вбить в шаблон WP? (У меня одностраничный шаблон ZerifLite)

    • Аватар

      Все очень просто, для того чтобы интегрировать данный пример WordPress нужно:
      1) Добавьте в footer.php код:

      <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
      <script type="text/javascript">
      $(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;
         });
      });
      </script>
      

      2. На странице сайта выделите блоки к которым хотите создать навигацию идентификаторами

      <div id="page-one"></div>
      <div id="page-two"></div> 
      

      и т.д.. К примеру как-то так:

      <div id="page-one">
      <h2>Первый блок страницы</h2>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </div>
      
      <div id="page-two">
      <h2>Второй блок страницы</h2>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </div>
      

      3) Создайте новое меню из «Ссылки», указав в них идентификаторы блоков. К примеру в пункте меню «Первый блок сайта» должна быть ссылка #page-one, а на пункте меню который будет скролить к второму блоку должна быть ссылка вида #page-two

      Пробуйте 😉

  3. Аватар

    Здравствуйте! Меню раньше было сделано. А дальше вроде сделала как вы написали. Но не работает(( Спасибо заранее!

    • Аватар

      Дабы понять как работает функция рекомендую сделать следующее:
      1) Создайте новую страницу и вставьте на вкладке редактора Текст (не Визуально!) код ниже, после чего сохраните страницу.

      <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>
      

      2) После вставки перейдите на страницу и попробуйте нажимать на пункты навигации в «Перейти на:». Вы увидите, что прокрутка уже будет работать, но «рывком».
      3) Теперь вставьте код ниже в footer.php, перед закрывающим тегом :

      <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
      <script type="text/javascript">
      $(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;
         });
      });
      </script>
      

      4) Все будет работать как нужно!
      Теперь Вам останется создать меню из «ссылок» (подробнее в комментарии выше), а то меню что на странице удалить.
      Надеюсь у Вас все получится 🙂

  4. Аватар

    Здравствуйте! Подскажите как выделить(подчеркнуть или фон другой) в меню ссылку страницы где находится пользователь?

  5. Аватар

    Добрый день! Подскажите пожалуйста как подключить меню к админпанели, чтобы можно было управлять ею в разделе «Page».И чтобы можно было добавлять новые блоки, создавая новые страницы.

    Спасибо!

    • Аватар

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

  6. Аватар

    Здравствуйте! А теперь объедините нам эти два кода в 1 меню пожалуйста. Поясню. Меню изначально видно, делаешь прокрутку вниз он цепляется к верху сайта, при прокрутке активное меню подсвечивался вместо вашего нижнего «подчеркивания» (неважно каким цветом). Я нашла примеры в интернете, но они на старых библиотеках и конфликтуют с моим слайдером(нужно на новых библиотеках 1.11 к примеру) буду очень благодарна! Спасибо!

  7. Аватар

    Огромное спасибо! Просто выручили. Все доходчиво и понятно. Удачи вам в вашем труде! 🙂

  8. Аватар
    Алексей

    WP, с первого раза все встало, конфликтов со скриптами нет. Спасибо, статья полезная.

  9. Аватар

    здравствуйте,
    простите, я совсем чайник и для меня вообще все эти коды темный лес, куда их вписывать надо? или можно это как-то настроить попроще?
    хочу настроить тему stockholm, чтобы все страницы отображались на одной и в верхнем меню показывалось перемещение по страницам, примерно как тут stockholm18.select-themes.com

  10. Аватар
    Алексей

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

  11. Аватар

    здравствуйте, хотел спросить… вот есть стандартный плагин вывода Содержания статьи.. это точно такое только в меню ? ….надеюсь поняли о чем…. Мне нужно чтобы Содержание статьи выводилось в навигации в меню.. как это делается ? … есть такой плагин ? ..спасибо

  12. Аватар
    Евгений

    Добрый день. Установилось нормально, но подскажите как уменьшить шрифт пунктов меню для разрешений SM и MD например. А также как закрепить это меню вверху страницы, чтоб оно не исчезало при переходе по страницам

Оставить комментарий

Ваш email не будет опубликован.

*