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

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>