با سلام
بنده برای یک سایتی میخوام مثل لینک زیر منوی آبشاری برای دسته بندی ها اوکی کنم
مدرسه وب ایران ، آموزش طراحی وب
کسی چیزی سراغ داره برای وردپرس میخوام
ممنون
با سلام
بنده برای یک سایتی میخوام مثل لینک زیر منوی آبشاری برای دسته بندی ها اوکی کنم
مدرسه وب ایران ، آموزش طراحی وب
کسی چیزی سراغ داره برای وردپرس میخوام
ممنون
فناوری اطلاعات پاسارگاد 74-88558318
خیابان قائم مقام فراهانی، خیابان عرفان، شماره 9
(ملاقات با هماهنگی)
(فعالیت مجدد بزودی)
دوست عزیز
اکثر طراحان بصورت عادی این منو هارو در قالب استفاده می کنند و از پلاگین استفاده نمی کنند !
در وردپرس هرچقدر تعداد افزونه رو بیاریم پایین شاهکار کرده ایم !
به زودی ...
آموزش: اولین قدم این است که کد زیر را در محل مورد نظر که می خواهید منوی افقی قرار بگیرد قرار دهید.
<?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 هستش برای اینکه در سایدبار بتونید ازش استفاده کنید میکتونید فایل استایل رو تغییر بدید
شرکت پرتو فرا رایان ، ارائه دهنده سرویس های میزبانی وب ، ثبت دامنه ، نمایندگی هاست و دامنه ، طراحی وب و...
.
PartoData.com [-]
... ,Services : WebHosting , Domain Registration , Reseller , FileHosting [-]
Server Locations : Iran , UK [-]
وقت بخیر
شما قالب های که اینوطریند مانند گویا آی تی رو بررسی کنید کد هاشو در قالب خودتون قرار لدید
امضا بلد نیستم انگشت میزنم
در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)