ساخت منو کشویی وردپرس با کد html و css

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

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

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

<nav id="menu2">
<ul>
<li><a href="">سیستم عامل</a>
    <ul>
        <li><a href="">نرم افزار</a></li>
        <li><a href="">نرم افزار</a></li>
        <li><a href="">نرم اندروید</a></li>
        <li><a href="">نرم موبایل</a></li>
        <li><a href="">نرم افزار قدیمی</a></li>
        <li><a href="">نرم افزار حرفه ای</a></li>
        <li><a href="">نرم افزار جدید</a></li>
        <li><a href="">نرم افزار خوب</a></li>
        <li><a href="">نرم افزار</a></li>
        <li><a href="">نرم افزار</a></li>
        <li><a href="">نرم افزار</a></li>
        <li><a href="">نرم افزار</a></li>
        <li><a href="">نرم افزار</a></li>
    </ul>
</li>
</ul>
</nav>

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

#menu2{width: 100% !important;}
#menu2 ul{
  width: 100%;
  height: 30px;
  list-style-type: none;
  margin: 8px auto;
  z-index: 1000;
}
#menu2 ul li{float: right;width:auto;height: 30px;margin: 0;}
#menu2 ul li a::after{
  content: '|';
  width: 1px;
  height: 20px;
  float: left;
  margin: 2px 6px 2px 0;
  color: #c6c6c6;
}
#menu2 ul li ul li a::after{content: '';}
#menu2 ul li:last-child a::after{content: '';}
#menu2 ul li ul li{background: none;}
#menu2 ul li a{
  font-size: 12px;
  line-height: 30px;
  color: #767676;
  padding: 0 8px;
  display: block;
  list-style-type: none;
  transition: all 0.5s;
}
#menu2 ul li a:hover{
  color: #ef3f3e;
  transition: all 0.5s;
}
#menu2 ul li ul{
  z-index: 1000;
  position: absolute;
  display: none;
  width: 380px;
  height: auto;
  border: 1px solid #c3bdb2;
  background: #f5f5f5;
  list-style-type: none;
  transition: all 0.5s;
}
#menu2 ul li:hover ul{
  display: block;
}
#menu2 ul li ul li{
  width: 190px;
  height: auto;
  display: block;
  border-bottom: 1px solid #d0d0d0;
  transition: all 0.5s;
}
#menu2 ul li ul li a{
  width: 185px;
  color: #333;
  height: auto;
  display: block;
  padding: 0;
  font-size: 11px;
  margin: 1px auto;
  text-indent: 8px;
  transition: all 0.5s;
}
#menu2 ul li ul li a:hover{
  background: #515d6e;
  color: #fff;
  transition: all 0.5s;
}