Ads 468x60px

Τρίτη 7 Μαρτίου 2017

Animated action navigation menu bar

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









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

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

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

επικόλληση τον ακόλουθο κώδικα:--
..............................................................................................................................................................
<style type="text/css">
#avd-nav {margin: 100px auto;list-style: none;width: 632px;height: 87px;overflow-y: hidden;}
#avd-nav li {float: left;}
#avd-nav li a {display: block;color: white;width: 120px;height: 61px;margin-top: 24px;text-decoration: none;text-align: center;border-top: 1px solid #bbb;border-bottom: 1px solid #555;}
#avd-nav li a span.myname {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);}
#avd-nav li a img {position: relative;top: 0;transition: top .5s ease;}
#avd-nav li a:hover {cursor: pointer;}
#avd-nav li a:hover img {top: -85px;}
#avd-nav li a:hover .myname {top: 85px;}
#avd-nav li:nth-child(1) a {background: #0088cc;border-radius: 5px 0 0 5px;border-left: 1px solid #bbb;}
#avd-nav li:nth-child(2) a {background: #cc6600;}
#avd-nav li:nth-child(3) a {background: #00cccc;}
#avd-nav li:nth-child(4) a {background: #00cc66;}
#avd-nav li:nth-child(5) a {background: #00cc66;}
border-radius: 0 5px 5px 0;border-right: 1px solid #555;}
</style>
<div id="avd-nav">
<li> <a href="#"><span class="myname">ΟΝΟΜΑΣΙΑ</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwA_0TAgYooAVyXc7kIYf1CjHtfDe9nqocWE2xkmqvxaQddggX4N_PekcwK9RbSOkcAQvVXdlYfkzbpTLDHEbZ0ynVohnupNzIjYtY0UAfz6ti700Yx4qYoEK_a0Hg9c9-4hgs5wHePHQ/s1600/Arrows-Up-circular-icon.png" /> </a> </li>
<li> <a href="#"> <span class="myname">
ΟΝΟΜΑΣΙΑ</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwA_0TAgYooAVyXc7kIYf1CjHtfDe9nqocWE2xkmqvxaQddggX4N_PekcwK9RbSOkcAQvVXdlYfkzbpTLDHEbZ0ynVohnupNzIjYtY0UAfz6ti700Yx4qYoEK_a0Hg9c9-4hgs5wHePHQ/s1600/Arrows-Up-circular-icon.png" /> </a> </li>
<li> <a href="#"> <span class="myname">
ΟΝΟΜΑΣΙΑ</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwA_0TAgYooAVyXc7kIYf1CjHtfDe9nqocWE2xkmqvxaQddggX4N_PekcwK9RbSOkcAQvVXdlYfkzbpTLDHEbZ0ynVohnupNzIjYtY0UAfz6ti700Yx4qYoEK_a0Hg9c9-4hgs5wHePHQ/s1600/Arrows-Up-circular-icon.png" /> </a> </li>
<li> <a href="#"> <span class="myname">
ΟΝΟΜΑΣΙΑ</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwA_0TAgYooAVyXc7kIYf1CjHtfDe9nqocWE2xkmqvxaQddggX4N_PekcwK9RbSOkcAQvVXdlYfkzbpTLDHEbZ0ynVohnupNzIjYtY0UAfz6ti700Yx4qYoEK_a0Hg9c9-4hgs5wHePHQ/s1600/Arrows-Up-circular-icon.png" /> </a> </li> </div> 

 ................................................................................................................................................................
ΑΛΛΑΓΕΣ

#-->Εδώ βάζετε τα urls των δικών σας διευθύνσεων!

ΟΝΟΜΑΣΙΑ-->Εδώ  μπαίνει το όνομα της ετικέτας σας!

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwA_0TAgYooAVyXc7kIYf1CjHtfDe9nqocWE2xkmqvxaQddggX4N_PekcwK9RbSOkcAQvVXdlYfkzbpTLDHEbZ0ynVohnupNzIjYtY0UAfz6ti700Yx4qYoEK_a0Hg9c9-4hgs5wHePHQ/s1600/Arrows-Up-circular-icon.png--> Όποιος θέλει αλλάζει και την εικόνα με μία δικιά του!

Μόλις τελειώσετε Αποθήκευση και έτοιμοι!

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



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





Edit by

0 σχόλια :

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

Icon Icon Icon

spice up your blog


Giveaway of the Day
Άδεια Creative Commons
Αυτή η εργασία χορηγείται με άδεια Creative Commons Αναφορά Δημιουργού-Μη Εμπορική Χρήση-Όχι Παράγωγα Έργα 3.0 Ελλάδα .