نحوه استایل دهی و سفارشی کردن زیرمنوهای (submenu های) کشویی در منوی قالب Divi

سفارشی سازی | سفارشی سازی با کد | منوی دیوی
دیوی مارکتجولای 18, 2022

امیدواریم از خواندن این مقاله لذت کافی را ببرید

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

سفارشی کردن و استایل دهی به ساب منو در قالب دیوی

احتمالا برای شما هم موارد یپیش آمده است که بخواهید submenu را در منوی اصلی قالب دیوی استایل دهی نمایید و آنرا سفارشی سازی کنید.

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

پس از این آموزش قادر خواهید بود زیرمنوهای کشویی در منوی قالب دیوی را استایل دهی و سفارشی کنید و مواردی مانند رنگ، حاشیه (Border)، اسپیس ها، افکت های حالت hover و … را تغییر دهید.

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

درک ساختار ساب منو در دیوی

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

در حالت کلی زیرمنوها ی کشویی در منوی اصلی قالب دیوی دارای سه بخش هستند:

  • لیست های غیر ترتیبی (Unordered List) یا لیست نامرتب که در واقع همان زیرمنوها هستند.
  • آیتم ها یا المان های موجود در هر لیست
  • لینک ها

در شکل زیر مثالی از حالت دیفالت زیرمنوها در منوی اصلی قالب دیوی نشان داده شده است:

زیرمنوی کشویی در منوی اصلی قالب دیوی

شکل زیر نیز جزییات و پشت صحنه مربوط به این ساختار را نشان می دهد:

ساختار و بخش های ساب منوهای دیوی

توجه: به اینک نکته توجه کنید که هر بخش مجزا ویژگی های خاص خود مانند پدینگ و عرض (width) را داراست. بخش ها و المان های مربوط به هر بخش در ساختاری تودرتو قرار گرفته اند (درون یکدیگر هستند) بنابراین برای استایل دهی آن ها ابتدا باید ساختار آن را به خوبی درک کنیم تا قطعه درستی از هر ساختار را هدف قرار دهیم.

مهم است که قبل از شروع استایل دهی و سفارشی سازی ساب منو (Divi Submenu)، ابتدا ساختار آن را به درستی درک کنیم.

در این آموزش هر بخش از ساب منو را به صورت مجزا بررسی خواهیم کرد و شما نیز با دنبال کردن آن می توانید زیرمنوهای مدنظر خود را استایل دهی و سفارش کنید.

طریقه سفارشی سازی و استایل دهی زیرمنوها در منوی اصلی دیوی (Divi Menu Dropdown Submenu)

یکی از اولین چیزهایی که احتمالا در بخش زیرمنوهای منوی اصلی دیوی متوجه آن می‌شویم خط آبی رنگی است که در بالای زیرمنو قرار دارد. شاد بخواهد این خط را حذف کند یا رنگ آن را تغییر دهید و یا ضخامت آن را بیشتر کنید و … . این مطلب در شکل زیر نشان داده شده است و در ادامه و مطابق شکل جهت مشخص شدن شیوه کار تغییراتی در آن می دهیم.

استایل دهی submenu در دیوی

برای اینکه بتوانیم سفارشی سازی دیوی با css را به درستی انجام دهیم نیاز به کلاس و id هر عنصر داریم. برای این کار می توانیم از ابزار اینسپکت المنت که در شکل فوق نمایش داده شده است استفاده کنیم که با راست کلیک بر روی صفحه یا بخش مورد نظر می توان به ابزار دسترسی پیدا کرد. کلاس ها و آی دی هایی که با استفاده از این ابزار به آن ها دست پیدا می کنیم class و id هایی هست که مرورگر آن ها را برمی گرداند. همچنین می توانیم از عناصر دیفالت خود قالب دیوی استفاده نماییم که در این نوشتار ما از همین عناصر استفاده می کنیم و در مقاله ای دیگر به بررسی استفاده از ابزار inspect element نیز خواهیم پرداخت.

همچنن برای درک بهتر ذکر این نکته خالی از لطف نیست که در HTML برای ایجاد لیست نامرتب از ul و برای ایجاد لیست مرتب از ol استفاده می کنیم و برای تعریف آیتم ها یا المان ها در هر دوی آن ها از تگ li استفاده می کنیم.

ویرایش و سفارشی سازی مجموعه ساب منو

