Більше результатів...

Загальні селектори
Тільки точні збіги
Шукати у заголовках
Шукати у контенті
Вибір типів постів
Фільтрувати за категоріями
FAQ
Hostenko
Натхнення
Відео уроки
Новини
Плагіни
теми
Уроки
Хакі

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

Крок 1. Додаємо нову область меню в functions.php

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

inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!
register_nav_menus( array(
    'topnavigation' => __( 'Top Navigation', 'YOUR THEME NAME GOES HERE' )
) );

Якщо ви вже налаштували функцію register_nav_menus, додайте рядок меню 'topnavigation' до цієї функції.

Крок 2. Наповнюємо меню вмістом

Перейдемо до панелі керування, відкриємо вкладку меню. Створимо нове меню і призначимо йому місце під назвою 'Верхня навігація'. А потім наповнимо меню. Сюди можна додати сторінки Home, Store, Events та Blog — але ви можете використовувати власні сторінки:

Як самому написати код навігації, що прокручується.

Крок 3. Викликаємо меню

Вам потрібно викликати нове меню у головну частину основного тіла статті у файлі header.php. Вкрай важливо, щоб ви уклали меню всередині тега DIV. Назвати його можна по-своєму: наприклад, ми вибрали назва для divtopnavigation. Нам треба зробити так, щоб код рухався разом із сторінкою. Використовуйте наступний код для header.php:

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

В результаті виконання цього коду має вийти щось на кшталт:

Як самому написати код навігації, що прокручується.

Звичайно, ваша тема може відрізнятись від наведеної. У прикладі використовується базова тема underscores.me з простою сіткою з теми Отримайте скелет.

Крок 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 з усім іншим вмістом у ньому. У моєму шаблоні цей контейнер має назву #сторінка. Ось такий код я додав до файлу CSS:

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

І ось що вийде:

Як самому написати код навігації, що прокручується.

І ось тепер ви зможете з легкістю переміщатися сайтом за допомогою навігаційної панелі, а також самостійно підігнати стиль та оформлення панелі на ваш смак.

Джерело: WP.tutsplus.com
inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!
Олексій Шевченко
редактор wpcafe
Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, який спеціалізується на створенні сайтів на WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/

Коментарі до запису: 0

Додати коментар або відгук