آموزش قرار دادن منو...
 
آگاه‌سازی‌ها
پاک‌کردن همه

آموزش قرار دادن منوی موضوعات به صورت افقی در سربرگ وردپرس همچون پی سی دانلود


ارسال‌: 524
شروع کننده موضوع
(@hamed)
Honorable Member
عضو شده: 10 سال قبل

توی خیلی از سایت ها و قالب ها در زیر هدر یک نوار گذاشته شده که موضوعات به صورت افقی درون اون قرار دارند تا بازدید کننده راحت تر بتونه به قسمت مورد نظرش بره. این قسمت به این صورت هست که در صورت قرار گرفتن موس روی اون ، یک منوی کشویی میاد پایین که زیر دسته های اون دسته رو نمایش می ده. نمونه ای از این گونه سایت ها رو می تونید توی سایت پی سی دانلود(www.p30download.com) مشاهده کنید. اما برای ساخت این قسمت و خواندن آموزش به ادامه مطلب بروید.

آموزش: اولین قدم این است که کد زیر را در محل مورد نظر که می خواهید منوی افقی قرار بگیرد قرار دهید.


اما اگر می خواهید به این قسمت استایل و زیبایی بدهید می توانید کد زیر را به جای کد بالا قرار دهید.

همچنین می توانید کد سی اس اس زیر را در فایل استایل قالب خود قرار دهید تا به موضوعات خود استایل داده و آن را مرتب کنید.

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;
}

می توانید کد استایل بالا را ویرایش کرده و به شکل دلخواه خود در آورید.

کد های بالا مربوط به مرورگر فایرفاکس بود اما اگر بخواهید این قسمت در مروگری مانند اینترنت اکسپلورر نیز نمایش داده شود باید کد جاوا اسکریپت زیر را در قالب خود بالا تر از تگ قرار دهید:


/*<![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.onmouseout=e.onblur=mbTf;
e.onmouseover=e.onfocus=mbSf;
}

m=m.getElementsByTagName('ul');
for (i=0;i<m.length;i++) {
mbH(mbL(m));
}
}}

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 == 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.style.display=v;
}
/*]]>*/

نکته بسیار مهم: توجه داشته باشید که برای اجرای این منو و موضوعات آن حتما باید تگ قالب خود را به تغییر دهید. یعنی تگ را پاک کرده و عبارت را به جای آن قرار دهید.

اشتراک: