Notice: wp_deregister_script was called incorrectly. اسکریپتها و شیوهنامهها نباید پیش از wp_enqueue_scripts
، admin_enqueue_scripts
و login_enqueue_scripts
ثبت یا فراخوانی شوند. Please see Debugging in WordPress for more information. (این پیام در نگارش 3.3 افزوده شده است.) in /home/ronakweb/domains/ronakweb.com/public_html/wp-includes/functions.php on line 3190
Warning: Cannot modify header information - headers already sent by (output started at /home/ronakweb/domains/ronakweb.com/public_html/wp-content/themes/ronakweb2/functions.php:289) in /home/ronakweb/domains/ronakweb.com/public_html/wp-includes/feed-rss2.php on line 8
منویی که قصد آموزش ساخت آنرا داریم با نامهای مختلفی شناخته می شود برخی وبمستران آنرا با نام منو آبشاری و یا دسته بندی موضوعی دراپ داون 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; }
توسط آموزش ساخت منو کشویی وردپرس که می توانید برای ایجاد دسته بندی در طراحی قالب وردپرس و رابط کاربری از آن استفاده کنید با تغییر مقادیر اختصاص داده شده به رنگ زمینه، اندازه ها و نوع فونت منو زیباتری متناسب با سایت تان ایجاد کنید. پیش نمایش آنلاین منو کشویی
]]>