Ads 468x60px

Τετάρτη, 7 Ιουνίου 2017

Horizontal Rollover Text Menu

Φίλες και φίλοι γεια σας, σε αυτή την ανάρτηση θα δούμε ένα πολύ ωραίο menu
για τα blog μας!Είναι με κώδικα Css δεν καθυστερεί καθόλου το άνοιγμα του blog
μας, οριζόντιο με λίγες ενότητες και έχει ένα πάρα πολύ ωραίο rollover effect!!



Δείτε εδώ το DEMO


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

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

και στο παράθυρο που θα ανοίξει 

επικολλήστε τον ακόλουθο κώδικα--
...........................................................................................................................................................
<style>

ul{
margin:0;
padding:0;
}

li{
display:inline;
list-type:none;
}

a.glidebutton{
display: inline-block;
position: relative;
color: #4A4A4A; /* default color */
background: #ececec; /* default bg color */
text-decoration: none;
font: bold 14px Arial; /* font settings */
letter-spacing: 2px; /* font settings */
overflow: hidden;
height: 30px; /* height of each button */
text-align: center;
border-radius: 5px; /* border radius */
-moz-transition: all 0.3s ease-in-out; /* Enable CSS transition between property changes */
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

a.glidebutton > span:first-child{ /* first span inside button */
position: relative;
display: block;
height: 100%;
padding: 6px; /* padding of button */
-moz-box-sizing: border-box;
box-sizing: border-box;
-moz-transition: all 0.3s ease-in-out; /* Enable CSS transition between property changes */
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

a.glidebutton > span:first-child:after{ /* CSS generated content */
content: attr(data-text); /* Duplicate text of span markup */
display: block;
width: 100%;
height: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: inherit;
position: absolute;
top:100%;
left:0;
}

a.glidebutton:hover{
color: black; /* color of button on hover */
background: #72cb47; /* bg color of button on hover */
box-shadow: 0 0 4px green inset;
}

a.glidebutton:hover > span:first-child{
-moz-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
</style>
<ul>
<li><a class="glidebutton" href="URL ΔΙΕΥΘΥΝΣΗΣ ΣΑΣ"><span data-text="Home">Home</span></a></li>
<li><a class="glidebutton" href="
URL ΔΙΕΥΘΥΝΣΗΣ ΣΑΣ"><span data-text="New">New</span></a></li>
<li><a class="glidebutton" href="
URL ΔΙΕΥΘΥΝΣΗΣ ΣΑΣ"><span data-text="Revised">Revised</span></a></li>
<li><a class="glidebutton" href="
URL ΔΙΕΥΘΥΝΣΗΣ ΣΑΣ"><span data-text="Αναρτήσεις">Αναρτήσεις</span></a></li>
<li><a class="glidebutton" href="
URL ΔΙΕΥΘΥΝΣΗΣ ΣΑΣ"><span data-text="Επικοινώνια">Επικοινώνια</span></a></li>
<li><a class="glidebutton" href="
URL ΔΙΕΥΘΥΝΣΗΣ ΣΑΣ"><span data-text="Τα νέα μας">Τα νέα μας</span></a></li>
</ul>
......................................................................................................................................................................
ΑΛΛΑΓΕΣ 
URL ΔΙΕΥΘΥΝΣΗΣ ΣΑΣ-- Εδώ βάζετε όλα τα links των διευθύνσεων σας.... 


και αλλάζετε τους τίτλους με τα κόκκινα γράμματα με τους δικούς σας!Προσέξτε
κάθε τίτλος μπαίνει 2 φορές όπως βλέπετε!
Μόλις τελειώσετε  πατήστε Αποθήκευση και είστε έτοιμοι!

Καλή επιτυχία!!! 


Πηγή κώδικα
thanks to dynamicdrive.com



Edit by

0 σχόλια :

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

Icon Icon Icon

spice up your blog