Фиксированная навигационная панель часто встречается на различных ресурсах. Такой функционал достаточно легко воспроизвести на WordPress. Фиксированная панель поможет вашим читателям быстро перейти к интересному разделу из любой точки на странице.
1. Добавляем область меню в файле funtions.php
Для того, чтобы меню вывести на странице, должна иметься определенная область. Создадим новую с именем ‘topnavigation‘. Ниже приводится пример обычного кода для установки области меню в файле functions.php:
register_nav_menus( array( ‘topnavigation’ => __( ‘Top Navigation’, ‘ИМЯ ВАШЕЙ ТЕМЫ’ ) ) );
Если у вас уже есть определение функции register_nav_menus, просто добавьте в нее строку для меню ‘topnavigation‘.
2. Создаем меню
Переходим в панель администратора и открываем закладку для работы с меню. Создаем новое меню и назначаем для него только что созданную область ‘Top Navigation’. Затем заполняем пунктами для переходов на страницы. В примере используются пункты Home, Store, Events и Blog.
3. Вызываем меню
Нужно вызвать меню в самом верху раздела body в файле header.php. Очень важно разместить меню в собственном контейнере div. В нашем примере элемент div называется topnavigation. Нам нужно будет перемещать все в данном контейнере div со страницей позже. Есть простой способ решить задачу.
Используем следующий код в файле header.php:
<div id=»topnavigation»> <?php wp_nav_menu( array( ‘theme_location’ => ‘topnavigation’ ) ); ?> </div>
В итоге получим следующий результат:
4. Добавляем стили для меню
Теперь можно поработать над внешним видом. Установим фоновый цвет и ширину на 100% для начала.
Следующий код нужно поместить в файл style.css (или тот, который используется в вашей теме):
#topnavigation { width: 100%; background-color: #999; }
Обновляем страницу и видим результат действий:
5. Сдвигаем меню в центр
Теперь нужно расположить наши ссылки в центре панели. Создадим элемент nav вокруг меню:
<div id=»topnavigation»> <nav><?php wp_nav_menu( array( ‘theme_location’ => ‘topnavigation’ ) ); ?></nav> </div>
И определим для него стили:
#topnavigation nav { width: 940px; //у вас ширина контейнера может быть другой margin: 0 auto; } #topnavigation li { display: inline; padding: 10px; margin: 20px 0; }
Теперь наше меню будет выглядеть так:
6. Фиксируем меню
Теперь надо зафиксировать меню. Лучше всего установить меню вверху окна и сделать его плавающим поверх остальных элементов страницы.
Изменим стили для #topnavigation:
#topnavigation { width: 100%; background-color: #999; position: fixed; // Фиксируем меню вверху окна z-index: 1; // Помещаем его поверх всех остальных элементов height: 50px; // Устанавливаем высоту }
Но если перегрузить страницу, то вы увидите, что другие элементы заходят под наше меню и тогда, когда не нужно (в самом верху страницы).
Для исправления ситуации добавим поле сверху контейнера div для остальных элементов страницы. В нашем шаблоне такой элемент div называется #page. Вносим изменения CSS кода для него:
#page { padding-top: 60px; // Высота элемента topnavigation плюс небольшой отступ для визуальной привлекательности }
Получаем окончательный результат:
Внешний вид меню можно делать таким, кокой требуется по стилю сайта.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/hEmQ6S5c4Dg/lessons.php
Источник: