ساخت منو کشویی وردپرس با کد html و cssReviewed by SMZ on Mar 31Rating: 3.5ساخت منو کشویی وردپرس با کد html و cssدر هر سایتی برای راهنمایی کاربران جهت دسترسی راحت تر به مطالب مورد نظرشان استفاده از دسته بندی موضوعی استاندارد که جامع و کامل باشد مورد نیاز است معمولا دسته ها را در سربرگ صفحه وب که با نام هدر header می شناسیم و یا ستون کناری sidebar سایت قرار می دهند البته محل قرارگیری منو بستگی به طراحی سایت دارد معمولا در مکانی که دید بیشتری داشته باشد نمایش داده می شود تا بازدیدکنندگان دسترسی راحت تری به آن داشته باشند در این پست از سایت قصد آموزش ساخت منو کشویی وردپرس با کد html و css به صورت استاندارد را داریم می توانید از منو کشویی Dropdown یا آبشاری آموزش داده شده در سایر سیستم های مدیریت محتوای وب مانند: نیوک، جوملا، دروپال، دیتالایف انجین و یا پروژه طراحی سیستم مدیریت محتوای اختصاصی نیز استفاده کنید.

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

 

simple-vertical-css-menu

 

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

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

 

 

همینطور که مشاهده می کنید با استفاده از برچسب لیست نامرتب یا بدون شماره ul و تگ li که نشان دهنده گزینه های لیست می باشد داخل تگ nav که برای شناساندن دسته بندی و منو به موتورهای جستجو مورد استفاده قرار می گیرد لیست را ایجاد کرده ایم برای ساخت زیرمنو نیز دوباره از تگ ul داخل برچسب li استفاده می کنیم. برای زیباتر شدن و ایجاد حالت نمایش زیرمنو در صورت hover هاور شدن ماوس بر روی لینکی که دارای زیرمنو است از کدهای css زیر استفاده می کنیم.