آموزش ساخت منو کشویی وردپرس با کد 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;
}
توسط آموزش ساخت منو کشویی وردپرس که می توانید برای ایجاد دسته بندی در طراحی قالب وردپرس و رابط کاربری از آن استفاده کنید با تغییر مقادیر اختصاص داده شده به رنگ زمینه، اندازه ها و نوع فونت منو زیباتری متناسب با سایت تان ایجاد کنید. پیش نمایش آنلاین منو کشویی
طراحی سایت در کرج، بهترین طراحی، بهترین شرکت
مراقب کلاه برداری های طراحان وبسایت باشید
معیارهای طراحی سایت حرفه ای چیست
۱۵ نکته مهم و کلیدی که موجب افزایش ترافیک سایت و پربازدید شدن سایتتان می شود.
معرفی ۴ افزونه ویرایشگر متن در وردپرس به همراه قابلیت ویرایش ابزارک متن