.png "English"){kind=small}
Τετάρτη 29 Ιανουαρίου 2014
Sexy CSS Vertical Menu
Φίλες και φίλοι γεια σας, σε αυτή την ανάρτηση θα δούμε ένα κάθετο (vertical) menu για τα blog μας!Είναι ένα χρήσιμο widget το οποιό το τοποθετούμε στις
πλαινές sidebars της σελίδα μας, η στο footer της!Είναι με κώδικα CSS και δεν
καθυστερεί το άνοιγμα του blog μας!
Δείτε εδώ το DEMO
Η εγκατάσταση του είναι απλή..
Πηγαίνετε blogger--> Διάταξη -->
Προσθήκη gadget-->HTML/JavaScript
και στο παράθυρο που θα ανοίξει βάλτε τον παρακάτω κώδικα-->
..............................................................................................................................................................
Πηγαίνετε blogger--> Διάταξη -->
Προσθήκη gadget-->HTML/JavaScript
και στο παράθυρο που θα ανοίξει βάλτε τον παρακάτω κώδικα-->
..............................................................................................................................................................
<style type="text/css">
.sexypanels{
list-style-type: none;
margin: 0;
padding: 0;
width: 180px; /* width of menu */
}
.sexypanels li{
border-bottom: 1px solid white; /* white border beneath each menu item */
}
.sexypanels li a{
background: #333 url(media/sexypanelright.gif) no-repeat right top; /*color of menu by default*/
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana;
display: block;
color: white;
width: auto;
padding: 5px 0; /* Vertical (top/bottom) padding for each menu link */
text-indent: 8px;
text-decoration: none;
border-bottom: 1px solid black; /*bottom border of menu link. Should be equal or darker to link's bgcolor*/
}
.sexypanels li a:visited, .sexypanels li a:active{
color: white;
}
.sexypanels li a:hover{
background-color: black; /*color of menu onMouseover*/
color: white;
border-bottom: 1px solid black; /*bottom border of menu link during hover. Should be equal or darker to link's hover's bgcolor*/
}
</style>
<!--[if IE]>
<style type="text/css">
.sexypanels li a{ /* Menu link width value for IE */
width: 100%;
}
</style>
<![endif]-->
<ul class="sexypanels"><li><a href="ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li>
<li><a href="ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li>
<li><a href="ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li>
<li><a href="ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li>
<li><a href="ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li>
<li><a href="ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li>
</ul>
............................................................................................................................................................
.sexypanels{
list-style-type: none;
margin: 0;
padding: 0;
width: 180px; /* width of menu */
}
.sexypanels li{
border-bottom: 1px solid white; /* white border beneath each menu item */
}
.sexypanels li a{
background: #333 url(media/sexypanelright.gif) no-repeat right top; /*color of menu by default*/
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana;
display: block;
color: white;
width: auto;
padding: 5px 0; /* Vertical (top/bottom) padding for each menu link */
text-indent: 8px;
text-decoration: none;
border-bottom: 1px solid black; /*bottom border of menu link. Should be equal or darker to link's bgcolor*/
}
.sexypanels li a:visited, .sexypanels li a:active{
color: white;
}
.sexypanels li a:hover{
background-color: black; /*color of menu onMouseover*/
color: white;
border-bottom: 1px solid black; /*bottom border of menu link during hover. Should be equal or darker to link's hover's bgcolor*/
}
</style>
<!--[if IE]>
<style type="text/css">
.sexypanels li a{ /* Menu link width value for IE */
width: 100%;
}
</style>
<![endif]-->
<ul class="sexypanels"><li><a href="ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li>
<li><a href="ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li>
<li><a href="ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li>
<li><a href="ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li>
<li><a href="ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li>
<li><a href="ΔΙΕΥΘΥΝΣΗ URL">ΤΙΤΛΟΣ</a></li>
</ul>
............................................................................................................................................................
ΑΛΛΑΓΕΣ
ΔΙΕΥΘΥΝΣΗ URL--Εδώ βάζετε το link της διεύθυνσης σας!
Καλή επιτυχία!!!
Πηγή κώδικα
thanks to dynamicdrive.com
Edit by
Εγγραφή σε:
Σχόλια ανάρτησης
(
Atom
)
Smart Defrag 2
Γειά σας σε αυτήν την ανάρτηση θα δούμε το Smart Defrag 2 ένα από τα καλύτερα προγράμματα ανασυγκρότησης των σκληρών μας δίσκων...
Auto Scrolling Recent Posts
Γειά σας ένα πολύ ωραίο widget με οριζόντιο Auto Scrolling για να παρουσιάζουμε τις πρόσφατες αναρτήσεις μας...
Free YouTube Uploader
Γειά σας σε αυτήν την ανάρτηση θα δούμε το Free YouTube Uploader το οποίο μας επιτρέπει...
Social media
Γειά σας τα gadgets και widgets για τα social media δεν έχουν πλέον τελιωμό και σε αυτήν την ανάρτηση θα δούμε...
Back to top button
Γεία σας σε αυτήν την ανάρτηση θα δούμε ένα πολύ γνωστό και χρήσιμο gadget το οποίο μας βοηθά έτσι ώστε...
Sitemap Widget
Γειά σας,σε αυτήν την ανάρτηση θα δούμε ένα πολύ ωραίο και χρήσιμο Sitemap widget το οποίο μας δείχνει μαζεμένες σε μία σελίδα...
Αυτή η εργασία χορηγείται με άδεια Creative Commons Αναφορά Δημιουργού-Μη Εμπορική Χρήση-Όχι Παράγωγα Έργα 3.0 Ελλάδα .
0 σχόλια :
Δημοσίευση σχολίου