Κάθετο 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>

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


Post by Ekabitis