grid ساخت منوی DropDown در WordPress

How to Create a Dropdown Menu in WordPress

شاید برای تان پیش آمده باشد که بخواهید منوی کشویی یا Dropdown در وردپرس طراحی کنید، اما این کار چگونه است؟

خوشبختانه ساختار منو های وردپرس طوری هست که میشود به راحت منوی Dropdown ایجاد کرد اما برای تکمیل آن باید از از Css و jQuery استفاده کنید.

ایجاد زیر منو در پنل ادمین وردپرس

برای این کار باید به بخش نمایش > فهرست ها بروید و با کشیدن یک گزینه به زیر یک دیگر زیر منو ایجاد کنید.

Drop And Drag

اضافه کردن Css

پس از اضافه کردن زیرمنو شما باید به آن اصطلاحا Style (شیوه، سبک و …) بدهید.

برای اینکار شما باید به بخش نمایش > ویرایشگر پوسته بروید و header.php را انتخاب کنید و کد زیر را بعد از <head> بنویسید.

<style>
	.menu-item-has-children {
		position: relative;
	}
	.menu-item-has-children .sub-menu {
		width: 200px;
		list-style: none;
		overflow: hidden;
		position: absolute;
		top: 100%;
		background: #fff;
		box-shadow: 0 0 10px #DDD;
		display: none;
	}
	.menu-item-has-children .sub-menu li a {
		color: #000;
		text-decoration: none;
		display: block;
		padding: 10px;
		text-align: center;
		transition: all .2s ease;
	}
	.menu-item-has-children .sub-menu li a:hover {
		background: #CCC;
	}
</style>

اگر از jQuery استفاده نمیکنید در آخر کد بالا قبل از </style> کد زیر را اضافه کنید.

	.menu-item-has-children:hover .sub-menu  {
		display: block;
	}

اما اگر از jQuery استفاده میکنید کد زیر را بعد </style> اضافه کنید.

<script>
	jQuery(document).ready(function($){
		$('.menu-item-has-children').hover(function(){
			$(this).children('.sub-menu').stop().slideToggle(150);
		});
	})
</script>

اگر عیب و ایرادی در این مطلب دیدید خوشحال میشم آن را در بخش نظرات بیان کنید.

author

سید علی طلوع

سید علی طلوع هستم، طراح توسعه دهنده و برنامه نویس وب، از لینک رو به رو میتونید رزومه بنده رو ببینید: مشاهده وب سایت

مطالب تصادفی

نظر شما برایمان با ارزش هست

نام و ایمیلمو ذخیره کن

2 دیدگاه
avatar
جواد
24 مهر 1400

سلام وبت عالیه 👍

    avatar
    سید علی طلوع
    27 مهر 1400

    سلام، نظر لطفته ❤