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

persiangn · Aug 12, 2012

آموزش قرار دادن هیدر(هدر) کشویی یا هیدر آبشاری drop down menu را برای سیستم وردپرس گذاشتم.نمونه ی این هیدر سربرگ وب سایت خودم هستش.این هیدر در همه مرور گره به درستی بدون هیچ نوع کد اضافی کار می کند.

۱-ابتدا شیوه نامه زیر را به شیوه نامه یا استایل خود اضافه کنید.

PHP:

/* ------- body2 ------- */.body2 {width: 960px;margin: 5px auto;color: #666;text-align:right;font-family:BYekan, Tahoma;font-size:13px;}a {color: #333;}#nav {margin: 0;padding: 7px 6px 0;background: #7d7d7d url(images/gradient.png)repeat-x 0 -130px;line-height: 100%;border-radius: 2em; -webkit-border-radius: 2em; -moz-border-radius: 2em; -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4); -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);}#nav li {margin: 0 5px;padding: 0 0 8px;float: right;position: relative;list-style: none;}/* main level link */#nav a {font-weight: bold;color: #e7e5e5;text-decoration: none;display:block;padding: 8px 20px;margin: 0; -webkit-border-radius: 1.6em; -moz-border-radius: 1.6em; text-shadow: 0 1px 1px rgba(0,0,0, .3);}#nav a:hover {background: #000;color: #fff;}/* main level link hover */#nav .current a, #nav li:hover > a {background: #666 url(images/gradient.png)repeat-x 0 -40px;color: 37badc; -webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2); -moz-box-shadow: 0 1px 1px rgba(0,0,0, .2); box-shadow: 0 1px 1px rgba(0,0,0, .2); text-shadow: 0 1px 0 rgba(255,255,255, 1);}/* sub levels link hover */#nav ul li:hover a, #nav li:hover li a {background: none;border: none;color:#666; -webkit-box-shadow: none; -moz-box-shadow: none;}#nav ul a:hover { background: #0078ff url(images/gradient.png) repeat-x 0 -100px !important;color: #fff !important; -webkit-border-radius: 0; -moz-border-radius: 0; text-shadow: 0 1px 1px rgba(0,0,0, .1);}/* dropdown */#nav li:hover > ul {display: block;}/* level 2 list */#nav ul {display: none;margin: 0;padding: 0;width: 185px;position:absolute;top: 35px;left: 0;background: #ddd url(images/gradient.png) repeat-x 00;border: solid 1px #b4b4b4; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3); -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3); box-shadow: 0 1px 3px rgba(0,0,0, .3);}#nav ul li {float: none;margin: 0;padding: 0;}#nav ul a {font-weight: normal;text-shadow: 0 1px 0 #fff;}/* level 3+ list */#nav ul ul {left: 181px;top: -3px;}/* rounded corners of first and last link */#nav ul li:first-child > a { -webkit-border-top-left-radius: 9px; -moz-border-radius-topleft: 9px; -webkit-border-top-right-radius: 9px; -moz-border-radius-topright: 9px;}#nav ul li:last-child > a { -webkit-border-bottom-left-radius: 9px; -moz-border-radius-bottomleft: 9px; -webkit-border-bottom-right-radius: 9px; -moz-border-radius-bottomright: 9px;}/* clearfix */#nav:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}#nav {display: inline-block;}html[xmlns] #nav {display: block;}* html #nav {height: 1%;}

سپس به برگ header.php رفته و کد زیر را در هر جایی که می خواهید سر منوی کشویی یا همون آبشاری نمایش داده بشه اضافه کنید.

PHP:

<div class="body2"><ul id="nav"><li><a href="#">صفحه اصلی</a></li><li><?php wp_list_cats('sort_column=NAME&optioncount=0&hierarchical=1'); ?></li><li><a href="#">درباره ما</a></li><li><a href="#">تماس با ما</a></li></ul></div>

فقط این نکته رعایت شود که این کد در زیر <body> باید قرار گیرد.

کد

PHP:

<?php wp_list_cats('sort_column=NAME&optioncount=0&hierarchical=1'); ?>

موضوعات مطالب شما را به صورت خودکار و آبشاری تنظیم می کند.اگر دوست داشتین آن را بردارید و لینک های خودتان را قرار دهید.در ضمن می توانید با ویرایش شیوه نامه ظاهر منو را هم به شکل دلخواه تغییر دهید.

امیدوارم به عنوان اولین مطلب سایتم به درد شما خورده باشه!

منبع آموزش ساخت منوی کشویی برای وردپرس www.picor.ir