آموزش ساخت و کد منوی چند سطحی وردپرس

کد منو drop-down یا همان چند سطحی وردپرس ( منوی دو سطحی یا منوی سه سطحی وردپرس )

1- ایجاد کد منو در فانکیشن قالب

نمونه کد :

function custom_theme_setup() {
register_nav_menus(array(
‘primary’ => ‘Primary Menu’,
));
}add_action(‘after_setup_theme’, ‘custom_theme_setup’);

به جای Primary Menu هر نام منویی که خواستید می تواند باشد

2- درج کد منو یا همان فهرست در فایل هدر قالب یا هرجایی که می خواهید منو را نمایش بدهید :

<nav class=”main-menu”>
<?php
wp_nav_menu(array(
‘theme_location’ => ‘primary’,
‘container’ => false,
‘menu_class’ => ‘menu’,
‘fallback_cb’ => false,
‘depth’ => 3,
));
?>
</nav>

در کد بالا primary همان نام منویی هست که در مرحله 1 ایجاد کردید ، menu_class هم باید نام کلاس منوی خود را که در سی اس اس تعیین کردین بگذارید  ، depth هم تعیین کننده سطح منو است که الان روی عدد 3 به معنای سه سطحی است

3- کد سی اس اس را با تغییرات دلخواه در فایل سی اس اس قالب قرار بدهید نمونه کد :

.main-menu .menu li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
z-index: 9999;
}

.main-menu .menu li:hover > ul,
.main-menu .menu li:focus > ul,
.main-menu .menu li.current-menu-item > ul {
display: block;
}

.main-menu .menu li ul li {
position: relative;
}

.main-menu .menu li ul li ul {
top: 0;
left: 100%;
}

.main-menu .menu li ul li:hover > ul,
.main-menu .menu li ul li:focus > ul,
.main-menu .menu li ul li.current-menu-item > ul {
display: block;
}

نکات کد سی اس اس : display: none مخفی کردن زیر منو در حالت بدون کلیک و هاور موس

display: block  نمایش آن

z-index: 9999 هم لازمه برای سطح دوم

مابقی موارد دلخواه تغییر و اضافه کنید مثل رنگ و مکان و فاصله ها و …