کمک وردپرس

آموزش ساخت منو آبشاری با CSS در وردپرس

5
Sending
امتیاز کاربران
5 (4 امتیاز)

عرض سلام خدمت همراهان گرامی مکانیک وردپرس ؛
در این نوشته از آموزش وردپرس، به مبحثی متفاوت پرداختیم، یعنی آموزش ساخت منو آبشاری با CSS در وردپرس.
شاید در نگاه اول ایجاد منوهای DropDown کمی پیچیده به نظر بیاید ولی در این آموزش متوجه خواهید شد که ساختن این منوها فقط با به کار گیری استایلهای ساده CSS امکان پذیر بوده و در واقع ساخت این نوع منوها نیاز به انجام هیچ عمل پیچیده ای ندارد.

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

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

در مخزن وردپرس، افزونه هایی وجود دارند که با استفاده از آنها میتوانید در استی خود، منوهای دراپ ایجاد کنید. مانند تصویر زیر:

آموزش ساخت منو آبشاری با CSS در وردپرس

منوی آبشاری که امروز ایجاد میکنیم (و تقریبا هر منوی کشوی دیگری که هر روز در سایت های مختلف مشاهده میکنید) از لحاظ کد HTML ساختار بسیار ساده ای دارند. برای ایجاد این نوع منو ها عموما از تگ های ul و li استفاده میشود. ما هم در ساختار منوی خود از همین کدنویسی پیروی میکنیم. البته ما اینجا یک کار دیگر هم انجام میدهیم. کل ناحیه منو را با تگ nav که از تگ های html5 و مخصوص منوهای ناوبری است، احاطه میکنیم تا محل قرارگیری منو از لحاظ ساختار کدنویسی، کاملا مشخص باشد. در این حالت یک منوی ساده تک مرحله ای (فاقد هر نوع زیرمنو) دارای ساختاری مشابه زیر خواهد بود:

فکر میکنم نیازی به توضیح نباشد که کد بالا فقط یک مثال است و آیتم های منو میتوانند با توجه به نیاز شما متفاوت باشند. همچنین در کد بالا بجای لینک دلخواه در تگ a از نامبرساین یا # استفاده کرده ایم که شما میبایست آن را با لینک دلخواه خود جایگزین کنید.

تا اینجا کدی که ما در اختیار داریم تنها حاوی سطح اول منوهای ماست. حال برای اینکه بتوانیم به آیتم های دلخواه منو، زیر منو اضافه کنیم، کافی است دقیقا با پیروی از همان ساختار یک بلاک کامل ul و li به آیتم منوی دلخواهمان اضافه کنیم تا آیتم مورد نظر دارای زیر منو شود. به عنوان مثال حالا میخواهیم سه زیرمنوی “وردپرس، جوملا و متفرقه” را به آیتم منوی آموزش ها اضافه کنیم. در این حالت کد ما به شکل زیر در می آید:

بیشتر بخوانید :  ایجاد ماشین حساب داینامیک در وردپرس با Calculated Fields Form

همانطور که مشاهده میکنید یک بلاک ul کامل به تگ li مربوط به آیتم آموزش ها اضافه کرده ایم. مجددا به همین ترتیب میتوانیم به زیرمنوی متفرقه هم دو زیرمنوی دیگر اضافه کنیم:

همانطور که مشاهده میکنید، حالا ما یک منوی سه سطحی داریم.

بیشتر بخوانید :  آموزش استفاده از Child Theme در وردپرس

حالا که نوشتن کد html منوی کشویی ما به پایان رسیده، نوبت به نوشتن استایلهای CSS آن میرسد. در اینجا اولین قدم ما این است که کاری کنیم که اولا در حالت عادی، فقط آیتم های اصلی منو به نمایش در بیایند و دوما، هرگاه ماوس بر روی سردسته منویی قرار میگیرد که دارای زیرمنو است، زیرمنو های آن به نمایش گذاشته شوند. برای این کار کد زیر را به استایل های css خود اضافه میکنیم:

در خط اول ابتدا ul های فرزند را نشانه گرفته ایم و گفته ایم که این ul ها باید مخفی شوند. سپس در خط ۵ ام با استفاده از علامت < مشخص کرده ایم که استایل نوشته شده در این بخش فقط مربوط به ul ای است که در حال حاضر ماوس بر روی تگ والد آن قرار گرفته. این کار را به این دلیل انجام دادیم که از به نمایش گذاشته شدن همزمان همه ul های فرزند در زمان قرارگیری ماوس روی یکی از سرمنوها جلوگیری شود. (این مورد را میتوانید خودتان تست کنید تا دقیقا متوجه تاثیر قراردادن علامت بزرگتر در این بخش بشوید. چرا که در صورت عدم موجود بودن این علامت، وقتی ماوس را روی یکی از منوهای دارای زیرمنو قرار میدهید، کلیه سطوح زیرین آن با هم به نمایش در خواهند آمد که این مسئله برای ما ایده آل نیست)

در ادامه تصمیم داریم نحوه نمایش و رنگ منو را تعیین کنیم:

در اینجا یکی از بخش های مهم استفاده از position : relative برای منو است. انتخاب پوزیشن در حالت relative به ما اجازه میدهد که بعدا محل قرارگیری آیتم های زیرمنو را با توجه به آیتم های راس منو مرتب کنیم.

سپس نوبت به تعریف استایل های آیتم های رده اول منو میرسد:

در ابتدا محل شناوری آیتم li را بر روی right تنظیم کرده ایم تا آیتم های منو در کنار هم از راست به چپ و متناسب با زبان فارسی نشان داده شوند. و سپس در خط هفتم مشخص کرده ایم که در زمان قرارگیری ماوس روی یکی از آیتم های منو، پس زمینه آن به چه رنگی در بیاید. و در بخش بعدی نیز رنگ لینک های تگ a را در زمان شناور شدن ماوس روی آنها مشخص کرده ایم.

بیشتر بخوانید :  معرفی و بررسی پسوند های دامنه و تاثیر آنها در سئو

تا اینجا آیتم های رده اول منو دارای استایل های مناسب هستند. حالا نوبت آیتم های سطح دوم منو است. باید برای این آیتم ها هم استایل های مناسبی تعریف کنیم:

استایل هایی که در این بخش تعریف کرده ایم در واقع استایلهای ساده ای هستند. در خط پنجم حالت absolute را برای قرارگیری ul های زیرمنو تعریف کرده ایم تا بتوانیم موقعیت آنها را نسبت به آیتم والد تعیین کنیم. همانطور که مشاهده میکنید این کار را با تعیین فاصله ۱۰۰ درصد از بالا و ۰ از سمت راست انجام داده ایم. سپس برای زیبایی بیشتر، عرض زیرمنو را نیز تعیین کرده ایم. طبعا این مقدار را میتوانید با توجه به نیاز خود تغییر دهید.

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

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

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

اکنون زمان مشاهده نتیجه است:

منو در وردپرس

پیشنهاد: همچنین میتوانید آموزش کاربرد html در وردپرس را مطالعه کنید.
موفق و پاینده باشید…

مطالب زیر را حتما مطالعه کنید
نظرات و دیدگاه ها
  • نظرات ارسال شده توسط شما، پس از تایید توسط مدیران سایت منتشر خواهد شد
  • نظراتی که حاوی تهمت یا افترا باشد منتشر نخواهد شد
  • نظراتی که به غیر از زبان فارسی یا غیر مرتبط با مطلب باشد منتشر نخواهد شد

هنوز دیدگاهی منتشر نشده است