Γίνετε μέλος του Dr-blogger στο fb.Απλά πατήστε like από κάτω

photto




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'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}
Related Posts Plugin for WordPress, Blogger...
Print Friendly and PDF

5 σχόλια:

Ανώνυμος είπε...

φίλε όλα καλά όλα ωραία αλλά έχω δυο προβλήματα....θέλω να βάλω άλλο φόντο στο κείμενο που ανοίγει από κάτω...και 2ον όταν βάζω link σε μια λέξη, αποκτάει γκρι φόντο όπως ο τίτλος και μένει μόνο του στην σειρά (το υπόλοιπο κείμενο πάει από κάτω, αντί να συνεχίζει δίπλα στην λέξη.)

pandelees karagiann είπε...

...για τα χρώματα μπορω να καταλαβω και να σου πω να δοκιμασεις να αλαξεις το
background: #e6e6e6;
η το color: #1e1e1e
και για τη κορνίζα το
border: 1px solid #ccc;
δηλ 1px παχιά και το χρωμα #ccc
....για το λινκ δεν νομιζω οτι αλλάζει κάτι...

23 cafe είπε...

Εχεις πραγματα που δεν εχει κανενας και το κυριοτερο οτι δινεις ειναι ΑΠΟΛΥΤΩΣ κατανοητο και σωστο.Νασαι καλα γιατι αυτο προδιαθετει μερακι και χρονο.THANKS

Το παραπανω μενου ειναι αριστο ,θα ηθελα να μου πεις αν γινετε να προσαρμοστει σε οριζοντιο μενου αντι του καθετου .

Σευχαριστω πολυ για ολες τις βοηθειες που δινεις.
Οταν τα χρησιμοποιησω θα σου στειλω λινκ να τα δεις.

Νικος

23 cafe είπε...

Θα περασω το banner σου σε μας γιατι αξιζει να σε δουν περισσοτεροι

Νικος

pandelees karagiann είπε...

23 cafe...σε ευχαριστώ για τα καλά σου λόγια...θα ψάξω να βρω και ένα οριζόντιο...αυτό δεν αλλάζει εύκολα...μελλοντικά, θα ανεβάζω κι ένα οριζόντιο, όπως το θες...