• 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

ΟΡΙΖΟΝΤΙΟ ΜΕΝΟΥ ΜΕ ΥΠΟΜΕΝΟΥ ΑΠΛΟ ΣΑΝ GADGET Νο 2

ΟΡΙΖΟΝΤΙΟ ΜΕΝΟΥ ΜΕ ΥΠΟΜΕΝΟΥ ΑΠΛΟ ΣΑΝ GADGET 2
Αυτό είναι ένα απλό οριζόντιο μενού με υπομενού το οποίο τοποθετήται σαν gadget κάτω ακριβώς από τον τίτλο του blog σας και είναι αυτό που δείχνει η εικόνα αριστερά. Δεν θα χρειαστεί να προσθέσετε κάτι στο πρότυπο του blog σας, αλλά θα χρειαστεί να αφαιρέσετε την ενότητα TABS που βρίσκεται περίπου στις γραμμές 325-373 πέντε γραμμές πάνω ή πέντε γραμμές κάτω θα τον βρήτε ανοίγωντας το πρώτο βελάκι που θα συναντήσετε μέσα στο πρότυπο σας για να επεκταθεί το κρυμένο μέρος του κώδικα.
Πρέπει να τον διαγράψετε αν θέλετε να λειτουργήσει το gadget του οριζοντίου μενού με υπομενού που σας δίνω παρακάτω. Αφου το διαγράψετε σώστε το πρότυπό σας και πηγαίνετε στη διάταξη / προσθήκη gadget  / HTML/Javascript  και κάντε επικόλληση τον παρακάτω κώδικα. Μην ξεχάσετε να αλλάξετε τα links μου με τα δικά σας links. Εχω προσθέσει και μια παραλλαγή του 2ου μέρους αυτού του κώδικα που εμφανίζει και 2ο υπομενού επιλέξτε όποια σας εξυπηρετεί καλύτερα.

ΠΑΤΗΣΤΕ ΕΔΩ ΓΙΑ ΝΑ ΤΟ ΔΕΙΤΕ ΣΕ ΛΕΙΤΟΥΡΓΙΑ ΣΕ ΕΝΑ DEMO BLOG ►

<style>
#mbt-menu, #mbt-menu ul {margin: 0;padding: 0;list-style: none;}
#mbt-menu {overflow:visible;width: 1500px;margin: 0px auto;border: 1px solid #FBBB22;background-color: #333333; -moz-border-radius: 6px; -webkit-border-radius: 6px;border-radius: 6px;}
#mbt-menu:before, #mbt-menu:after {content: "";display: table;}
#mbt-menu:after {clear: both;}
#mbt-menu {zoom:1;}
#mbt-menu li {float: left;border-right: 1px solid #FBBB22;position: relative;}
#mbt-menu a {float: left;padding: 11px 8px;color: #FFFFFF;border-bottom: 1px solid #FBBB22;font: 13px Arial,text-decoration: none;}
#mbt-menu li:hover > a {color: #FFFF00;}
*html #mbt-menu li a:hover { /* IE6 only */ color: #FFFF00;}
#mbt-menu ul {margin: 20px 0 0 0; _margin: 0; /*IE6 only*/ opacity:0;visibility: hidden; position: absolute; top: 38px; left: 0z-index: 9999; background: #333333;
-moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out;}
#mbt-menu li:hover > ul {opacity: 1;visibility: visible;margin: 0;}
#mbt-menu ul ul {top: 0;left: 240px;margin: 0 0 0 4x;_margin: 0; /*IE6 only*/}
#mbt-menu ul li {float: none;display: block;border: 0;_line-height: 0; /*IE6 only*/}
#mbt-menu ul li:last-child {-moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;}
#mbt-menu ul a {padding: 8px;width: 240px;_height: 10px; /*IE6 only*/ display: block; white-space: nowrap;float: none;text-transform: none;}
#mbt-menu ul a:hover {background-color: #740777;}
#mbt-menu ul li:first-child > a {-moz-border-radius:3px 3px 0 0; -webkit-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;}
#mbt-menu ul li:first-child > a:after {content: '';position: absolute;left: 40px;top: -6px;border-left: 6px solid transparent;border-right: 6px solid transparent;border-bottom: 6px solid #FBBB22;}
#mbt-menu ul ul li:first-child a:after {left: -6px;top: 50%;margin-top: -6px;border-bottom 6px solid #FBBB22;}
#mbt-menu ul li:first-child a:hover:after {border-bottom-color: #FBBB22;}
#mbt-menu ul ul li:first-child a:hover:after {border-bottom-color: #FBBB22;}
#mbt-menu ul li:last-child > a {-moz-border-radius:0 0 3px 3px; -webkit-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;}
</style>

