Css Animated Menu Gadget για τον Blogger

Για να βρεις όλες τις αναρτήσεις με τα menus, αρκεί να πατήσεις στην ετικέτα που ψάχνεις. Αλλά το ποιος γράφει τέτοια σχόλια είναι γνωστό από τον καθένα μας, αφού όλοι μα δεχτήκαμε κάποτε "τρόπους" για το πως θα κάνουμε καλύτερα τη δουλειά μας.
Ευχαριστούμε πολύ για όσους θέλουν το "καλό, καλύτερό μας".

Ας επανέλθουμε στο θέμα μας λοιπόν που είναι ένα μόνο πολύχρωμο Menu με ευαισθησία στο άγγιγμα του ποντικιού.

Χρησιμοποιήστε το σαν gadget κάτω από τον header ή χαμηλά κάτω από τις αναρτήσεις. Λόγω του ότι είναι οριζόντιο και μεγάλο χρειάζεται όλον τον οριζόντιο χώρο (#outer-wrapper).

<style>

#fbt-nav {margin:0 auto;list-style: none;width: 965px;height: 86px;overflow-y: hidden;}

#fbt-nav li {float: left;}

#fbt-nav li a {display: block;color: white;width: 120px;height: 61px;margin-top: 24px;text-decoration: none;text-align: center;}

#fbt-nav li a span.aname {font: bold 17px/61px "Arial";color: #fff;text-transform: uppercase;cursor: pointer;position: relative;top: 0;transition: top .5s ease;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);}

#fbt-nav li a img {position: relative;top: 0;transition: top .5s ease;}

#fbt-nav li a:hover {cursor: pointer;}

#fbt-nav li a:hover img {top: -85px;}

#fbt-nav li a:hover .aname {top: 85px;}

#fbt-nav li:nth-child(1) a {background: #150517;border-radius: 5px 0 0 5px;}

#fbt-nav li:nth-child(2) a {background: #3E3535;}

#fbt-nav li:nth-child(3) a {background: #4A4344;}

#fbt-nav li:nth-child(4) a {background: #595454;}

#fbt-nav li:nth-child(5) a {background: #616D7E;}

#fbt-nav li:nth-child(6) a {background: #5E5A80;}

#fbt-nav li:nth-child(7) a {background: #2B60DE;}

#fbt-nav li:nth-child(8) a {background: #38ACEC;border-radius: 0 5px 5px 0;}

</style>

 

<div id="fbt-nav">

<li> <a href="/"><span class="aname">Homepage</span> <img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/48/Places-user-home-icon.png" /> </a> </li>

 

<li> <a href="#"> <span class="aname">Archive</span> <img src="http://icons.iconarchive.com/icons/kearone/comicons/48/zip-software-icon.png" /> </a> </li>

 

<li> <a href="#"> <span class="aname">About me</span> <img src="http://icons.iconarchive.com/icons/aha-soft/standard-portfolio/48/About-icon.png" /> </a> </li>

 

<li> <a href="#"> <span class="aname">Our Blog</span> <img src="http://icons.iconarchive.com/icons/scoyo/badge/48/My-Blog-icon.png" /> </a> </li>

 

<li> <a href="#"><span class="aname">Science</span> <img src="http://icons.iconarchive.com/icons/iconshock/real-vista-education/48/technology-icon.png" /> </a> </li>

 

<li> <a href="#"><span class="aname"> Sports  </span> <img src="http://icons.iconarchive.com/icons/itzikgur/my-seven/48/Games-Soccer-icon.png" /> </a> </li>

 

<li> <a href="#"><span class="aname">Photos</span> <img src="http://icons.iconarchive.com/icons/apathae/satellite/48/2-Pictures-icon.png" /> </a> </li>

 

<li> <a href="#"> <span class="aname">Contact</span> <img src="http://icons.iconarchive.com/icons/deleket/soft-scraps/48/Email-Download-icon.png" /> </a> </li>

</div>

Οι εικόνες που χρησιμοποιώ δεν είναι ανεβασμένες στον Blogger. Μπορείτε να τις ανεβάσετε εσείς ή να τις αλλάξετε με δικές σας ίδιου μεγέθους.

πηγη