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

  • Ευχαριστούμε για το σχόλιο Ευγενία. Δυστυχώς δεν γνωρίζουμε αν υπάρχει παρόμοια γραμματοσειρά με την ENGLAND HAND στα Ελληνικά.

    10 δωρεάν καλλιγραφικές γραμματοσειρές
  • Πολύ χρήσιμο άρθρο. Ο αλγόριθμος της Google εξελίσσεται και μαζί του και η τέχνη του seo. Θα έλεγα ότι ωθεί τους seo experts σε μια πιο ολιστική προσέγγιση της online παρουσίας των πελατών τους. Αυτο σημαίνει ότι θα πρέπει να εμπλακούν σε θέματα content strategy, branding και social media γιατί η Google συνυπολογίζει όλα αυτά όταν αποφασίζει για το ranking μιας ιστοσελίδας. Ειδικά το content είναι το κλειδί στην νέα εποχή του search engine optimization. Θα πρέπει να δημιουργείται έχοντας στο μυαλό μας κυρίως τον επισκέπτη της ιστοσελίδας μας και λιγότερο τις μηχανές αναζήτησης. Θα πρέπει να προσθέτει πραγματικό value στους αναγνώστες του και ιδεατά να έχει χαρακτηριστικά που να συμβάλλουν στη δημιουργία buzz στα social media. Με τον τρόπο αυτό θα δημιουργηθούν με φυσικό τρόπο

    Google Panda 3.3, Google Venice και 38 επιπλέον αλλαγές στον αλγόριθμο της Google

Latest From Twitter