2 232 Одностраничные сайты тоже имеют право на существование, потому как они, как правило, информативны, понятны и быстро доступны (можно обойтись без PHP и MySQL).
Юзабилити таких сайтов прокачивается с помощью jQuery. Для примера, можно сделать плавную прокрутку между областями контента и подсветку в меню.
Вот посмотрите примеры таких зарубежных сайтов: Brizk Design и Crush + Lovely.
Разметка
Начнем с неупорядоченного списка для навигации и разделов:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<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 и собственный авторский плагин:
|
1 2 3 |
<script src="jquery.js"></script> <script src="jquery.scrollTo.js"></script> <script src="jquery.nav.min.js"></script> |
В конце просто вызываем свой собственный плагин на элементе списка навигации:
|
1 |
$(document).ready(function() {$('#nav').onePageNav();}); |
Опции
Вот несколько опций для плагина:
-
currentClass: 'current'
Класс добавляемый элементу списка навигации при его активации -
changeHash: false
Если вы хотите, чтобы менялся хэш, когда пользователь щелкает на навигацию, тогда измените эту опцию на true -
scrollSpeed: 750
Скорость прокрутки страницы при нажатии на элементы навигации
Вот и все!
