Здравствуйте! Для создания выдвижного меню в WordPress, которое будет располагаться справа и выезжать при наведении курсора, можно использовать комбинацию CSS и JavaScript (или jQuery). Вот пошаговая инструкция для реализации такого функционала:
### Шаг 1: Создайте меню в админке WordPress
1. Перейдите в админку WordPress и выберите **Внешний вид → Меню**.
2. Создайте новое меню, добавьте нужные страницы, ссылки и сохраните его.
3. Убедитесь, что у вас есть меню, доступное для отображения на сайте.
### Шаг 2: Добавьте HTML для меню
Перейдите в файл вашей темы, где вы хотите отобразить меню (например, `header.php` или `footer.php`), и добавьте следующий HTML-код:
```html
<div id="side-menu" class="side-menu">
<nav>
<?php
wp_nav_menu(array(
'theme_location' => 'your_menu_location', // Замените на ваше местоположение меню
'menu_class' => 'menu-items',
));
?>
</nav>
</div>
```
### Шаг 3: Добавьте стили
Добавьте следующие стили в файл `style.css` вашей темы:
```css
.side-menu {
position: fixed;
right: -250px; /* Скрытое положение */
top: 0;
width: 250px; /* Ширина вашего меню */
height: 100%;
background-color: #333; /* Цвет фона */
transition: right 0.3s ease; /* Плавное скрытие и появление */
z-index: 999; /* Чтобы меню было поверх других элементов */
}
.side-menu.active {
right: 0; /* Положение, когда меню активно */
}
.menu-items {
list-style: none;
padding-left: 0;
}
.menu-items li {
padding: 15px;
color: white; /* Цвет текста */
}
```
### Шаг 4: Добавьте JavaScript
Для того чтобы меню выезжало при наведении, добавьте следующий код в файл `script.js` (или создайте новый файл и подключите его):
```javascript
document.addEventListener('DOMContentLoaded', function() {
const sideMenu = document.getElementById('side-menu');
// Показать меню при наведении курсора
sideMenu.addEventListener('mouseenter', function() {
sideMenu.classList.add('active');
});
// Скрыть меню, когда курсор покинет область
sideMenu.addEventListener('mouseleave', function() {
sideMenu.classList.remove('active');
});
});
```
Не забудьте подключить ваш `script.js` в вашем `functions.php`:
```php
function my_enqueue_scripts() {
wp_enqueue_script('my-custom-script', get_template_directory_uri() . '/js/script.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');
```
### Шаг 5: Проверка работы
После того как вы выполнили все шаги, проверьте свою страницу. При наведении на правую сторону экрана меню должно выезжать, а при удалении курсора скрываться.
### Заключение
Это базовый пример реализации выдвижного меню. Вы можете адаптировать стили и функционал под ваши нужды. Если у вас возникнут вопросы или потребуется дополнительная помощь, не стесняйтесь задавать!