jQuery плагин для навигации на одной странице

Одностраничные сайты тоже имеют право на существование, потому как они, как правило, информативны, понятны и быстро доступны (можно обойтись без PHP и MySQL).

Юзабилити таких сайтов прокачивается с помощью jQuery. Для примера, можно сделать плавную прокрутку между областями контента и подсветку в меню.

Вот посмотрите примеры таких зарубежных сайтов: Brizk Design и Crush + Lovely.

Разметка

Начнем с неупорядоченного списка для навигации и разделов:

<ul id="nav">
  <li class="current"><a href="#section-1">Section 1</a></li>
  <li><a href="#section-2">Section 2</a></li>
  <li"><a href="#section-3">Section 3</a></li>
</ul>
<div id="section-1">
  <strong>Section 1</strong>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="section-2">
  <strong>Section 2</strong>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="section-3">
  <strong>Section 3</strong>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua.</p>
</div>

JavaScript

Затем добавляем jQuery, плагин ScrollTo и собственный авторский плагин:

<script src="jquery.js"></script>
<script src="jquery.scrollTo.js"></script>
<script src="jquery.nav.min.js"></script>

В конце просто вызываем свой собственный плагин на элементе списка навигации:

$(document).ready(function() {$('#nav').onePageNav();});

Опции

Вот несколько опций для плагина:

• currentClass: 'current'

  Класс добавляемый элементу списка навигации при его активации

• changeHash: false

  Если вы хотите, чтобы менялся хэш, когда пользователь щелкает на навигацию, тогда измените эту опцию на true

• scrollSpeed: 750

  Скорость прокрутки страницы при нажатии на элементы навигации

Вот и все!