• 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

3D ΚΑΘΕΤΟ ΜΕΝΟΥ

3D-MENU
3D ΚΑΘΕΤΟ ΜΕΝΟΥ
Με τον παρακάτω κώδικα μπορείτε να βάλετε ένα 3D κάθετο μενού στο blog σας. Οι διαστάσεις αλλάζουν στα σημεία που γράφει width:240px; και height:40px; Τα χρώματα αλλάζουν, αλλάζοντας τους 6ψήφιους κωδικούς που βρίσκονται μετά το σύμβολο της δίεσης #. Αλλάξτε τα δικά μου πράσινα links με τα δικά σας.Το πρώτο μέρος του κώδικα από το <style> μέχρι το </style> καλό θα ήταν να μπεί μέσα στο πρότυπο πρίν την ετικέτα ]]></b:skin> χωρίς τα 2 <style>. Αλλα μπορείτε να το βάλετε και έτσι απλά σαν gadget. Δείτε πως θα εμφανίζεται το 3D κάθετο μενού εδώ ακριβώς από κάτω.




<style>
#menu1 {width:240px; margin-top:12px;padding:5px;}
#menu1 ul li {width:240px;height:40px;}
#menu1 ul li a {display: block; width:240px; height: 40px; font:14px Arial; line-height: 40px; background: #173377; color: #FFFFFF; text-align:left; padding:6px;margin:-20px; -webkit-perspective: 1000px; -moz-perspective: 1000px; perspective: 1000px;}
#menu1 ul li a span {position:relative;display: inline-block;width:240px;height:40px;background: #115599; -webkit-transition: -webkit-transform 0.5s, background 0.5s; -moz-transition: -moz-transform 0.5s, background 0.5s; transition: transform 0.5s, background 0.5s; -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d;}
#menu1 ul li a span::before {position: absolute;top:100%;left: 0;width:240px;height:100%; background: #173377; content: attr(data-hover); -webkit-transition: background 0.5s; -moz-transition: background 0.5s; transition: background 0.5s; -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); transform: rotateX(-90deg); -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; transform-origin: 50% 0;}
#menu1 ul li a:hover span,
#menu1 ul li a:focus span {-webkit-transform: rotateX(90deg) translateY(-22px); -moz-transform: rotateX(90deg) translateY(-22px); transform: rotateX(90deg) translateY(-22px);}
#menu1 ul li a:hover span,
#menu1 ul li a:focus span {background: #F11111;}
#menu1 ul li a:hover span::before,
#menu1 ul li a:focus span::before {background: #105105;}
</style>

<div id="menu1">
<ul>
<li><a href="http://the-best-widgets.blogspot.gr"><span data-hover="HOME">HOME</span></a></li>
<li><a href="http://the-best-widgets.blogspot.gr/p/my-posts.html"><span data-hover="MY POSTS">MY POSTS</span></a></li>
<li><a href="http://the-best-widgets.blogspot.gr/p/blog-page_11.html"><span data-hover="MY LINKS">MY LINKS</span></a></li>
<li><a href="http://the-best-widgets.blogspot.gr/p/photo-gallery-1.html"><span data-hover="MY PHOTOS">MY PHOTOS</span></a></li>
<li><a href="http://the-best-widgets.blogspot.gr/p/wigdets.html"><span data-hover="MY VIDEOS">MY VIDEOS</span></a></li>
<li><a href="http://the-best-widgets.blogspot.gr/p/widgets_26.html"><span data-hover="MY FILES">MY FILES</span></a></li>
</ul>
</div>

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

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

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

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