برای اولین پست برای وب سایت آموزش قرار دادن هیدر(هدر) کشویی یا هیدر آبشاری drop down menu را برای سیستم وردپرس گذاشتم.نمونه ی این هیدر سربرگ وب سایت خودم هستش.این هیدر در همه مرور گره به درستی بدون هیچ نوع کد اضافی کار می کند.
ابتدا متد زیر را به شیوه نامه یا استایل خود اضافه کنید.
/* ------- body۲ ------- */
.body۲ {width: ۹۶۰px;margin: ۵px auto;color: #۶۶۶;text-align:right;font-family:BYekan, Tahoma;
font-size:۱۳px;}
a {color: #۳۳۳;}
#nav {margin: ۰;padding: ۷px ۶px ۰;background: #۷d۷d۷d url(images/gradient.png) repeat-x ۰ -۱۳۰px;line-height: ۱۰۰%;border-radius: ۲em;
-webkit-border-radius: ۲em;
-moz-border-radius: ۲em;
-webkit-box-shadow: ۰ ۱px ۳px rgba(۰,۰,۰, .۴);
-moz-box-shadow: ۰ ۱px ۳px rgba(۰,۰,۰, .۴);
}
#nav li {margin: ۰ ۵px;padding: ۰ ۰ ۸px;float: right;position: relative;list-style: none;}
/* main level link */
#nav a {font-weight: bold;color: #e۷e۵e۵;text-decoration: none;display: block;padding: ۸px ۲۰px;margin: ۰;
-webkit-border-radius: ۱.۶em;
-moz-border-radius: ۱.۶em;
text-shadow: ۰ ۱px ۱px rgba(۰,۰,۰, .۳);
}
#nav a:hover {background: #۰۰۰;color: #fff;}
/* main level link hover */
#nav .current a, #nav li:hover > a {background: #۶۶۶ url(images/gradient.png) repeat-x ۰ -۴۰px;color: ۳۷badc;
-webkit-box-shadow: ۰ ۱px ۱px rgba(۰,۰,۰, .۲);
-moz-box-shadow: ۰ ۱px ۱px rgba(۰,۰,۰, .۲);
box-shadow: ۰ ۱px ۱px rgba(۰,۰,۰, .۲);
text-shadow: ۰ ۱px ۰ rgba(۲۵۵,۲۵۵,۲۵۵, ۱);
}
/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {background: none;border: none;color: #۶۶۶;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#nav ul a:hover {
background: #۰۰۷۸ff url(images/gradient.png) repeat-x ۰ -۱۰۰px !important; color: #fff !important;
-webkit-border-radius: ۰;
-moz-border-radius: ۰;
text-shadow: ۰ ۱px ۱px rgba(۰,۰,۰, .۱);
}
/* dropdown */
#nav li:hover > ul {display: block;}
/* level ۲ list */
#nav ul {display: none;margin: ۰;padding: ۰;width: ۱۸۵px;position: absolute;top: ۳۵px;left: ۰;background: #ddd url(images/gradient.png) repeat-x ۰ ۰;border: solid ۱px #b۴b۴b۴;
-webkit-border-radius: ۱۰px;
-moz-border-radius: ۱۰px;
border-radius: ۱۰px;
-webkit-box-shadow: ۰ ۱px ۳px rgba(۰,۰,۰, .۳);
-moz-box-shadow: ۰ ۱px ۳px rgba(۰,۰,۰, .۳);
box-shadow: ۰ ۱px ۳px rgba(۰,۰,۰, .۳);
}
#nav ul li {float: none;margin: ۰;padding: ۰;}
#nav ul a {font-weight: normal;text-shadow: ۰ ۱px ۰ #fff;}
/* level ۳+ list */
#nav ul ul {left: ۱۸۱px;top: -۳px;}
/* rounded corners of first and last link */
#nav ul li:first-child > a {
-webkit-border-top-left-radius: ۹px;
-moz-border-radius-topleft: ۹px;
-webkit-border-top-right-radius: ۹px;
-moz-border-radius-topright: ۹px;
}
#nav ul li:last-child > a {
-webkit-border-bottom-left-radius: ۹px;
-moz-border-radius-bottomleft: ۹px;
-webkit-border-bottom-right-radius: ۹px;
-moz-border-radius-bottomright: ۹px;
}
/* clearfix */
#nav:after {content: ".";display: block;clear: both;visibility: hidden;line-height: ۰;height: ۰;}
#nav {display: inline-block;}
html[xmlns] #nav {display: block;}
* html #nav {height: ۱%;}
سپس به برگ header.php رفته و کد زیر را در هر جایی که می خواهید سر منوی کشویی یا همون آبشاری نمایش داده بشه اضافه کنید.
<div class="body۲">
<ul id="nav">
<li><a href="#">صفحه اصلی</a></li>
<li><?php wp_list_cats('sort_column=NAME&optioncount=۰&hierarchical=۱'); ?></li>
<li><a href="#">درباره ما</a></li>
<li><a href="#">تماس با ما</a></li>
</ul></div>
فقط این نکته رعایت شود که این کد در زیر <body> باید قرار گیرد.
کد زیر
<?php wp_list_cats('sort_column=NAME&optioncount=۰&hierarchical=۱'); ?>
موضوعات مطالب شما را به صورت خودکار و آبشاری تنظیم می کند.اگر دوست داشتین آن را بردارید و لینک های خودتان را قرار دهید.در ضمن می توانید با ویرایش شیوه نامه ظاهر منو را هم به شکل دلخواه تغییر دهید.