MEGA MENU WITH COLOR HOVER BUTTONS

MEGA MENU WITH COLOR HOVER BUTTONS
Το παρακάτω mega menu έχει έγχρωμα buttons με hover effect ακόμα και στα υπομενού του και στο τέλος του έχει και sosial follow icons. Μπορεί να μπεί απλά σαν gadget στο οριζόντιο κουτάκι gadget του blogger. Αντιγράψτε τον παρακάτω κώδικα αλλάζοντας τα δικά μου links με τα δικά σας. Μπορείτε να αλλάξετε και τις διαστάσεις των υπομενού για να χωράνε τα buttons σας και εννοείται και τα χρώματα των buttons και των υπομενού.
ΔΕΙΤΕ ΤΟ ΣΕ ΛΕΙΤΟΥΡΓΙΑ ΣΕ ΕΝΑ DEMO BLOG ΕΔΩ ►
<style>    
#f-box #f-box-wrap {display:none;z-index:99;padding:0px}
#f-box:hover  #f-box-wrap {display:block}
#f-box:hover  #f-box-wrap {position:absolute;top:37px;z-index:999;ul list-style:none;} 
/* COLOR BUTTONS STYLE ----------------------------------------------- */
.button{font:13px Arial;text-decoration:none !important;white-space:nowrap;display:inline-block;vertical-align:baseline;position:relative;cursor:pointer;
padding:6px 8px;background-clip:border-box;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;webkit-transition:background-position 1s;
-moz-transition:background-position 1s;transition:background-position 1s;}
.button:hover{background-position:top left;background-position:top left, bottom right, 0 0, 0 0;}
.button:active{bottom:-1px;}
.button.px16 {font-size:16px;}
.button.px15 {font-size:15px;}
.button.px14 {font-size:14px;}
.button.px13 {font-size:13px;}
.button.px12 {font-size:12px;}
.button.px11 {font-size:11px;}
.button.px10 {font-size:10px;}
.button.rounded{-moz-border-radius:4em;-webkit-border-radius:4em;border-radius:4em;}
.c0.button{position:relative;float:left;color:#FFFFFF !important;border:1px solid #33FFFF !important;background-color: #173374;margin-bottom:3px;}
.c0.button:hover{position:relative;float:left;color:#FFFFFF; background-color:#115599;}
.c1.button{position:relative;float:left;color:#FFFFFF !important;border:1px solid #33FFFF !important;background-color: #115599;margin-bottom:3px;}
.c1.button:hover{position:relative;float:left;color:#FFFFFF; background-color:#173374;margin-bottom:3px;}
.c2.button{position:relative;float:left;color:#FFFFFF !important;border:1px solid #FBBB22 !important;background-color:#105105;margin-bottom:3px;}
.c2.button:hover{position:relative;float:left;color:#FFFFFF;background-color:#207907;}
.c3.button{position:relative;float:left;color:#FFFFFF !important;border:1px solid #FBBB22 !important;background-color: #990000;margin-bottom:3px;}
.c3.button:hover{position:relative;float:left;color:#FFFFFF;background-color:#FF1111;}
.c4.button{position:relative;float:left;color:#FFFFFF !important;border:1px solid #FBBB22 !important;background-color: #333333;margin-bottom:3px;}
.c4.button:hover{position:relative;float:left;color:#FFFFFF;background-color:#000000;}
.c5.button{position:relative;float:left;color:#FFFFFF !important;border:1px solid #FBBB22 !important;background-color: #740777;margin-bottom:3px;}
.c5.button:hover{position:relative;float:left;color:#FFFFFF; background-color:#A90C94;}
.c6.button{position:relative;float:left;color:#FFFFFF !important;border:1px solid #FFFF00 !important;background-color:#52280E;margin-bottom:3px;}
.c6.button:hover{position:relative;float:left;color:#FFFFFF;background-color:#803503;}
.c7.button{position:relative;float:left;color:#000000 !important;border:1px solid #000000 !important;background-color: #33FFFF;margin-bottom:3px;}
.c7.button:hover{position:relative;float:left;color:#000000;background-color:#05A2AA;}
.c8.button{position:relative;float:left;color:#000000 !important;border:1px solid #000000 !important;background-color: #03C039;margin-bottom:3px;}
.c8.button:hover{position:relative;float:left;color:#000000;background-color:#4EFF44;}
.c9.button{position:relative;float:left;color:#000000 !important;border:1px solid #000000 !important;background-color: #FFFF00;margin-bottom:3px;}
.c9.button:hover{position:relative;float:left;color:#000000;background-color:#FFBB22;}
.c10.button{position:relative;float:left;color:#FFFFFF !important;border:1px solid #FBBB22 !important;background-color: #364151;margin-bottom:3px;}
.c10.button:hover{position:relative;float:left;background-color:#263652;color:#FFFFFF;}
.c11.button{position:relative;float:left;color:#000000 !important;border:1px solid #000000 !important;background-color: #EAB1E9;margin-bottom:3px;}
.c11.button:hover{position:relative;float:left;color:#000000;background-color:#FCD7FC;}
.c12.button{position:relative;float:left;color:#000000 !important;border:1px solid #000000 !important;background-color: #DEA657;margin-bottom:3px;}
.c12.button:hover{position:relative;float:left;color:#000000;background-color:#FF6600;}
.c13.button{position:relative;float:left;color:#661111 !important;border:1px solid #000000 !important;background-color: #FBF5F5;margin-bottom:3px;}
.c13.button:hover{position:relative;float:left;color:#661111;background-color:#FFFFFF;}
.c14.button{position:relative;float:left;color:#FFFFFF !important;border:1px solid #000000 !important;background-color: #FF6600;margin-bottom:3px;}
.c14.button:hover{position:relative;float:left;color:#000000;background-color:#885000;}
</style>  
<script>
hover = function() {
if (!document.body.currentStyle) return;
var DIVf-box = document.getElementById('f-box');
var DIVf-box_wrap = document.getElementById('f-box-wrap');
DIVf-box.onmouseover = function() {
DIVf-box_wrap.style.display = 'block';}
DIVf-box.onmouseout = function() {
DIVf-box_wrap.style.display = 'none';}}
window.onload = hover;
</script>

<div id="f-box">
<a href="https://the-best-widgets.blogspot.com" target="_parent" class="button c9 px14">HOME</a>
</div>

<div id="f-box">
<a href="#" target="_parent" class="button c2 px14">MY POSTS</a>

<div id="f-box-wrap">
<div style="position:relative;float:left;top:-8px;left:58px;background:#173374; border:1px solid #33FFFF;border-radius:8px; height:auto; width:230px;overflow:auto; padding:5px;">
<a href="https://the-best-widgets.blogspot.com/p/my-posts.html" target="_parent" class="button c8 px12">Όλα τα άρθρα (2 στήλες μόνο τίτλοι)</a>
<a href="https://the-best-widgets.blogspot.com/p/my-posts_19.html" target="_parent" class="button c7 px12">Όλα τα άρθρα (3 στήλες μόνο τίτλοι)</a>
<a href="https://the-best-widgets.blogspot.com/p/widgets_3619.html" target="_parent" class="button c14 px12">Όλα τα άρθρα 21 καρτέλες μόνο τίτλοι</a>
<a href="https://the-best-widgets.blogspot.com/p/my-forum.html" target="_parent" class="button c9 px12">Όλα τα άρθρα 21 carousel sliders</a>
</div></div></div>

<div id="f-box">
<a href="#" class="button c14 px14">MY LABELS</a>

<div id="f-box-wrap">
<div style="position:relative;float:left;top:-8px;left:152px;background:#173374; border:1px solid #33FFFF;border-radius:8px; height:auto; width:255px;overflow:auto; padding:5px;">
<a href="https://the-best-widgets.blogspot.gr/search/label/ΟΡΙΖΟΝΤΙΑ ΚΑΙ ΚΑΘΕΤΑ ΜΕΝΟΥ?max-results=32" class="button c2 px12">Menu (35)</a>
<a href="https://the-best-widgets.blogspot.gr/search/label/GALLERIES" class="button c1 px12">Video & photo galleries (12)</a>
<a href="https://the-best-widgets.blogspot.gr/search/label/TEXT BOXES" class="button c6 px12">Text boxes 14</a>
<a href="https://the-best-widgets.blogspot.gr/search/label/ΜΟΡΦΟΠΟΙΗΣΗ BLOG?max-results=32" class="button c5 px12">Μορφοποίηση blog (32)</a>
<a href="https://the-best-widgets.blogspot.gr/search/label/SEO" class="button c10 px12">Seo (7)</a>
<a href="https://the-best-widgets.blogspot.gr/search/label/ΤΑΞΙΝΟΜΗΣΗ ΑΝΑΡΤΗΣΕΩΝ?max-results=48" class="button c3 px12">Ταξινόμηση αναρτήσεων (16)</a>
<a href="https://the-best-widgets.blogspot.gr/search/label/BACKGROUNDS?max-results=48" class="button c8 px12">Backgrounds (26)</a>
<a href="https://the-best-widgets.blogspot.gr/search/label/ΕΝΣΩΜΑΤΩΣΗ ΑΡΧΕΙΩΝ" class="button c12 px12">Ενσωματώσεις (14)</a>
<a href="https://the-best-widgets.blogspot.gr/search/label/WIDGETS ΓΙΑ BLOGS?max-results=32" class="button c10 px12">Αλλα widgets (16)</a>
<a href="https://the-best-widgets.blogspot.gr/search/label/ΑΣΦΑΛΕΙΑ BLOG" class="button c4 px12">Ασφάλεια blog (6)</a>
<a href="https://the-best-widgets.blogspot.gr/search/label/FACEBOOK WIDGETS" class="button c1 px12">Facebook (10)</a>
<a href="https://the-best-widgets.blogspot.gr/search/label/SOSIAL BUTTONS?max-results=32" class="button c7 px12">Buttons & windows (22)</a>
<a href="https://the-best-widgets.blogspot.gr/search/label/IMAGE EFFECTS" class="button c11 px12">Image effects (18)</a>
<a href="https://the-best-widgets.blogspot.gr/search/label/ΣΧΟΛΙΑ BLOGGER" class="button c14 px12">Σχόλια blogger (9)</a>
<a href="https://the-best-widgets.blogspot.gr/search/label/ON LINE TOOLS" class="button c3 px12">On line tools (16)</a>
<a href="https://the-best-widgets.blogspot.gr/search/label/SLIDESHOWS?max-results=48" class="button c9 px12">Slideshows (38)</a>
<a href="https://the-best-widgets.blogspot.gr/search/label/ΚΥΛΙΟΜΕΝΑ LINKS TEXT IMAGES" class="button c5 px12">Κυλιόμενα links, texts & images (12)</a>
<a href="https://the-best-widgets.blogspot.gr/search/label/POST SLIDER?max-results=48" class="button c12 px12">Post sliders (6)</a>
<a href="https://the-best-widgets.blogspot.gr/search/label/CHRISTMAS WIDGETS" class="button c8 px12">Christmas gadgets (10)</a>
<a href="https://the-best-widgets.blogspot.gr/search/label/CLOCKS AND CALENDARS" class="button c1 px12">Clocks & calendars (7)</a>
<a href="https://the-best-widgets.blogspot.gr/search/label/COUNTERS" class="button c7 px12">Counters (7)</a></div></div></div>

<div id="f-box">
<a href="#" class="button c3 px14">MY LINKS</a>

<div id="f-box-wrap">
<div style="position:relative;float:left;top:-8px;left:250px;background:#173374; border:1px solid #33FFFF;border-radius:8px; height:auto; width:205px;overflow:auto; padding:5px;">
<a href="https://the-best-widgets.blogspot.com/p/sosial-networks-links-3.html" target="_parent" class="button c13 px12">All my links in tabs</a>
<a href="https://the-best-widgets.blogspot.com/p/blog-page_11.html" target="_parent" class="button c7 px12">Sosial Networks links</a>
<a href="https://the-best-widgets.blogspot.com/p/ranks.html" target="_parent" class="button c3 px12">Best Sites & Blogs links</a>
<a href="https://the-best-widgets.blogspot.com/p/my-links-3.html" target="_parent" class="button c8 px12">My links in a blank page</a>
<a href="https://the-best-widgets.blogspot.com/2013/07/widgets-for-all.html" target="_parent" class="button c6 px12">300+ Widgets for blogs</a>
<a href="https://the-best-widgets.blogspot.com/p/wigdets_31.html" target="_parent" class="button c12 px12">300+ Html-css-js codes</a>
<a href="https://the-best-widgets.blogspot.com/p/blog-page_3.html" target="_parent" class="button c11 px12">Tools for Bloggers 400 links</a>
<a href="https://my-posts-1.blogspot.com" target="_parent" class="button c14 px12">My demo blog</a>
<a href="https://the-best-widgets.blogspot.com/p/friendly-blogs.html" target="_parent" class="button c9 px12">My friendly blogs</a>
</div></div></div>

<div id="f-box">
<a href="#" class="button c1 px14">MY PHOTOS</a>

<div id="f-box-wrap">
<div style="position:relative;float:left;top:-8px;left:328px;background:#173374; border:1px solid #33FFFF;border-radius:8px; height:auto; width:125px;overflow:auto; padding:5px;">
<a href="https://the-best-widgets.blogspot.com/p/photo-gallery-1.html" class="button c8 px12">Photo galley-1</a>
<a href="https://the-best-widgets.blogspot.com/p/photo-gallery-2.html" class="button c7 px12">Photo gallery-2</a>
<a href="https://the-best-widgets.blogspot.com/p/panoramio-slideshow.html" class="button c14 px12">Photo gallery-3</a>
</div></div></div>

<div id="f-box">
<a href="#" class="button c5 px14">MY VIDEOS</a>

<div id="f-box-wrap">
<div style="position:relative;float:left;top:-8px;left:432px;background:#173374; border:1px solid #33FFFF;border-radius:8px; height:auto; width:135px;overflow:auto; padding:5px;">
<a href="https://the-best-widgets.blogspot.com/p/wigdets.html" class="button c8 px12">Video galley-1</a>
<a href="https://the-best-widgets.blogspot.com/p/blog-page_31.html" class="button c7 px12">Video gallery-2</a>
<a href="https://www.youtube.com/user/WIDGETSFORBLOGS" class="button c14 px12">My youtube channel</a>
</div></div></div>

<div id="f-box">
<a href="https://the-best-widgets.blogspot.com/p/widgets_26.html" class="button c11 px14">MY FILES</a>
</div>

<div id="f-box">
<a href="https://the-best-widgets.blogspot.com/p/blog-page.html" class="button c8 px14">MY MUSIC</a>
</div>

<div id="f-box">
<a href="https://the-best-widgets.blogspot.com/p/widgets_9083.html" class="button c12 px14">RADIO-TV-NEWS</a>
</div>

<a href="https://www.youtube.com/user/WIDGETSFORBLOGS" target="_blank">
<img border="0" alt="YouTube" style="width: 30px; height: 30px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguZhdAz7fHSvqWjy3Za2h7JMENFQxnHzt15gYF54V2tbOXwv_xq5Ir4WEn_cbNWB-Zg_rL1gGRYkpdfjEIBbEfKOIC7Z-JslTQFB7E0jrH9Ihtw4UbfX8q-e2D5ptjlUS-s-kw7sJ3V2Ah/s30-no/youtube-40.jpg"/></a>

<a href="https://github.com" target="_blank">
<img border="0" alt="GITHUB" style="width: 30px; height: 30px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9PEojbZsigqsviGZWbi50LSiqqN-w9nbcgFZbSq0mCPZlgwVo_LTeAe1a7ksaTH5fvF0RNKM6kdUDDLIkNPme1HqQTC2_LhwlIDHwpyRzqQgVYGZNMYc-Ar6TL9y1ymG3Qshk80b4kmYH/s50-rw/"/></a>

<a href="https://glitch.com" title="GLITCH.COM" target="_blank">
<img border="0" alt="glitch.com" style="width: 30px; height: 30px;" src="https://i.imgur.com/rbJTZBc.jpg"/></a>

<a href="https://jsbin.com" target="_blank">
<img border="0" alt="JSBIN" style="width: 30px; height: 30px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-tXDhvZDYzLsFm_64h_NvdGko5na96ra5nr1WgQvRimwMJLsZno71o_ch0Rv3UYRCLgGkYObqQItySQViHzmBOgRPu12q70GYf7VtR23oVEMJoazXo0devX2LjJyl2mpbzz6QSQ0jfujU/s50-rw/"/></a>

<a href="https://www.start.me/p/ZdezYM/widgets-for-blogs" target="_blank">
<img border="0" alt="Start.me" style="width: 30px; height: 30px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWI-wlJBnUn8-AcgnaHhBvex_NmYcgnNFZexhgGwOcMrpayxpOFcsijdbzuo40Kpq-9hOCIduHIxVOWXKL1yXrPzsouNnGj14BJyJzHfBi6h4UoqjoftAXGyPLQCn-HX1g9UtoiIF3-sfA/s30-no/start.me.jpg"/></a>

<a href="https://jsfiddle.net/user/mycodes" target="_blank">
<img border="0" alt="JSFIDDLE" style="width: 30px; height: 30px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiVGiSc7OpPaXvVffdy30SNk5ZfgRQk8-sNKEtdOOV5PhKOjjoRoWRP1Xr8B2bQ2c5KjeVBov5K7n_pwKCcUh3q4SGPhYtY6Zv6WJp_-X9cShn1YDu2QBTBK1uv01XrNlFEMozd3MssqnP/s50-rw/"/></a>

<a href="https://www.codeply.com/users/dikefalos" target="_blank">
<img border="0" alt="CODEPLY" style="width: 30px; height: 30px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgatSrORzlwue4wvltTX_KiDKXD-j0XEPzqY9RMFh9u4Fjzcj8Lob0kpj_1IENdZLNkAx_FEA8-VsK78d-xSR8XxkoG7yZSptYTHqzDTaEPNccgPH2ix2ZHdMp2hcLfjfIqx5fUYDNcqQCq/s50-rw/"/></a>

<a href="http://repl.it" title="REPL.IT" target="_blank">
<img border="0" alt="Repl.it" style="width: 30px; height: 30px;" src="https://i.imgur.com/0u20wez.png"/></a>

<a href="https://codepen.io/my-codes" target="_blank">
<img border="0" alt="CODEPEN" style="width: 30px; height: 30px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF8TWAWZJMFiLidXjk-pNusVIvkvecrFQEgiJkKUSlVLUHD7Ar8tdlz5dXU5asBXa7ucatLVSKbyQRWiK8QftBi8ahMAlOaPQfyF7H7uvrblqW1Ld_amtU5mS9xczcZSCIFEPibPciFoAC/s50-rw/"/></a>

<a href="http://next.plnkr.co" target="_blank">
<img border="0" alt="CODEPEN" style="width: 30px; height: 30px;" src="https://i.imgur.com/yn1S2OM.jpg"/></a>

<a href="https://codesandbox.io/" title="CODESANDBOX.COM" target="_blank">
<img border="0" alt="Codesandbox.io" style="width: 30px; height: 30px;" src="https://i.imgur.com/cneNyp1.jpg"/></a>
Τετ	Πεμ	Παρ	Σαβ	Κυρ	Δευ

+30°	+27°	+25°	+26°	+25°	+26°
+21°	+22°	+22°	+24°	+23°	+23°
WIDGETS FOR BLOGS

SANTORINI

SANTORINI

ZAKYNTHOS

LEYKADA

KEFALLONIA

KERKYRA

RODOS

GADGETS FOR BLOGS

MEGA MENU WITH COLOR HOVER BUTTONS

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

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

ΤΑ ΠΙΟ ΠΡΟΣΦΑΤΑ ΣΧΟΛΙΑ

NEWS WIDGETS

VISITORS TRAFFIC

SANTORINI

SANTORINI

ZAKYNTHOS

LEYKADA

KEFALLONIA

KERKYRA

RODOS

GADGETS FOR BLOGS

document.write(ssyby);

MEGA MENU WITH COLOR HOVER BUTTONS

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

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

ΤΑ ΠΙΟ ΠΡΟΣΦΑΤΑ ΣΧΟΛΙΑ

NEWS WIDGETS

VISITORS TRAFFIC
