ΟΡΙΖΟΝΤΙΟ ΜΕΝΟΥ ΜΕ ΥΠΟΜΕΝΟΥ ΑΠΛΟ ΣΑΝ GADGET 2
Αυτό είναι ένα απλό οριζόντιο μενού με υπομενού το οποίο τοποθετήται σαν gadget κάτω ακριβώς από τον τίτλο του blog σας και είναι αυτό που δείχνει η εικόνα αριστερά. Δεν θα χρειαστεί να προσθέσετε κάτι στο πρότυπο του blog σας, αλλά θα χρειαστεί να αφαιρέσετε την ενότητα TABS που βρίσκεται περίπου στις γραμμές 325-373 πέντε γραμμές πάνω ή πέντε γραμμές κάτω θα τον βρήτε ανοίγωντας το πρώτο βελάκι που θα συναντήσετε μέσα στο πρότυπο σας για να επεκταθεί το κρυμένο μέρος του κώδικα.
Πρέπει να τον διαγράψετε αν θέλετε να
λειτουργήσει το gadget του οριζοντίου μενού με υπομενού που σας δίνω παρακάτω.
Αφου το διαγράψετε σώστε το πρότυπό σας και πηγαίνετε στη διάταξη / προσθήκη
gadget / HTML/Javascript και κάντε επικόλληση τον παρακάτω κώδικα. Μην
ξεχάσετε να αλλάξετε τα links μου με τα δικά σας links. Εχω προσθέσει και μια
παραλλαγή του 2ου μέρους αυτού του κώδικα που εμφανίζει και 2ο
υπομενού επιλέξτε όποια σας εξυπηρετεί καλύτερα.Αυτό είναι ένα απλό οριζόντιο μενού με υπομενού το οποίο τοποθετήται σαν gadget κάτω ακριβώς από τον τίτλο του blog σας και είναι αυτό που δείχνει η εικόνα αριστερά. Δεν θα χρειαστεί να προσθέσετε κάτι στο πρότυπο του blog σας, αλλά θα χρειαστεί να αφαιρέσετε την ενότητα TABS που βρίσκεται περίπου στις γραμμές 325-373 πέντε γραμμές πάνω ή πέντε γραμμές κάτω θα τον βρήτε ανοίγωντας το πρώτο βελάκι που θα συναντήσετε μέσα στο πρότυπο σας για να επεκταθεί το κρυμένο μέρος του κώδικα.
ΠΑΤΗΣΤΕ ΕΔΩ ΓΙΑ ΝΑ ΤΟ ΔΕΙΤΕ ΣΕ ΛΕΙΤΟΥΡΓΙΑ ΣΕ ΕΝΑ 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:
0; z-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>
Δεν υπάρχουν σχόλια:
Δημοσίευση σχολίου
► Γράψτε το σχόλιό σας στο λευκό κουτί και αν θέλετε να ειδοποιηθήτε για την απάντηση τσεκάρετε το κουτάκι "Να λαμβάνω ειδοποιήσεις".
Σημείωση: Μόνο ένα μέλος αυτού του ιστολογίου μπορεί να αναρτήσει σχόλιο.