CSS horizontal menu για το Wordpress

Μια περιοχή για το WordPress, αυτή την δημοφιλή δωρεάν πλατφόρμα για blogging

Συντονιστές: WebDev Moderators, Super-Moderators, PHP Moderators

Απάντηση
Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

CSS horizontal menu για το Wordpress

Δημοσίευση από Basilakis » 12 Μαρ 2009 15:33

Αρκετές φορές είναι ενδιαφέρον ο τρόπος με τον οποίο μπορούμε να χρησιμοποιήσουμε τα CSS για να εμπλουτίσουμε το Wordpress Template μας. Αυτή τη φορά θα κοιτάξουμε να δημιουργήσουμε ένα horizontal menu για το Wordpress Theme μας.

Πρώτο μας βήμα είναι να ζητήσουμε από το Wordpress να μας δώσει το menu μας. Ο κώδικας που θα χρησιμοποιήσουμε είναι ο παρακάτω:

Κώδικας: Επιλογή όλων

    <?php wp_list_categories&#40;’sort_column=name&sort_order=asc&style=list&children=true&hierarchical=true&title_li=0&#8242;&#41;; ?>
Μετά, προσθέτουμε λίγο HTML για να μπορέσουμε να σχεδιάσουμε το menu μας με τον καλύτερο τρόπο:

Κώδικας: Επιλογή όλων

    <div style="text-align&#58;center;">
    <ul id="menu" style="padding&#58;0; margin&#58;0;">
    <?php wp_list_categories&#40;’sort_column=name&sort_order=asc&style=list&children=true&hierarchical=true&title_li=0&#8242;&#41;; ?>
    </ul>
    </div>
Ο παραπάνω κώδικας προστίθεται στο header.php, αλλά εσείς μπορείτε να το βάλετε όπου θεωρείται καλύτερα!
Το επόμενο βήμα μας τώρα είναι να προσθέσουμε το CSS κώδικα που θα μετατρέψει το menu μας σε horizontal list. Ο κώδικας που βλέπετε παρακάτω μπορεί να αλλαχτεί με της ανάγκες και τα χρώματα κάθε σελίδας.

Κώδικας: Επιλογή όλων

ul#menu &#123;
    margin&#58; 0;
    padding&#58; 0;
    list-style&#58; none;
    width&#58; 100%;
    font-size&#58;1.2em;
    &#125;

    ul#menu li &#123;
    float&#58; left;
    padding&#58; 0;
    margin&#58; 0;
    border-right&#58;solid 1px #fff;
    &#125;

    ul#menu ul li &#123;
    float&#58; none;
    position&#58; relative;
    border-bottom&#58; 1px solid #7EAED7; /* fixes gap problem in IE */
    border-left&#58; 1px solid #FFF;
    z-index&#58;1000;
    &#125;

    ul#menu li ul &#123;
    margin&#58; 0;
    padding&#58; 0;
    display&#58;none;
    list-style&#58; none;
    position&#58; absolute;
    background&#58; #9CC;
    &#125;
    ul#menu ul ul&#123;
    margin-left&#58; .2em;
    position&#58; absolute;
    top&#58; 0; /* if using borders, -1px to align top borders */
    left&#58; 100%;
    &#125;

    ul#menu * a&#58;hover, ul#menu li a&#58;active&#123;
    background&#58;#7EAED7 !important;
    color&#58; #FFFFFF;
    &#125;

    ul#menu li a&#58;link,
    ul#menu li a&#58;visited,
    ul#menu li a&#58;hover,
    ul#menu li a&#58;active&#123;
    display&#58; block;
    padding&#58; .2em .3em;
    text-decoration&#58; none;
    background&#58; #5587B3;
    color&#58; #FFFFFF;
    &#125;

    ul#menu ul li a&#58;link,
    ul#menu ul li a&#58;visited,
    ul#menu ul li a&#58;hover,
    ul#menu ul li a&#58;active &#123;
    width&#58; 8em;
    &#125;
Δεν έχουμε τελειώσει εδώ όμως. Δυστυχώς επειδή ο Internet Explorer δεν αναγνωρίζει pseudo &#8211; hover classes θα πρέπει να χρησιμοποιήσουμε λίγο Javascript για να γίνει το menu μας συμβατό με όλους τους browsers.

Κώδικας: Επιλογή όλων

