5 Accordion Menu for Blogger

Νέοι bloggers γεια σας...

Σήμερα θα δούμε πως βάζουμε ένα accordion menu, σε μια πλαϊνή στήλη (sidebar) στο blog μας...είναι πολύ "ελαφρύ" (λειτουργεί με CSS3)  και δεν αργοπορεί το άνοιγμα της σελίδας μας...για λίγες μέρες, θα έχω demo, στο blog μου! ...επίσης δείτε demo στο τέλος της ανάρτησης...

Πρώτα απ' όλα πάμε Σχεδίαση => Επεξεργασία HTML  και κρατάμε ένα αντίγραφο του κώδικα της σελίδας μας, πατώντας το "Λήψη πλήρους προτύπου" (μήπως κάνουμε καμία "πατάτα" και το χαλάσουμε)....

Στη συνέχεια με τον γνωστό τρόπο Ctrl+F, (Ctrl-F στα Windows, Cmd-F στο Mac)  ψάχνουμε να βρούμε το :

]]></b:skin>

...και ΑΚΡΙΒΩΣ ΑΠΟ ΠΑΝΩ επικολλάμε   τον παρακάτω κώδικα :

#accordion .item {

    width: 300px;

    height: 30px; /* height = total height of A child element */

    overflow: hidden;

    

    transition: height ease-in-out 500ms; /* css3 transition */

    -o-transition: height ease-in-out 500ms;

    -moz-transition: height ease-in-out 500ms;

    -webkit-transition: height ease-in-out 500ms;

    

    border: 1px solid #ccc;

    border-radius: 5px;

    -moz-border-radius: 5px;

    -webkit-border-radius: 5px;

    

    margin-bottom: 2px;

}

#accordion a {

    display: block;

    height: 20px;

    line-height: 20px;

    

    background: #e6e6e6;

    padding: 5px;

    color: #1e1e1e;

    text-decoration: none;

}

#accordion p {

    height: 150px;

    padding: 5px;

}

#accordion div:hover {

    height: 180px; /* height = total height of A and P child elements */

}

#accordion div:hover a {

    border-bottom: 1px solid #ccc;

    font-weight: bold;

}

***...κάντε μία ΠΡΟΕΠΙΣΚΌΠΙΣΗ, να δείτε αν ανοίγει σωστά το blog σας, και μετά πατήστε ΑΠΟΘΗΚΕΥΣΗ...

Τώρα πηγαίνουμε Σχεδίαση => Προσθήκη Gadget => HTML/Javascript και κάνουμε επικόλληση τον παρακάτω κωδικό:

<div id="accordion">

    <div class="item">

        <a href="#">ΕΔΩ Ο ΤΙΤΛΟΣ</a>

        <p>ΕΔΩ ΤΟ ΚΕΙΜΕΝΟ</p>

    </div>

    <div class="item">

        <a href="#">ΕΔΩ Ο ΤΙΤΛΟΣ</a>

        <p>ΕΔΩ ΤΟ ΚΕΙΜΕΝΟ</p>

    </div>

    <div class="item">

        <a href="#">ΕΔΩ Ο ΤΙΤΛΟΣ</a>

        <p>ΕΔΩ ΤΟ ΚΕΙΜΕΝΟ</p>

    </div>

</div>

*** Μη ξεχάσετε να γράψετε τον τίτλο και το κείμενο σε κάθε κουμπί που θα βάζετε...

***Στον πρώτο κώδικα μπορείτε να κάνετε αλλαγές στο πλάτος , στο ύψος , στο χρώμα του φόντου , στο χρώμα των υπομενού  και πολλά άλλα. 

***Στον δεύτερο κώδικα μπορείτε να κάνετε το κείμενο σας link, βάζοντας τον κώδικα :

<p><a href="Εδώ βάζετε το link του υπομενού">Εδώ βάζετε τον τίτλο του link</a></p>

***Επίσης μπορείτε να βάλετε σε ανάλογες διαστάσεις, εικόνες, φωτογραφίες, η κάποιον κώδικα script, αφαιρώντας το  <p>

ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!

ΠΗΓΗ : deluxeblogtips.com   => DEMO


{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}