Vertical Menu with Icons

Κάθετο Μενου με Εικονίδιο / Vertical Menu with Icons

Νέοι bloggers γεια σας...βρήκα ένα κάθετο μενού με CSS, και κάνοντας μερικές μετατροπές, το έβλεπα να γίνεται χρήσιμο και αρκετά διαφορετικό από τα άλλα...έτσι σκέφτηκα οτι θα μπορούσε να έχει μια χρήσιμη εφαρμογή...στα φιλικά μας banner  !!!Κάτω από το μενού λοιπόν εμφανίζεται ένα εικονίδιο...και το ρύθμισα να βάζω τα φιλικά μου blogs ...Δείτε το
ΕΔΩ...

Ο ΚΩΔΙΚΑΣ  CSS:

<style type="text/css">
<!--
body {position: relative; background: none; margin: 0; padding: 0;}

div#FRIENDS {position: absolute; top: 10px; left: 0; width: 166px; height: 700px; font: 16px Verdana, sans-serif; z-index: 100;}
div#FRIENDS a {display: block; text-align: center; font: bold 1em sans-serif;
   padding: 5px 10px; margin: 0 0 1px; border-width: 0;
   text-decoration: none; color: #FFC; background: #000000;
   border-right: 5px solid #505050;}
div#FRIENDS a:hover {color: #8A1C1C; background: #AAA;
   border-right: 5px double white;}

div#FRIENDS a img {height: 0; width: 0; border-width: 0;}
div#FRIENDS a:hover img {position: absolute; top: 190px; left: 55px; height: 70px; width: 80px;}

div#content {position: absolute; top: 26px; left: 161px; right: 25px;
   color: #BAA; background: #22232F;
   font: 13px Verdana, sans-serif; padding: 10px;
   border: solid 5px #444;}
div#content p {margin: 0 1em 1em;}
div#content h3 {margin-bottom: 0.25em;}

h1 {margin: -9px -9px 0.5em; padding: 15px 0 5px; text-align: right; background: #333; color: #667; letter-spacing: 0.5em; text-transform: lowercase; font: bold 25px sans-serif; height: 28px; vertical-align: middle; white-space: nowrap;}
dt {font-weight: bold;}
dd {margin-bottom: 0.66em;}
div#content a:link {color: white;}
div#content a:visited {color: #BBC;}
div#content a:link:hover {color: #FF0;}
div#content a:visited:hover {color: #CC0;}
code, pre {color: #EDC; font: 110% monospace;}
-->
</style>

Ο ΚΩΔΙΚΑΣ  HTML:

<div id="FRIENDS">
<a target="_blank"  href="ΔΙΕΥΘΥΝΣΗ BLOG">ΤΙΤΛΟΣ<img src="ΔΙΕΥΘΥΝΣΗ ΕΙΚΟΝΑΣ"></a>
<a target="_blank"  href=" ΔΙΕΥΘΥΝΣΗ BLOG "> ΤΙΤΛΟΣ <img src=" ΔΙΕΥΘΥΝΣΗ ΕΙΚΟΝΑΣ "></a>
<a target="_blank"  href=" ΔΙΕΥΘΥΝΣΗ BLOG "> ΤΙΤΛΟΣ <img src=" ΔΙΕΥΘΥΝΣΗ ΕΙΚΟΝΑΣ "></a>
<a target="_blank"  href=" ΔΙΕΥΘΥΝΣΗ BLOG "> ΤΙΤΛΟΣ <img src=" ΔΙΕΥΘΥΝΣΗ ΕΙΚΟΝΑΣ "></a>
<a target="_blank"  href=" ΔΙΕΥΘΥΝΣΗ BLOG "> ΤΙΤΛΟΣ <img src=" ΔΙΕΥΘΥΝΣΗ ΕΙΚΟΝΑΣ "></a>
<a target="_blank"  href=" ΔΙΕΥΘΥΝΣΗ BLOG "> ΤΙΤΛΟΣ <img src=" ΔΙΕΥΘΥΝΣΗ ΕΙΚΟΝΑΣ "></a>
</div>

***στο DEMO που σας δείχνω, έχω βάλει και τους 2 κώδικες μαζί, σαν gadget
***να σας εξηγήσω μερικά χρήσιμα πράγματα για να το ρυθμίσετε σύμφωνα με τις απαιτήσεις σας...
*τα μεγέθη   height: 70px; width: 80px;  είναι για το μέγεθος της εικόνας...
*το  target="_blank"  το έβαλα για να ανοίγει το λινκ σε νέο παράθυρο...
*στο  background: none  μπορείτε να βάλετε ένα χρώμα background...έβαλα τίποτα, για να μη μπερδευτείτε...
*το background: #000000;  είναι το χρώμα του button ...αλλάξτε και τα άλλα χρώματα
*εάν θέλετε να προσθέσετε κι άλλα banners θα επαναλάβετε τη φράση:
<a target="_blank"  href=" ΔΙΕΥΘΥΝΣΗ BLOG "> ΤΙΤΛΟΣ <img src=" ΔΙΕΥΘΥΝΣΗ ΕΙΚΟΝΑΣ "></a>  και θα μεγαλώσετε το μέγεθος   top: 190px;   (να πάει πιο κάτω)........
ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!
Πηγή, Thanks to : meyerweb.com/