• SANTORINI

    SANTORINI

  • SANTORINI

    SANTORINI

  • ZAKYNTHOS

    ZAKYNTHOS

  • LEYKADA

    LEYKADA

  • KEFALLONIA

    KEFALLONIA

  • KERKYRA

    KERKYRA

  • RODOS

    RODOS

GADGETS FOR BLOGS

YouTube GITHUB glitch.com JSBIN Start.me JSFIDDLE CODEPLY PASTEBIN.COM Repl.it CODEPEN CODEPEN

ANIMATED ΟΡΙΖΟΝΤΙΟ ΜΕΝΟΥ

ANIMATED MENU
ANIMATED ΟΡΙΖΟΝΤΙΟ ΜΕΝΟΥ
Αυτό είναι ένα animated οριζόντιο μενού με εχρωμα hover animated buttons. Αντιγράψτε τον παρακάτω κώδικα στο gadget που βρίσκετται κάτω από την κεφαλίδα του blogger. Τα χρώματα μπορείτε να τα αλλάξετε αλλάζοντας το κωδικό χρώματος που βρίσκεται μπροστά του το σύμβολο της δίεσης #. Αλλάξτε και τα links μου με τα δικά σας links. Δείτε παρακάτω πως θα είναι σε demo λειτουργία.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<style>
nav {margin:0px;padding:0px;text-align:left;}
.ani-menu li {position:relative;top:0px;left:0;display:inline-block;text-align:center;margin:0px; -webkit-transition:all 0.3s ease;}
.ani-menu li:hover {margin:0px;}
.ani-menu li:active {margin:0px;}
.ani-menu li a {position:relative;top:0;left:0;padding-left:8px;padding-right:8px;color:#fff;width:auto;height:0;z-index:99;font:bold 16px arial;display: block;text-decoration:none;-webkit-transition: all 0.1s linear;}
.ani-menu li:active a {font:bold 16px arial;}
.ani-menu li div.menu-item {width:auto;height:20px;display: block;-webkit-transition: all 0.2s ease; -webkit-border-radius:6px; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg);}
.ani-menu li:hover div.menu-item{-webkit-border-radius:6px; -webkit-transform: rotate(180deg);}
.ani-menu li:active div.menu-item {-webkit-border-radius:6px;} 
#color1 { background: #115599;}
#color2 { background: #ff0000;}
#color3 { background: #105105;}
#color4 { background: #740777;}
#color5 { background: #532000;}
#color6 { background: #FF4500;}
#color7 { background: #333333;}
#color8 { background: #009900;}
</style>
<nav><ul class="ani-menu">
<li><a href="https://the-best-widgets.blogspot.com" target="_blank">HOME</a><div class="menu-item" id="color1"></div></li>
<li><a href="https://the-best-widgets.blogspot.com" target="_blank">MY POSTS</a><div class="menu-item" id="color2"></div></li>
<li><a href="https://the-best-widgets.blogspot.com" target="_blank">MY LINKS</a><div class="menu-item" id="color3"></div></li>
<li><a href="https://the-best-widgets.blogspot.com" target="_blank">MY FILES</a><div class="menu-item" id="color4"></div></li>
<li><a href="https://the-best-widgets.blogspot.com" target="_blank">MY VIDEOS</a><div class="menu-item" id="color5"></div></li>
<li><a href="https://the-best-widgets.blogspot.com" target="_blank">MY PHOTOS</a><div class="menu-item" id="color6"></div></li>
<li><a href="https://the-best-widgets.blogspot.com" target="_blank">MY MUSIC</a><div class="menu-item" id="color7"></div></li>
<li><a href="https://the-best-widgets.blogspot.com" target="_blank">MY WIDGETS</a><div class="menu-item" id="color8"></div></li>
</ul></nav>

Δεν υπάρχουν σχόλια:

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

► Γράψτε το σχόλιό σας στο λευκό κουτί και αν θέλετε να ειδοποιηθήτε για την απάντηση τσεκάρετε το κουτάκι "Να λαμβάνω ειδοποιήσεις".

Σημείωση: Μόνο ένα μέλος αυτού του ιστολογίου μπορεί να αναρτήσει σχόλιο.