<ul id="mbt-menu">
<li><a href='http://the-best-widgets.blogspot.gr'>HOME</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/p/my-posts.html'>MY POSTS</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/p/blog-page_11.html'>MY LINKS</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/p/wigdets.html'>MY VIDEOS </a><ul>
<li><a href='https://www.youtube.com/user/WIDGETSFORBLOGS'>Widgets for blogs videos</a></ul>
<li><a href='http://the-best-widgets.blogspot.gr/p/widgets_859.html'>MY PHOTOS ▼</a><ul>
<li><a href='http://imgur.com/' title='Imgur.com'>Imgur.com</a></li>
<li><a href='http://www.flickr.com'>Flickr.com</a></li>
<li><a href='https://www.pinterest.com">Pinterest.com</a></ul>
<li><a href='http://the-best-widgets.blogspot.gr/p/widgets_26.html'>MY FILES ▼</a><ul>
<li><a href='https://drive.google.com/folderview?id=0B8GeBeRdN9NsX0RKYzZOemtw&usp=sharing'>Annimated Gifs</a></li>
<li><a href='https://drive.google.com/folderview?id=0B8GeBeRdN9NsT3VPRkpOYmUw&usp=sharing'>Blogger backrounds</a></li>
<li><a href='https://app.box.com/s/chdfmak9du0v6hlg0h5b'>Ringtones</a></li>
<li><a href='https://app.box.com/s/if98ihmj6bs15f69bro2'>Free programs</a></ul></li>
<li><a href='http://the-best-widgets.blogspot.gr/p/blog-page.html'>MY MUSIC</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/p/my-forum.html'>FORUM+CHAT</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/p/widgets_9083.html'>RADIO+TV</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/p/wigdets_31.html'>NEWS</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/p/widgets_3619.html'>RSS</a></ul>

