Κάθετο Menu Bar στο Blog σας


Ένα όμορφο κατακόρυφο menu bar έχω να σας δείξω σήμερα. Είναι πολύ εξυπηρετικό και το κυριότερο είναι ότι δεν χρειάζεται επεξεργασία του Html κωδικού. Μπαίνει απλά σαν widget στην sidebar του blog.
Επίσης μπορείτε να αλλάξετε τα χρώματά του, προσαρμόζοντάς τα με τα δικά σας γούστα, έτσι ώστε να ταιριάζει χρωματικά με το blog του καθενός.
Παρακάτω θα σας δείξω ποιό χρώμα αντιστοιχεί στον ανάλογο κωδικό.

Ο κωδικός του είναι αυτός.




<style type="text/css">

#ddblueblockmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}

#ddblueblockmenu{
border: 1px solid #000000;
border-bottom-width: 0;
width: 100%;
}

#ddblueblockmenu a{
display: block;
padding: 3px 0;
padding-left: 9px;
width: 94%; /*94% minus all left/right paddings and margins*/
text-decoration: none;
color: #ffffff;
background-color: #2175bc;
border-bottom: 1px solid #90bade;
border-left: 7px solid #1958b7;
list-style-type:none;
}

* html #ddblueblockmenu a{ /*IE only */
width: 94%; /*IE 5*/
width: 94%; /*94% minus all left/right paddings and margins*/
}

#ddblueblockmenu a:hover {
background-color: #2586d7;
border-left-color: #1c64d1;
}

#ddblueblockmenu div.menutitle{
color: #ffffff;
border-bottom: 1px solid black;
padding: 1px 0;
padding-left: 5px;
background-color: #000000;
font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}

</style>

<div id="ddblueblockmenu">

<div class="menutitle">Browse</div>
<ul>
<a href="Το Url του Link σας/">Home</a>
<a href="Το Url του Link σας/">About me</a>
<a href="Το Url του Link σας/">To άλλο μου Blog</a>
<a href="Το Url του Link σας/">Διάφορα</a>
<a href="Το Url του Link σας/">Επικοινωνία</a>
</ul></div>



Όπως προανέφερα, είναι widget, οπότε για να κάνετε την εφαρμογή θα πάτε Πίνακα ελέγχου --> Διάταξη (ή Σχεδίαση αν προτιμάτε) --> Προσθήκη gadget --> Html/Javascript, και κάνουμε επικόλληση τον κωδικό. Πριν πατήσετε Αποθήκευση, πρέπει να κάνετε τις ρυθμίσεις που απαιτούν τα ...γούστα σας.

Στην αρχή του κωδικού, ο αριθμός με το πράσινο χρώμα, αντιστοιχεί στο χρώμα του πλαισίου του widget.
Ακολούθως, το σκούρο μπλε, είναι το χρώμα των γραμμάτων του κεντρικού Menu.
Με το καφέ, είναι το background του Menu.
Με το κόκκινο χρώμα είναι το χρωμα της διαχωριστικής γραμμής του menu.
Με το μπλε, είναι η κάθετη γραμμή δίπλα στο πλαίσιο, που φαίνεται αριστερά του menu.
Με το θαλασσί, είναι το χρώμα του menu, όταν περνάμε το δείκτη του ποντικιού από πάνω του.
Με το φούξια, είναι το χρώμα της κάθετης γραμμής του menu, όταν περνάμε το δείκτη του ποντικιού από πάνω του.
Με το πράσινο, είναι το χρώμα των γραμμέτων του τίτλου.
Τέλος με το πορτοκαλί, είναι το background του τίτλου.

Επειδή ίσως σας μπερδέψουν όλα τα παραπάνω, σας ετοίμασα μια εικόνα, όπου επεξηγώ όλα όσα σας έγραψα στην παραπάνω παράγραφο. Σίγουρα θα σας βοηθήσει να καταλάβετε ακριβώς την θέση την χρωμάτων.
Δείτε την εικόνα.




Προς το τέλος του κωδικού, αυτό με το κόκκινο χρώμα, είναι τα links που θα φαίνονται.
Εκεί που γράφει "Το Url του Link σας/", βάζουμε το direct link που θα οδειγήται ο επισκέπτης πατώντας το, ενώ εκεί που γράφει Home κλπ, γράφουμε αυτό που προσδιορίζει το link.

Μπορούμε να προσθέσουμε, (ή να αφαιρέσουμε), όσα links θέλουμε, επικολώντας κάθε φορά για κάθε link τον κωδικό


<a href="Το Url του Link σας/">Home</a>

Νομίζω ότι είναι αρκετά εύκολο.
Δοκιμάστε το, κι αν σας άρεσε αφήστε μου ένα σχόλιο.

Add To Facebook Add To Twitter Add To Yahoo Stumble This Fav This With Technorati Add To Del.icio.us Digg This Add To Reddit

21 σχόλια:

OUPS είπε...

Για να το δοκιμάσουμε και θα σου πω

Gaurakos είπε...

Καλό ήδη παίζω μαζί του.

Ευχαριστώ.

Επίσης από ότι είδα μπορούμε και να αλλάξουμε την οριζόντια ανάλυση του.
Σκαλίζοντας το width. Σωστά;

