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

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

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

در این نوشته روش اضافه کردن استایل یا کدهای 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;
}

 

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

 

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

اگر سوالی در ارتباط با کدهای بالا دارید در بخش نظرات همین نوشته از ما بپرسید.

موفق باشید.

برای امتیاز به این نوشته کلیک کنید!
[کل: 1 میانگین: 5]