با سلام
بنده برای یک سایتی میخوام مثل لینک زیر منوی آبشاری برای دسته بندی ها اوکی کنم
مدرسه وب ایران ، آموزش طراحی وب
کسی چیزی سراغ داره برای وردپرس میخوام
ممنون
نمایش نسخه قابل چاپ
با سلام
بنده برای یک سایتی میخوام مثل لینک زیر منوی آبشاری برای دسته بندی ها اوکی کنم
مدرسه وب ایران ، آموزش طراحی وب
کسی چیزی سراغ داره برای وردپرس میخوام
ممنون
دوست عزیز
اکثر طراحان بصورت عادی این منو هارو در قالب استفاده می کنند و از پلاگین استفاده نمی کنند !
در وردپرس هرچقدر تعداد افزونه رو بیاریم پایین شاهکار کرده ایم !
آموزش: اولین قدم این است که کد زیر را در محل مورد نظر که می خواهید منوی افقی قرار بگیرد قرار دهید.
<?php wp_list_categories('sort_column=name&sort_order=as c&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=as c&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’);> را به جای آن قرار دهید
البته این به صورت line هستش برای اینکه در سایدبار بتونید ازش استفاده کنید میکتونید فایل استایل رو تغییر بدید
بنده عادی یک چیزی اضافه کردم قالب پرید :دینقل قول:
نوشته اصلی توسط H.G.N
خوب حتما یه جای کار رو اشتباه انجام دادید به خاطر همین از افزونه استفاده کنید راحت تریدنقل قول:
نوشته اصلی توسط CityKala.net
وقت بخیر
شما قالب های که اینوطریند مانند گویا آی تی رو بررسی کنید کد هاشو در قالب خودتون قرار لدید