ekabitis είπε...

OUPS, ...περιμένω σχόλιο!

Gaurako, απ' ότι είδα στο blog σου, το κατάφερες μια χαρά. Ωραίο το έκανες. Δεν σου απαντάω στην ερώτηση, καθώς το τακτοποίησες μόνος σου.

Παιδιά σας ευχαριστώ πολύ για τα σχόλια!

themis gs είπε...

Poli kalo.Mpravo!

ekabitis είπε...

Να 'σαι καλά Θέμη.

pan de lees είπε...

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

ekabitis είπε...

Ευχαριστώ Pan de lees, για τα καλά σου λόγια.
Να 'σαι καλά.

Xelwna είπε...

file m i erwtisi m mporei n einai xazi alla pws bazoume t ar8ra sto katalilo post g n t blepei kapoios patontas panw sthn ka8e katigoria

ekabitis είπε...

Χελώνα, δεν κατάλαβα καλά την ερώτησή σου.
Πιθανόν να εννοείς για την Menu bar.
Απ' ότι είδα στο blog σου, τα έχεις βάλει λάθος.
Το "Το Url του Link σας", το ΑΝΤΙΚΑΘΙΣΤΑΣ με το καινούριο link. Δεν τα βάζεις μαζί. Εγώ το έβαλα για να δείξω στον κόσμο που μπαίνει το link.
Για να δημιουργήσεις κατηγορίες, βάζεις ετικέτες στις αναρτήσεις σου, κατηγοριοποιώντας τες. Αν πατήσεις μετά στις ετικέτες, θα ανοίξει η συγκεκριμένη κατηγορία. Μόλις γίνει αυτό, παίρνεις την διεύθυνση που σου δίνει, και την βάζεις στην αντίστοιχη κατηγορία του Menu. Ομοίως θα κάνεις και με τις υπόλοιπες κατηγορίες. Αν θες περισσότερες διευκρινήσεις, στείλε μου mail. Aν έχεις την καλοσύνη στα Ελληνικά και όχι greeklish

Xelwna είπε...

αχχ χιλια συγνωμη...πεs μου λιγο το email σου γιατι δν μπορω να το βρω για να επικοινωνησουμε

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

Καλησπέρα φίλε.Πολλά μπράβο έχω να σου πω.Πολύ καλές και πολύ χρήσιμες οι αναρτήσεις σου.Οτι μου ήταν χρήσιμο το έχω βάλει και λειτουργεί άψογα.Να σαι καλά.

ekabitis είπε...

Xelwna, το mail μου βρίσκεται στην sidebar του blog μου, καθώς και στην Menu bar στην κορυφή, εκεί που λέει "contact me".

Ανώνυμε, σε ευχαριστώ για τα καλά σου λόγια.
Πάντως θα σε προτιμούσα ...επώνυμο!

fani είπε...

Γιατί εξαφανίστηκε το προηγούμενο σχόλιο που έκανα, για μια στιγμή εμφανίστηκε και μετά έγινε άφαντο...τι συνέβη? Θα ήθελα να μου εξηγησετε πως μπορώ να τοποθετήσω οριζόντιο μενού όπως το δικό σας στο blog μου, αλλά πολύ πολύ απλά γιατί είμαι αρχάρια και δεν πολυκαταλαβαίνω τις ορολογίες..

ekabitis είπε...

Fani, σου έστειλα mail.

black angel είπε...

ΕΚΑΒΙΤΗ ΒΟΗΘΕΙΑ!!
ΔΕΝ ΤΟ ΚΑΤΑΛΑΒΑ ΚΑΘΟΛΟΥ!!
ΤΟ ΕΚΑΝΑ ΑΛΛΑ ΔΕΝ ΕΙΝΑΙ ΑΥΤΟ ΠΟΥ ΘΕΛΩ ΙΣΩΣ!!!!!!

ekabitis είπε...

Black angel, το συγκεκριμένο Menu bar, μπαίνει στην sidebar, και είναι κάθετο.
Προφανώς θα θέλεις οριζόντιο menu.

Creperos είπε...

polu kala ekanes ,file!
na se rotiso kati gia ti epikoinonia patao gia na mou emfanisei to keimeno.pos na grapso kodika?

ekabitis είπε...

Creperos, Δεν διευκρινίζεις τον τρόπο επικοινωνίας. Αν είναι με μαιλ, μπορείς να τον στείλεις κανονικά. Σε κάποιες περιπτώσεις χρειάζεται μετατροπή του κωδικού για να είναι ορατός. Μπορείς να τον μετατρέψεις από εδώ

Ανεράιδα είπε...

Σε ευχαριστώ πολύ πολύ!! Πολύ εύκολο και ευέλικτο μενού και οι οδηγίες σου φοβερές!!

ekabitis είπε...

Να 'σαι καλά Ανεράιδα.
Πολύ ωραίο και χρήσιμο το blog σου. Συνέχισε έτσι.

Karakaksa Studios είπε...

POLY KALO!!! HDH TO EXW STO BLOG!!!! PANTA TETOIA! POLLA FILIA APO THN KARAKAKSA!!! :-*

Δημοσίευση σχολίου