CSS horizontal menu για το WordPress
Αρκετές φορές είναι ενδιαφέρον ο τρόπος με τον οποίο μπορούμε να χρησιμοποιήσουμε τα CSS για να εμπλουτίσουμε το WordPress Template μας. Αυτή τη φορά θα κοιτάξουμε να δημιουργήσουμε ένα horizontal menu για το WordPress Theme μας.
Πρώτο μας βήμα είναι να ζητήσουμε από το WordPress να μας δώσει το menu μας. Ο κώδικας που θα χρησιμοποιήσουμε είναι ο παρακάτω:
<?php wp_list_categories(‘sort_column=name&sort_order=asc&style=list&children=true&hierarchical=true&title_li=0′); ?>
Μετά, προσθέτουμε λίγο HTML για να μπορέσουμε να σχεδιάσουμε το menu μας με τον καλύτερο τρόπο:
<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>
Ο παραπάνω κώδικας προστίθεται στο header.php, αλλά εσείς μπορείτε να το βάλετε όπου θεωρείται καλύτερα!
Το επόμενο βήμα μας τώρα είναι να προσθέσουμε το CSS κώδικα που θα μετατρέψει το menu μας σε horizontal list. Ο κώδικας που βλέπετε παρακάτω μπορεί να αλλαχτεί με της ανάγκες και τα χρώματα κάθε σελίδας.
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;
}
Δεν έχουμε τελειώσει εδώ όμως. Δυστυχώς επειδή ο Internet Explorer δεν αναγνωρίζει pseudo – hover classes θα πρέπει να χρησιμοποιήσουμε λίγο Javascript για να γίνει το menu μας συμβατό με όλους τους browsers.
<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>
Για να ενεργοποιήσετε το menu το <body> tag σας κάντε το <body onload=”mbSet(’menu’);>
ΧΡΗΣΙΜΗ ΠΛΗΡΟΦΟΡΙΑ: Το άρθρο CSS horizontal menu για το WordPress γράφτηκε από το WebDesignBlog. Η ομάδα μας σας υπενθυμίζει πως αν θέλετε να ενημερώνεστε για τα νέα του διαδικτύου και για επιλεγμένα άρθρα μας, μπορείτε να γραφτείτε εύκολα στο Newsletter μας ή στο RSS Feed μας.
