افراد آنلاين : 6
دسته بندی:
بازدید:461
توی خیلی از سایت ها و قالب ها در زیر هدر یک نوار گذاشته شده که موضوعات به صورت افقی درون اون قرار دارند تا بازدید کننده راحت تر بتونه به قسمت مورد نظرش بره. این قسمت به این صورت هست که در صورت قرار گرفتن موس روی اون ، یک منوی کشویی میاد پایین که زیر دسته های اون دسته رو نمایش می ده. نمونه ای از این گونه سایت ها رو می تونید توی سایت پی سی دانلود(www.p30download.com) مشاهده کنید. اما برای ساخت این قسمت و خواندن آموزش به ادامه مطلب بروید.
آموزش: اولین قدم این است که کد زیر را در محل مورد نظر که می خواهید منوی افقی قرار بگیرد قرار دهید.
<?php wp_list_categories('sort_column=name&sort_order=asc&style=list&children=true&hierarchical=true&title_li=0'); ?>
اما اگر می خواهید به این قسمت استایل و زیبایی بدهید می توانید کد زیر را به جای کد بالا قرار دهید.
<div style="text-align:center;">
<ul id="menu" style="padding:0; margin:0;">
<?php wp_list_categories('sort_column=name&sort_order=asc&style=list&children=true&hierarchical=true&title_li=0'); ?>
</ul>
</div>
همچنین می توانید کد سی اس اس زیر را در فایل استایل قالب خود قرار دهید تا به موضوعات خود استایل داده و آن را مرتب کنید.
ul#menu {
margin: 0;
padding: 0;
list-style: none;
width: 100%;
font-size:1.2em;
}
ul#menu li {
float: left;
padding: 0;
margin: 0;
border-right:solid 1px #fff;
}
ul#menu ul li {
float: none;
position: relative;
border-bottom: 1px solid #7EAED7; /* fixes gap problem in IE */
border-left: 1px solid #FFF;
z-index:1000;
}
ul#menu li ul {
margin: 0;
padding: 0;
display:none;
list-style: none;
position: absolute;
background: #9CC;
}
ul#menu ul ul{
margin-left: .2em;
position: absolute;
top: 0; /* if using borders, -1px to align top borders */
left: 100%;
}
ul#menu * a:hover, ul#menu li a:active{
background:#7EAED7 !important;
color: #FFFFFF;
}
ul#menu li a:link,
ul#menu li a:visited,
ul#menu li a:hover,
ul#menu li a:active{
display: block;
padding: .2em .3em;
text-decoration: none;
background: #5587B3;
color: #FFFFFF;
}
ul#menu ul li a:link,
ul#menu ul li a:visited,
ul#menu ul li a:hover,
ul#menu ul li a:active {
width: 8em;
}
می توانید کد استایل بالا را ویرایش کرده و به شکل دلخواه خود در آورید.
کد های بالا مربوط به مرورگر فایرفاکس بود اما اگر بخواهید این قسمت در مروگری مانند اینترنت اکسپلورر نیز نمایش داده شود باید کد جاوا اسکریپت زیر را در قالب خود بالا تر از تگ </head> قرار دهید:
<script type="text/javascript">
/*<![CDATA[*/
var mbA,mbT,mbTf,mbSf;
var mbR = [];
function mbSet(m) {
if (document.getElementById&&document.createElement) {
var m=document.getElementById(m);
mbR[mbR.length] = m;
var i;
e=m.getElementsByTagName('a');
if (!mbTf) mbTf=new Function('mbHT();');
if (!mbSf) mbSf=new Function('mbS(this);');
for (i=0;i<e.length;i++) {
e[i].onmouseout=e[i].onblur=mbTf;
e[i].onmouseover=e[i].onfocus=mbSf;
}
m=m.getElementsByTagName('ul');
for (i=0;i<m.length;i++) {
mbH(mbL(m[i]));
}
}}
function mbHA() {
if (mbA) {
while (mbA) mbH(mbA);
mbHE('block');
}
}
function mbHT() {
if (!mbT) mbT=setTimeout('mbHA();', 0);
}
function mbTC() {
if (mbT) {
clearTimeout(mbT);
mbT=null;
}
}
function mbS(m) {
mbTC();
if (mbA) while (mbA&&m!=mbA&&mbP(m)!=mbA) mbH(mbA);
else mbHE('none');
if (mbM(m)) {
mbSH(m,'block');
mbA=m;
}
}
function mbH(m) {
if (m==mbA) mbA=mbP(m);
mbSH(m,'none');
mbT=null;
}
function mbL(m) {
while (m && m.tagName != 'A') m = m.previousSibling;
return m;
}
function mbM(l) {
while (l && l.tagName != 'UL') l = l.nextSibling;
return l;
}
function mbP(m) {
var p = m.parentNode.parentNode;
if (p.tagName == 'UL') {
var i = 0;
while (i <mbR.length) {
if (mbR[i] == p) return null;
i++;
}
} else {
return null;
}
return mbL(p);
}
function mbSH(m,v) {
m.className=v;
mbM(m).style.display=v;
}
function mbHE(v) {
mbHEV(v,document.getElementsByTagName('select'));
}
function mbHEV(v,e) {
for (var i=0;i<e.length;i++) e[i].style.display=v;
}
/*]]>*/
</script>
نکته بسیار مهم: توجه داشته باشید که برای اجرای این منو و موضوعات آن حتما باید تگ <body> قالب خود را به <body onload=”mbSet(’menu’);> تغییر دهید. یعنی تگ <body> را پاک کرده و عبارت <body onload=”mbSet(’menu’);> را به جای آن قرار دهید.
سوالات خود را در قسمت نظرات مطرح کنید.
نوشته توسط جواد در تاریخ چهارشنبه ,۲۰ مهر , ۱۳۹۰ 
سلام این کدهارو کجا باید بزاریم یعنی توی کدوم فایل پی اچ پی
سلام
باید توی فایل header.php قالب قسمتی که می خواهید منوی موضوعات به نمایش در آید قرار دهید
موفق باشید
سلام
این تگ کجاست
دوست عزیز من هر کاری میکنم نمی تونم باز نمی دونم آیا کد شما ناقصه یا عقل من دی :
متنم اصلاً استایل نمی گیره . تو رو خدا کمکم کن
سلام
شما نکته آخر پست رو خوندید؟
احتمالا باید مشکل از اونجا باشه
ولی اگه اونم نبود باید توی کد های CSS که بالا قرار دادم تغییرات ایجاد کنید. بستگی داره به این که می خواید به چه قسمتی استایل بدید و با توجه به اون قسمت مورد نظر رو ویرایش کنید. اگه ممکنه آدرس سایت رو لطف کنید و کد هم درون سایت باشه تا ببینم مشکلش چیه.
موفق باشید
مرسی