Вы наверняка видели прокручиваемую навигацию на сайтах у других людей и задавались вопросом, как самому сделать что-то подобное. Скроллинг в навигации есть на многих сайтах, и его можно воспроизвести при помощи WordPress. Дайте такое решение и вашим читателям, чтобы они могли перейти к навигационному меню из любой точки на странице. Итак, начнем...

Шаг 1. Добавляем новую область меню в functions.php

Все по порядку. Для начала надо создать новое меню, чтобы его поместить на страницу. Давайте создадим новое меню под названием topnavigation. Вот основной код, которым мы задаем наше меню в файле functions.php:

register_nav_menus( array(
    'topnavigation' => __( 'Top Navigation', 'YOUR THEME NAME GOES HERE' )
) );

Если вы уже настроили функцию register_nav_menus, добавьте строку меню 'topnavigation' к этой функции.

Шаг 2. Наполняем меню содержимым

Перейдем в панель управления, откроем вкладку меню. Создадим новое меню и назначим ему место под названием 'Top Navigation'. А затем наполним меню. Сюда можно добавить страницы Home, Store, Events и Blog — но вы можете использовать и собственные страницы:

Шаг 3. Вызываем меню

Вам нужно вызвать новое меню в главную часть основного тела статьи в файле header.php. Крайне важно, чтобы вы заключили меню внутри тега div. Назвать его можно по-своему: например, мы выбрали название для div — topnavigation. Нам надо сделать так, чтобы код двигался вместе со страницей. Используйте следующий код для header.php:

<div id="topnavigation">
    <?php wp_nav_menu( array( 'theme_location' => 'topnavigation' ) ); ?>
</div>

В результате выполнения этого кода должно получиться что-то вроде:

Конечно, ваша тема может отличаться от приведенной. В примере используется базовая тема underscores.me с простой сеткой из темы Get Skeleton.

Шаг 4. Немного style.css

Вот теперь мы можем перейти к стилизации. Для начала немного поработаем с CSS, чтобы придать цветовое оформление для фона, и цветовое заполнение фона должно быть 100%-ым, чтобы это не выглядело странным при прокрутке страницы.

Используйте для этой цели следующий код для style.css (или другого файла, который в вашей теме отвечает за стили оформления страниц):

#topnavigation {
    width: 100%;
    background-color: #999;
}

Обновите страницу — и у вас должно получиться что-то вроде такого:

Шаг 5. Размещаем результаты

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

<div id="topnavigation">
    <nav><?php wp_nav_menu( array( 'theme_location' => 'topnavigation' ) ); ?></nav>
</div>

Теперь этому элементу придаем немного оформления. Сделать это можно следующим образом:

#topnavigation nav {
    width: 940px; //the width of your container div might be different
    margin: 0 auto;
}
#topnavigation li {
    display: inline;
    padding: 10px;
    margin: 20px 0;
}

Все это в результате приведет к тому, что страница будет иметь примерно следующий вид:

Шаг 6. А теперь "научим" элемент механизму прокрутки

И вот наконец мы готовы к тому, чтобы "научить" нашу навигационную панель скроллингу. Лучше всего закрепить нашу панель в верхней части окна, а затем выводить ее поверх всех остальных элементов на странице.

Обновите стиль #topnavigation:

#topnavigation {
    width: 100%;
    background-color: #999;
    position: fixed; //Stick it to the top of the window
    z-index: 1; //Make it float above all other elements
    height: 50px; //Gives us a reference point for the final thing
}

Но если вы перезагрузите окно, вы заметите, что поскольку навигационная панель "плавает" поверх, весь остальной контент уходит под эту панель.

Чтобы исправить это, добавьте границу к верхней части контейнера div со всем остальным содержимым в нем. В моем шаблоне этот контейнер носит название #page. Вот такой код я добавил в файл CSS:

#page {
    padding-top: 60px; //The height of my topnavigation div plus a little bit of extra padding for visual pleasure
}

И вот что получится:

И вот теперь вы сможете с легкостью перемещаться по сайту при помощи навигационной панели, а также самостоятельно подогнать стиль и оформление панели по вашему вкусу.

Источник: WP.tutsplus.com

Вам понравился материал?

Добавить комментарий

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.