ΑΝ ΘΕΛΕΤΕ ΑΝΤΙΚΑΤΑΣΤΗΣΤΕ ΤΟ 2Ο ΜΕΡΟΣ ΤΟΥ ΚΩΔΙΚΑ ΜΕ ΤΗΝ ΠΑΡΑΛΛΑΓΗ ΤΩΝ 2 ΥΠΟΜΕΝΟΥ.
<ul id="mbt-menu">
<li><a href="http://the-best-widgets.blogspot.gr">HOME</a></li>
<li><a href="http://the-best-widgets.blogspot.gr/p/my-posts.html">MY POSTS ▼</a>
<ul>
<li><a href="#">MY LINK-1.1 ►</a>
<ul>
<li><a href="#">MY LINK-1.1.1</a><li>
<li><a href="#">MY LINK-1.1.2</a></li>
<li><a href="#">MY LINK-1.1.3</a></li>
<li><a href="#">MY LINK-1.1.4</a></li>
<li><a href="#">MY LINK-1.1.5</a>
</ul></li>
<li><a href="#">MY LINK-1.2 ►</a>
<ul>                 
<li><a href="#">MY LINK-1.2.1</a><li>
<li><a href="#">MY LINK-1.2.2</a></li>
<li><a href="#">MY LINK-1.2.3</a></li>
<li><a href="#">MY LINK-1.2.4</a></li>
<li><a href="#">MY LINK-1.2.5</a>
</ul></li>
<li><a href="#">MY LINK-1.3 ►</a>
<ul>                 
<li><a href="#">MY LINK-1.3.1</a><li>
<li><a href="#">MY LINK-1.3.2</a></li>
<li><a href="#">MY LINK-1.3.3</a></li>
<li><a href="#">MY LINK-1.3.4</a></li>
<li><a href="#">MY LINK-1.3.5</a>
</ul></li>
<li><a href="#">MY LINK-1.4 ►</a>
<ul>                  
<li><a href="#">MY LINK-1.4.1</a><li>
<li><a href="#">MY LINK-1.4.2</a></li>
<li><a href="#">MY LINK-1.4.3</a></li>
<li><a href="#">MY LINK-1.4.4</a></li>
<li><a href="#">MY LINK-1.4.5</a>
</ul></li>
<li><a href="#">MY LINK-1.5 ►</a>
<ul>                 
<li><a href="#">MY LINK-1.5.1</a><li>
<li><a href="#">MY LINK-1.5.2</a></li>
<li><a href="#">MY LINK-1.5.3</a></li>
<li><a href="#">MY LINK-1.5.4</a></li>
<li><a href="#">MY LINK-1.5.5</a>
</ul></ul>
<li><a href="http://the-best-widgets.blogspot.gr/p/blog-page_11.html">MY LINKS ▼</a>
<ul>
<li><a href="#">MY LINK 2.1 ►</a>
<ul>
<li><a href="#">MY LINK-2.1.1</a><li>
<li><a href="#">MY LINK-2.1.2</a></li>
<li><a href="#">MY LINK-2.1.3</a></li>
<li><a href="#">MY LINK-2.1.4</a></li>
<li><a href="#">MY LINK-2.1.5</a>
</ul>
</li>
<li><a href="#">MY LINK 2.2</a></li>
<li><a href="#">MY LINK 2.3</a></li>
<li><a href="#">MY LINK 2.4</a></li>
<li><a href="#">MY LINK 2.5 ►</a>
<ul>
<li><a href="#">MY LINK-2.5.1</a><li>
<li><a href="#">MY LINK-2.5.2</a></li>
<li><a href="#">MY LINK-2.5.3</a></li>
<li><a href="#">MY LINK-2.5.4</a></li>
<li><a href="#">MY LINK-2.5.5</a></li>
</ul></ul>
<li><a href="#">MY PHOTOS ▼</a>
<ul>
<li><a href="#">MY LINK 3.1</a></li>
<li><a href="#">MY LINK 3.2</a></li>
<li><a href="#">MY LINK 3.3</a></li>
<li><a href="#">MY LINK 3.4</a></li>
<li><a href="#">MY LINK 3.5</a>
</ul></li>
<li><a href="#">MY VIDEOS ▼</a>
<ul>
<li><a href="#">MY LINK 4.1</a></li>
<li><a href="#">MY LINK 4.2</a></li>
<li><a href="#">MY LINK 4.3</a></li>
<li><a href="#">MY LINK 4.4</a></li>
<li><a href="#">MY LINK 4.5</a>
</ul></li>
<li><a href="#">MY MUSIC ▼</a>
<ul>
<li><a href="#">MY LINK 5.1</a></li>
<li><a href="#">MY LINK 5.2</a></li>
<li><a href="#">MY LINK 5.3</a></li>
<li><a href="#">MY LINK 5.4</a></li>
<li><a href="#">MY LINK 5.5</a>
</ul></li>
<li><a href="#">MY PRESENTATIONS ▼</a>
<ul>
<li><a href="#">MY LINK 6.1</a></li>
<li><a href="#">MY LINK 6.2</a></li>
<li><a href="#">MY LINK 6.3</a></li>
<li><a href="#">MY LINK 6.4</a></li>
<li><a href="#">MY LINK 6.5</a>
</ul></li>
<li><a href="#">MY FILES ▼</a>
<ul>
<li><a href="#">MY LINK 7.1</a></li>
<li><a href="#">MY LINK 7.2</a></li>
<li><a href="#">MY LINK 7.3</a></li>
<li><a href="#">MY LINK 7.4</a></li>
<li><a href="#">MY LINK 7.5</a>
</ul></li>
<li><a href="#">MY E-BOOKS ▼</a>
<ul>
<li><a href="#">MY LINK 8.1</a></li>
<li><a href="#">MY LINK 8.2</a></li>
<li><a href="#">MY LINK 8.3</a></li>
<li><a href="#">MY LINK 8.4</a></li>
<li><a href="#">MY LINK 8.5</a>
</ul></li>
<li><a href="#">MY WIDGETS ▼</a>
<ul>
<li><a href="#">MY LINK 9.1</a></li>
<li><a href="#">MY LINK 9.2</a></li>
<li><a href="#">MY LINK 9.3</a></li>
<li><a href="#">MY LINK 9.4</a></li>
<li><a href="#">MY LINK 9.5</a>
</ul></li>
<li><a href="#">MY FORUM</a></li>
<li><a href="#">MY NEWS</a></li>
<li><a href="#">RSS</a></li>
</ul>

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

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

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

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