قبلا بیان کردیم که مجموعه ساب منو از سه بخش لیست نامرتب، آیتم ها و المان ها و لینک ها تشکیل شده است. حال فرض کنید بخواهیم خصوصیات کلی این مجموعه مانند بک گراند، فاصله از بالا و پایین، border و … (بخش قرمز رنگ در شکل زیر ) را ویرایش و تنظیم نماییم:

سفارشی سازی مجموعه ساب منو

برای این کار از سی اس اس و قطعه کد زیر استفاده می نماییم.

/*edit the Divi submenu*/
.et_pb_menu li ul {
محل درج کدهای سی اس اس
}

حال اگر بخواهیم به عنوان مثال padding را تنظیم یا حذف نماییم از قطعه کد زیر استفاده می کنیم:

padding: 0!important;

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

border-top: none;

همچنین برای تغییر رنگ آن از آبی به قرمز می توانیم از کد زیر استفاده کنیم:

border-top: 3px solid #FF5F4E;

در قطعه کد فوق 3px نشان دهنده میزان ضخامت بوده، solid بیان می کند که border به صورت خط ممتد است و کد FF5F4E هم نماینده رنگ قرمز می باشد.

برای تغییر بک گراند و عرض submenu نیز می توانیم از کد زیر استفاده می کنیم:

background-color: #2cba6c;
width: 300px;

سفارشی کردن آیتم ها و المان های submenu در دیوی

در این بخش به سراغ استایل دهی به آیتم های ساب منو می رویم:

استایل دهی و سفارشی کردن ایتم های ساب منو

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

ابتدا به سراغ آیتم ها در حالت معمولی و سپس در حالت hover می رویم (یاد آوری: هاور کردن (hover) یعنی وقتی با موس روی لینک یا عنصری قرار می گیرید آن عنصر تغییر کند. این تغییر می تواند تغییر رنگ، فونت، بک گراند و … باشد).

ویرایش آیتم ها

برای ویرایش هر یک از آیتم ها از قطعه کد زیر استفاده می کنیم:

/*edit the Divi submenu list items*/
.et_pb_menu li li {
محل درج کدهای سی اس اس
}

حال اگر بخواهیم برای هر یک از آیتم ها مثلا پدینگ، بک گراند یا رنگ و … را تنظیم نماییم می توانیم از کدهای css زیر استفاده کنیم:

padding: 0;
background: #E8F2F6;
border-bottom: 1px solid #EAF2F4;
color: red;

ویرایش آیتم ها در حالت hover

همانگونه که قبلا بیان کردیم hover تغییراتی است که وقتی موس را بر روی هر یک از آیتم ها نگه داریم در آن ها ایجاد می شود. برای اینکه هر یک از آیتم ها را در این حالت نیز سفارشی و ویرایش نماییم از قطعه کد زیر استفاده می کنیم.

/*edit the Divi submenu list items on hover*/
.et_pb_menu li li:hover {
محل درج کدهای سی اس اس
}

همانگونه که در این کد مشخص است تنها تفاوت آن با کد قبلی آن است که کلمه hover با استفاده از دو نقطه به بعد از li اضافه شده است.

حال اگر بخواهیم ویژگی های آیتم ها (یا المان) را در حالت hover تغییر دهیم می توانیم به عنوان نمونه از کدهای زیر استفاده کنیم:

padding: 10px;
background: #fffeee;

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

سفارشی کردن لینک های submenu در قالب دیوی

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

برای ویرایش و سفارشی کردن لینک های submenu در حالت معمولی و نیز hover می توان به ترتیب از قطعه کدهای زیر استفاده کرد:

/*edit the Divi submenu links*/
.et_pb_menu li li a {
محل درج کدهای سی اس اس
}
/*edit the Divi submenu links on hover*/
.et_pb_menu li li a:hover {
محل درج کدهای سی اس اس
}

در ادامه کدهایی به عنوان نمونه آورده شده است (این قطعه کدها در هر دو حالت معمولی و hover قابل استفاده هستند):

padding: 0;
opacity: 1;
background-color: rgba(0,0,0,0);
width: 240px;
color: #2cea8d;

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

جمع بندی

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

لطفا در صورتی که نظر، انتقاد یا سوالی در خصوص مطالب این مقاله دارید آن را با ما و سایر دوستان در بخش دیدگاه ها مطرح نمایید.

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

0 Comments

Submit a Comment

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *