11Μαρ

CSS horizontal menu για το WordPress

, 11 Μαρτίου 2009 | WORDPRESS | 0 Σχόλια

Αρκετές φορές είναι ενδιαφέρον ο τρόπος με τον οποίο μπορούμε να χρησιμοποιήσουμε τα 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 μας.

Σχολιάστε

Back to top

Recent comments

  • Πολυ καλο αθρο πραγματικα!

    Η σωστή αρχιτεκτονική ενός website και τα οφέλη της
  • Πολύ χρήσιμη η λίστα με τα online tools. Ο επιτυχημένος σχεδιασμός μιας ιστοσελίδας βοηθά σε δύο κατευθύνσεις. Η πρώτη είναι ότι βελτιώνει την εμπειρία του επισκέπτη της ιστοσελίδας με συνέπεια ο τελευταίος να βλέπει περισσότερες σελίδες και να μένει περισσότερο χρόνο σε αυτή. Η δεύτερη είναι ότι επειδή ακριβώς βελτιώνονται τα στατιστικά στοιχεία της ιστοσελίδας, όπως το bounce rate, ο μέσος χρόνος παραμονής στην ιστοσελίδα και ο αριθμός των σελίδων ανά επίσκεψη, βελτιώνεται και η κατάταξη της ιστοσελίδας στα οργανικά αποτελέσματα της Google.

    10+1 Χρήσιμα website και on line tools

Latest From Twitter