Посещая наш сайт, вы соглашаетесь с нашей политикой конфиденциальности в отношении файлов cookie, статистики отслеживания и т. д.

Главная » Вопросы и ответы » Wordpress

Создание пользовательского вертикального меню

На чтение 7 мин Опубликовано
Содержание
  1. Вопрос или проблема
  2. Ответ или решение
  3. Шаг 1: Определение структуры меню
  4. Шаг 2: Использование Walker_Nav_Menu
  5. Шаг 3: Вставка меню в шаблон
  6. Шаг 4: Стиль CSS
  7. Шаг 5: Добавление jQuery
  8. Заключение

Вопрос или проблема

Прежде всего, прошу прощения за мой плохой английский, но это не мой родной язык, поэтому я постараюсь как можно лучше объяснить свою проблему.

Я хочу создать пользовательское меню с помощью Walker_Nav_Menu, которое должно выглядеть следующим образом:

----------------------------------
Раздел 1 | Раздел 2 | Раздел 3
----------------------------------
          | Подменю 1 |
          | Подменю 2 |
               | Подподменю 1 |
               | Подподменю 2 |
          | Подменю 3 |
          | Подменю 4 |

Подподменю 1 и 2 в подменю 2 должны появляться только при наведении мыши или при клике на ссылку, и если нет, то исчезать. Я искал, и следующая ссылка показывает меню, которое я хочу адаптировать для WordPress. Проблема в том, что я не могу задать классы для ul и li: http://codepen.io/WhiteWolfWizard/pen/MYQGQQ

Я пытался адаптировать это с помощью стандартных классов меню WordPress, но это не сработало. Вот код, который у меня есть:

МЕНЮ:

    <div id="menubar-menu">
<ul id="menu" class="menu"><li id="menu-item-100" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-100"><a href="#">Главная</a></li>
<li id="menu-item-103" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-103"><a href="#">Раздел 1</a>
<ul class="sub-menu">
    <li id="menu-item-127" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-127"><a href="#">Подраздел 1</a></li>
    <li id="menu-item-140" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-140"><a href="#">Подраздел 2</a></li>
<ul class="sub-menu">
        <li id="menu-item-122" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-122"><a href="#">ПОДраздел 1</a></li>
        <li id="menu-item-121" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-121"><a href="#">ПОДраздел 2</a></li>
</ul>
    <li id="menu-item-141" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-141"><a href="#">Подраздел 3</a></li>
</ul>
</li>
</ul></div>

<script>
$(document).ready(function () {
  $('#menu .menu-item.menu-item-has-children .trigger-sub-menu i').on('click', function () {
    $(this).toggleClass('fa-flip-vertical');
    $(this).parent().toggleClass('active');
    $('#menu .menu-item.menu-item-has-children .sub-menu').toggle();
    $('#menu .menu-item.menu-item-has-children .sub-menu .trigger-sub-menu i').removeClass('fa-flip-vertical').parent().removeClass('active');
    $('#menu .menu-item.menu-item-has-children .sub-menu').slideUp();
    return false;
  });
  $('#menu .menu-item.menu-item-has-children .sub-menu .sub-menu i').on('click', function () {
    $(this).toggleClass('fa-flip-vertical');
    $(this).parent().toggleClass('active');
    $('#menu .menu-item.menu-item-has-children .sub-menu').slideToggle(150);
    return false;
  });
});
</script>

CSS:

#menu .menu-item {
  float: left;
  margin: 10px 0 10px 5px;
}
#menu .menu-item a {
  position: relative;
  height: 30px;
  padding: 0 10px;
  border-radius: 2px;
  display: block;
  -webkit-transition: all 150ms ease;
  transition: all 150ms ease;
  color: #8aa4bb;
  line-height: 30px;
  white-space: nowrap;
}
#menu .menu-item a:hover, #menu .menu-item a:active {
  background: #8aa4bb;
  color: #fff;
}
#menu .menu-item a:active {
  background: #758b9f;
}
#menu .menu-item a[class*="trigger-"] {
  padding-right: 40px;
}
#menu .menu-item a i {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
}
#menu .menu-item a i:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  height: 50%;
  margin: auto;
  border-left: 1px solid rgba(0, 0, 0, 0.15);
}
#menu .menu-item.menu-item-has-children {
  position: relative;
}
#menu .menu-item.menu-item-has-children .sub-menu {
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 2px;
  background: #fff;
  display: none;
  overflow: hidden;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  -webkit-transform: translateY(35px);
          transform: translateY(35px);
}
#menu .menu-item.menu-item-has-children .sub-menu li {
  float: none;
  margin: 0;
}
#menu .menu-item.menu-item-has-children .sub-menu li a {
  border-radius: 0;
}
#menu .menu-item.menu-item-has-children .sub-menu .menu-item-has-children.sub-menu {
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  background: #758b9f;
  display: none;
}
#menu .menu-item.menu-item-has-children .sub-menu .menu-item-has-children.sub-menu li {
  width: 100%;
  display: table;
}
#menu .menu-item.menu-item-has-children .sub-menu .menu-item-has-children.sub-menu li a {
  height: 25px;
  font-size: 8pt;
  color: #fff;
  line-height: 25px;
}
#menu .menu-item.menu-item-has-children .sub-menu .menu-item-has-children.sub-menu li:first-child a {
  margin-top: 5px;
}
#menu .menu-item.menu-item-has-children .sub-menu .menu-item-has-children.sub-menu li:last-child a {
  margin-bottom: 5px;
}

