• 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 ΟΡΙΖΟΝΤΙΟ ΜΕΝΟΥ
Αυτό είναι ένα τρισδιάστατο οριζόντιο μενού απλό χωρίς υπομενού και μπορείτε να το βάλετε στο ιστολόγιό σας απλά σαν gadget. Τα χρώματα αλλάζουν εκεί που υπάρχει το σύμβολο της δίεσης #. Μπορείτε να αλλάξετε τα μεγέθη των γραματοσειρών και τις αποστάσεις τα οποία έχω χρωματισμένα με γαλάζιο χρώμα. Αντικαταστήστε τα δικά μου πράσινα links και τις περιγραφές με τα πορτοκαλί γράμματα με τα δικά σας. Το πρώτο μέρος του κώδικα αν θέλετε μπορείτε να το βάλετε και μέσα στο πρότυπο πρίν την γραμμή </head>. Το μενού μπορείτε να το δείτε εδώ ακριβώς απο κάτω.



<style>
.TD-menu {display: block;}
.TD-menu li {display: inline-block;}
.TD-menu li a {
color: #FFFFFF;
background:#FF6600;
display: block;
text-decoration: none;
font-family: Arial;
overflow: visible;
line-height: 10px;
font-size: 14px;
padding: 15px 10px;}
.tdm {
-webkit-perspective: 200px;
-moz-perspective: 200px;
perspective: 200px;
-webkit-transition: all .08s linear;
-moz-transition: all .08s linear;
transition: all .08s linear;
position: relative;}
.tdm:not(.active):hover {cursor: pointer;}
.tdm:not(.active):hover .tdm-box,
.tdm:not(.active):focus .tdm-box {
-moz-transform: translateZ(-20px) rotateX(90deg);
-webkit-transform: translateZ(-20px) rotateX(90deg);
-o-transform: translateZ(-20px) rotateX(90deg);
transform: translateZ(-20px) rotateX(90deg);}
.tdm-box {
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-ms-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
transition: all .5s ease-out;
-webkit-transform: translatez(-20px);
-moz-transform: translatez(-20px);
-o-transform: translatez(-20px);
transform: translatez(-20px);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;}
.front {
-webkit-transform: rotatex(0deg) translatez(20px);
-moz-transform: rotatex(0deg) translatez(20px);
-o-transform: rotatex(0deg) translatez(20px);
transform: rotatex(0deg) translatez(20px);
background:#173374;
color: #FFFFFF;}
.down {
-webkit-transform: rotatex(-90deg) translatez(20px);
-moz-transform: rotatex(-90deg) translatez(20px);
-o-transform: rotatex(-90deg) translatez(20px);
transform: rotatex(-90deg) translatez(20px);
background:#661111;
color: #FFFFFF;}
.front, .down {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
padding: 15px 10px;
pointer-events: none;
-moz-box-sizing: border-box;
box-sizing: border-box;}
</style>
<ul class="TD-menu">
<li><a href="http://gadgetsforblogs3.blogspot.gr" class="tdm">HOME<span class="tdm-box">
<span class="front">HOME</span>
<span class="down">HOME</span></span></a></li>
<li><a href="http://gadgetsforblogs3.blogspot.gr/p/my-posts.html" class="tdm">MY POSTS<span class="tdm-box">
<span class="front">MY POSTS</span>
<span class="down">MY POSTS</span></span></a></li>
<li><a href="http://gadgetsforblogs3.blogspot.gr/p/my-articles.html" class="tdm">MY ARTICLES<span class="tdm-box">
<span class="front">MY ARTICLES</span>
<span class="down">MY ARTICLES</span></span></a></li>
<li><a href="http://gadgetsforblogs3.blogspot.gr/p/my-links.html" class="tdm">MY LINKS<span class="tdm-box">
<span class="front">MY LINKS</span>
<span class="down">MY LINKS</span></span></a></li>
<li><a href="http://gadgetsforblogs3.blogspot.gr/p/my-photos.html" class="tdm">MY PHOTOS<span class="tdm-box">
<span class="front">MY PHOTOS</span>
<span class="down">MY PHOTOS</span></span></a></li>
<li><a href="http://gadgetsforblogs3.blogspot.gr/p/my-videos.html" class="tdm">MY VIDEOS<span class="tdm-box">
<span class="front">MY VIDEOS</span>
<span class="down">MY VIDEOS</span></span></a></li>
<li><a href="http://gadgetsforblogs3.blogspot.gr/p/my-music.html" class="tdm">MY MUSIC<span class="tdm-box">
<span class="front">MY MUSIC</span>
<span class="down">MY MUSIC</span></span></a></li>
<li><a href="http://gadgetsforblogs3.blogspot.gr/p/forumchat.html" class="tdm">FORUM+CHAT<span class="tdm-box">
<span class="front">FORUM+CHAT</span>
<span class="down">FORUM+CHAT</span></span></a></li>
<li><a href="http://gadgetsforblogs3.blogspot.gr/p/radiotv.html" class="tdm">RADIO+TV<span class="tdm-box">
<span class="front">RADIO+TV</span>
<span class="down">RADIO+TV</span></span></a></li>
<li><a href="http://gadgetsforblogs3.blogspot.gr/p/news.html" class="tdm">NEWS<span class="tdm-box">
<span class="front">NEWS</span>
<span class="down">NEWS</span></span></a></li>
<li><a href="http://gadgetsforblogs3.blogspot.gr/p/my-rss.html" class="tdm">RSS<span class="tdm-box">
<span class="front">RSS</span>
<span class="down">RSS</span></span></a></li>

2 σχόλια:

  1. φίλε μου καλέ μου φίλε, πρώτα θέλω να σε ξαναματαευχαριστίσω που με τη βοήθεια σου το site μου φυσάει. ερώτηση τώρα, το μενού 3d δεν παίρνει υπομενού?

    ΑπάντησηΔιαγραφή
  2. Αυτό είναι απλό χωρίς υπομενού. Μπορεί να μπεί έξτρα κώδικας αλλά δεν είναι ώρα για σπαζοκεφαλιές τώρα. Ίσως εν καιρώ το προσπαθήσω.

    ΑπάντησηΔιαγραφή

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

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