Ads 468x60px

Παρασκευή, 22 Νοεμβρίου 2013

CSS3 animated vertical menu

Φίλες και φίλοι γεια σας, σε αυτή την ανάρτηση θα δούμε ένα πολύ ωραίο
κάθετο vertical menu για το blog μας!Μπαίνει στην αριστερή η δεξιά sidebar
του blog μας, η και στο footer του blog μας, και είναι με κώδικα Css3 ο οποίος
του δίνει ένα πολύ ωραίο animated slanted menu!





Δείτε το DEMO



Η εγκατάσταση είναι πάρα πολύ απλή και για να γίνει αυτο...

 Πηγαίνετε blogger--> Διάταξη -->

Προσθήκη gadget-->HTML/JavaScript 

 και στο παράθυρο που θα ανοίξει βάλτε τον παρακάτω κώδικα--
..................................................................................................................................................................
<style>

ul.svertical{
width: 200px; /* width of menu */
overflow: auto;
background: black; /* background of menu */
margin: 0;
padding: 0;
padding-top: 7px; /* top padding */
list-style-type: none;
}

ul.svertical li{
text-align: right; /* right align menu links */
}

ul.svertical li a{
position: relative;
display: inline-block;
text-indent: 5px;
overflow: hidden;
background: rgb(127, 201, 68); /* initial background color of links */
font: bold 16px Germand;
text-decoration: none;
padding: 5px;
margin-bottom: 7px; /* spacing between links */
color: black;
-moz-box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8); /* inner right shadow added to each link */
-webkit-box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8);
box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8);
-moz-transition: all 0.2s ease-in-out; /* CSS3 transition of hover properties */
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

ul.svertical li a:hover{
padding-right: 30px; /* add right padding to expand link horizontally to the left */
color: black;
background: rgb(153,249,75);
-moz-box-shadow: inset -3px 0 2px rgba(114,114,114, 0.8); /* contract inner right shadow */
-webkit-box-shadow: inset -3px 0 5px rgba(114,114,114, 0.8);
box-shadow: inset -3px 0 5px rgba(114,114,114, 0.8);
}

ul.svertical li a:before{ /* CSS generated content: slanted right edge */
content: "";
position: absolute;
left: 0;
top: 0;
border-style: solid;
border-width: 70px 0 0 20px; /* Play around with 1st and 4th value to change slant degree */
border-color: transparent transparent transparent black; /* change black to match the background color of the menu UL */

}

</style>
<ul class="svertical">
<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

0 σχόλια :

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

Icon Icon Icon

spice up your blog