Любая помощь будет оценена! Спасибо заранее! 🙂

Убедитесь, что вы понимаете css, html, jquery и затем wordpress навигации код.

Ответ или решение

Создание пользовательского вертикального меню в WordPress может показаться сложной задачей, особенно если вы хотите, чтобы оно содержало подменю, которые отображаются только при наведении курсора или при клике. В этом ответе я подробно объясню, как это сделать с помощью класса Walker_Nav_Menu и ряда вспомогательных средств — CSS и jQuery.

Шаг 1: Определение структуры меню

Для начала вам необходимо создать меню в админ-панели WordPress. Перейдите в раздел "Внешний вид" → "Меню" и создайте новое меню. Не забудьте добавить необходимые позиции, включая подменю.

Шаг 2: Использование Walker_Nav_Menu

Далее, вам нужно создать пользовательский класс, который будет наследоваться от Walker_Nav_Menu. Это позволит вам контролировать вывод элементов списка и подменю.

class Custom_Walker_Nav_Menu extends Walker_Nav_Menu {
    function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
        $indent = ($depth) ? str_repeat("\t", $depth) : '';
        $class_names = join(' ', apply_filters('nav_menu_css_class', (array) $item->classes, $item, $args));
        $class_names = $class_names ? ' class="' . esc_attr($class_names) . '"' : '';
        $output .= $indent . '<li' . $class_names . '>';
        $atts = array();
        $atts['href'] = ! empty($item->url) ? $item->url : '';
        $atts = apply_filters('nav_menu_link_attributes', $atts, $item, $args);
        $attributes = '';
        foreach ($atts as $attr => $value) {
            if (! empty($value)) {
                $value = ( 'href' === $attr ) ? esc_url($value) : esc_attr($value);
                $attributes .= ' ' . $attr . '="' . $value . '"';
            }
        }
        $item_output = $args->before;
        $item_output .= '<a' . $attributes . '>';
        $item_output .= $args->link_before . apply_filters('the_title', $item->title, $item->ID) . $args->link_after;
        $item_output .= '</a>';
        $item_output .= $args->after;
        $output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args);
    }
}

Шаг 3: Вставка меню в шаблон

Теперь вам нужно вставить меню в ваш шаблон. Используйте функцию wp_nav_menu с полем walker, чтобы указать ваш класс:

<?php
wp_nav_menu(array(
    'theme_location' => 'primary',
    'walker' => new Custom_Walker_Nav_Menu(),
));
?>

Шаг 4: Стиль CSS

Теперь настало время стилизовать ваше меню. Используйте ваш CSS-код, но добавьте некоторые дополнительные правила, чтобы обеспечить правильное поведение подменю.

/* Основные стили меню */
#menu .menu-item {
    float: left;
    margin: 10px 5px;
}
/* Стили подменю */
#menu .sub-menu {
    display: none;
    position: absolute;
    background: #fff;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
}
#menu .menu-item:hover > .sub-menu {
    display: block; /* Показываем подменю при наведении */
}

Шаг 5: Добавление jQuery

Для обеспечения функциональности клика на подменю используйте следующий код jQuery. Он будет отвечать за открытие и закрытие подменю.

jQuery(document).ready(function($) {
    $('#menu .menu-item-has-children > a').click(function(event) {
        event.preventDefault();
        $(this).siblings('.sub-menu').slideToggle(); // Показать или скрыть подменю
    });

    // Закрываем подменю при клике вне меню
    $(document).click(function(event) {
        if (!$(event.target).closest('#menu').length) {
            $('#menu .sub-menu').slideUp();
        }
    });
});

Заключение

Создание пользовательского вертикального меню в WordPress с использованием Walker_Nav_Menu требует предварительных навыков работы с PHP, CSS и jQuery. Следуя приведённым шагам, вы можете создать функциональное и стильное меню, которое отвечает всем вашим требованиям — включая анимацию появления подменю и его закрытие. Не забудьте протестировать ваше меню на различных устройствах и экранах, чтобы гарантировать его полное соответствие современным стандартам пользовательского опыта.

menus
Оцените материал
Добавить комментарий

Капча загружается...

© 2024 IZ6.RU
*В материалах сайта упоминаются социальные сети Фейсбук / Инстаграм, принадлежащие Meta Platforms Inc., деятельность которой запрещена на территории РФ в части реализации данных социальных сетей на основании осуществления ею экстремистской деятельности