<script type="text/javascript">
    /*<!&#91;CDATA&#91;*/

    var mbA,mbT,mbTf,mbSf;
    var mbR = &#91;&#93;;

    function mbSet&#40;m&#41; &#123;
    if &#40;document.getElementById&&document.createElement&#41; &#123;
    var m=document.getElementById&#40;m&#41;;
    mbR&#91;mbR.length&#93; = m;
    var i;

    e=m.getElementsByTagName&#40;’a’&#41;;
    if &#40;!mbTf&#41; mbTf=new Function&#40;’mbHT&#40;&#41;;’&#41;;
    if &#40;!mbSf&#41; mbSf=new Function&#40;’mbS&#40;this&#41;;’&#41;;
    for &#40;i=0;i<e.length;i++&#41; &#123;
    e&#91;i&#93;.onmouseout=e&#91;i&#93;.onblur=mbTf;
    e&#91;i&#93;.onmouseover=e&#91;i&#93;.onfocus=mbSf;
    &#125;

    m=m.getElementsByTagName&#40;’ul’&#41;;
    for &#40;i=0;i<m.length;i++&#41; &#123;
    mbH&#40;mbL&#40;m&#91;i&#93;&#41;&#41;;
    &#125;
    &#125;&#125;

    function mbHA&#40;&#41; &#123;
    if &#40;mbA&#41; &#123;
    while &#40;mbA&#41; mbH&#40;mbA&#41;;
    mbHE&#40;’block’&#41;;
    &#125;
    &#125;

    function mbHT&#40;&#41; &#123;
    if &#40;!mbT&#41; mbT=setTimeout&#40;’mbHA&#40;&#41;;’, 0&#41;;
    &#125;

    function mbTC&#40;&#41; &#123;
    if &#40;mbT&#41; &#123;
    clearTimeout&#40;mbT&#41;;
    mbT=null;
    &#125;
    &#125;

    function mbS&#40;m&#41; &#123;
    mbTC&#40;&#41;;
    if &#40;mbA&#41; while &#40;mbA&&m!=mbA&&mbP&#40;m&#41;!=mbA&#41; mbH&#40;mbA&#41;;
    else mbHE&#40;’none’&#41;;

    if &#40;mbM&#40;m&#41;&#41; &#123;
    mbSH&#40;m,’block’&#41;;
    mbA=m;
    &#125;
    &#125;

    function mbH&#40;m&#41; &#123;
    if &#40;m==mbA&#41; mbA=mbP&#40;m&#41;;
    mbSH&#40;m,’none’&#41;;
    mbT=null;
    &#125;

    function mbL&#40;m&#41; &#123;
    while &#40;m && m.tagName != ‘A’&#41; m = m.previousSibling;
    return m;
    &#125;

    function mbM&#40;l&#41; &#123;
    while &#40;l && l.tagName != ‘UL’&#41; l = l.nextSibling;
    return l;
    &#125;

    function mbP&#40;m&#41; &#123;
    var p = m.parentNode.parentNode;
    if &#40;p.tagName == ‘UL’&#41; &#123;
    var i = 0;
    while &#40;i <mbR.length&#41; &#123;
    if &#40;mbR&#91;i&#93; == p&#41; return null;
    i++;
    &#125;
    &#125; else &#123;
    return null;
    &#125;
    return mbL&#40;p&#41;;
    &#125;

    function mbSH&#40;m,v&#41; &#123;
    m.className=v;
    mbM&#40;m&#41;.style.display=v;
    &#125;

    function mbHE&#40;v&#41; &#123;
    mbHEV&#40;v,document.getElementsByTagName&#40;’select’&#41;&#41;;
    &#125;

    function mbHEV&#40;v,e&#41; &#123;
    for &#40;var i=0;i<e.length;i++&#41; e&#91;i&#93;.style.display=v;
    &#125;
    /*&#93;&#93;>*/
    </script>
Για να ενεργοποιήσετε το menu το <body> tag σας κάντε το <body onload="mbSet(’menu’);>

ALR
Honorary Member
Δημοσιεύσεις: 1712
Εγγραφή: 09 Απρ 2005 17:30

CSS horizontal menu για το Wordpress

Δημοσίευση από ALR » 01 Απρ 2009 16:01

Πολύ καλό, thanks! :)

Δεν είδα όμως κάπου να καλύπτεται το τι γίνεται όταν βρισκόμαστε σε current state.

Πως προσθέτουμε δηλαδή το .current class στο μενού μας, ώστε να μπορούμε να τoυ δίνουμε τα επιθυμητά εφε.
Γίνονται πραγματάκια

Απάντηση

Επιστροφή στο “WordPress γενικά”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες