استایل زیرمنوی آبشاری برای قالب وردپرس شخصی

استایل زیرمنوی آبشاری برای قالب وردپرس شخصی

اگر شما هم به عنوان توسعه دهنده یک قالب وردپرسی نوشته‌اید و می‌خواهید در آن از زیرمنوها و منوهای فرزند پشتیبانی کنید نیاز به استایل پیشرفته دارید یا اینکه از پلاگین‌های پیشرفته مثل مگامنو استفاده کنید که البته لازمه‌ی این مورد هم این است که در قالب خود آن افزونه‌ها را پشتیبانی کنید. در این نوشته روش اضافه کردن استایل یا کدهای css جهت پشتیبانی از زیرمنو و منوی فرزند در وردپرس را آموزش می‌دهیم تا بتوانید در قالب سایت وردپرس خود از زیرمنوها و منوهای سلسه مراتبی استفاده کنید.

استایل زیرمنوی آبشاری برای قالب وردپرس شخصی

در ابتدا نیاز دارید در فایل header.php خود بخشی که مربوط به فهرست یا ناوبری بالایی است را ایجاد کنید؛ برای این کار کافیست از قطعه منوی زیر استفاده کنید:

wp_nav_menu( array( 'theme_location' => 'primary', 'container_class' => 'nav-menu', 'menu_class' => 'nav-menu' ) );

سپس کافیست کدهای css زیر را در فایل style.css قالب فعال سایت وردپرسی خود اضافه کنید تا بتوانید از منوی سلسله مراتبی و زیرمنوها به طور کامل پشتیبانی را انجام دهید:

div.nav-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
div.nav-menu li {
    position: relative;
    line-height: 1.7;
}
div.nav-menu a {
    color: #fff;
    text-decoration: none;
    display: block;
}
div.nav-menu > ul > li {
    float: left;
}
div.nav-menu > ul > li > a{
    padding: 10px 10px;
}
div.nav-menu > ul > li:hover > a{
    background: #333;
}

/* Sub/Children Menu */
div.nav-menu .sub-menu,
div.nav-menu .children {
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 1;
    background: #333;
    min-width: 200px;
    display: none;
}
div.nav-menu li:hover > .sub-menu,
div.nav-menu li:hover > .children {
    display: block;
}
div.nav-menu .sub-menu a,
div.nav-menu .children a {
    padding: 5px 10px;
}
div.nav-menu .sub-menu li:hover a,
div.nav-menu .children li:hover a {
    background: #444;
}

/* Grandchildren Menu */
div.nav-menu .sub-menu .sub-menu,
div.nav-menu .children .children {
    position: absolute;
    left: 100%;
    top: 0;
    background: #444;
}

اگر قصد داشتید منوها را به صورت دور گرد تبدیل کنید یعنی به آن‌ها border radius هم بدهید یک مشکل بصری در منوهای خود دارید که با قطعه کد زیر می‌توانید آن را حل کنید:

div.nav-menu a {
    transition: 0s!important;
}
div.nav-menu a:hover {
	transition: 0s !important;
}

پیشنهاد نویسنده: راست چین کردن مگامنو در وردپرس

کدهای بالا پیچیده نیستند و کافیست هر کدام را در جایی که گفته شده استفاده کنید و سپس رنگ‌ها و اندازه‌ها را با توجه به علاقه ی خود به صورت دلخواه شخصی سازی کنید. اگر سوالی در ارتباط با کدهای بالا دارید در بخش نظرات همین نوشته از ما بپرسید.