MY CODES

MEGA MENU WITH COLOR BUTTONS AND SUBMENUS-2

260 views

MEGA-MENU-WITH-COLOR-SM-2MEGA MENU WITH COLOR BUTTONS AND SUBMENUS-2

.

.

.

.

.

<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:30px;left:0px; z-index:999;}
</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>
<a href="http://the-best-widgets.blogspot.gr"><button style="position:relative;float:left;width:auto;height:30px;background:#FF4500;color:#FFF; font:14px Arial;cursor:pointer;">HOME</button></a>
<div id="f-box">
<a href="#"><button style="position:relative;float:left;width:auto;height:30px;background:#105105;color:#FFF; font:14px Arial;cursor:pointer;">MY POSTS ▼</button></a>
<div id="f-box-wrap">
<div style="position:relative;left:55px;background:#003300;padding:5px;float:left;width:270px;">
<span style="font:Bold 14px Arial;background:#FFFF00;color:#000;">MY POSTS</span><br/>
<a href='http://the-best-widgets.blogspot.gr/p/my-posts.html'>ΌΛΑ ΤΑ ΑΡΘΡΑ (2 στήλες μόνο τίτλοι)</a><br/>
<a href='http://the-best-widgets.blogspot.gr/p/my-posts_19.html'>ΌΛΑ ΤΑ ΑΡΘΡΑ (3 στήλες μόνο τίτλοι)</a><br/>
<a href='http://the-best-widgets.blogspot.gr/p/widgets_3619.html'>ΌΛΑ ΤΑ ΑΡΘΡΑ (μόνο τίτλοι σε καρτέλες)</a><br/>
<a href='http://the-best-widgets.blogspot.gr/p/blog-page_3.html'>MY ARTICLES (with bookmarks)</a><br/>
<a href='http://the-best-widgets.blogspot.gr/p/wigdets_31.html'>MY CODES (with bookmarks)</a><br/>
</div></div></div>
<div id="f-box">
<a href="#"><button style="position:relative;float:left;width:auto;height:30px;background:#333;color:#FFF; font:14px Arial;cursor:pointer;">LABELS ▼</button></a>
<div id="f-box-wrap">
<div style=" background:#333;padding:5px;float:left;width:270px;">
<span style="font:Bold 14px Arial;background:#FFFF00;color:#000;">LABELS 1</span><br/>
<a href='http://the-best-widgets.blogspot.gr/search/label/TEXT BOXES'>TEXT BOXES</a><br/>
<a href='http://the-best-widgets.blogspot.gr/search/label/SLIDESHOWS'>SLIDESHOWS</a><br/>
<a href='http://the-best-widgets.blogspot.gr/search/label/BACKGROUNDS'>BACKGROUNDS</a><br/>
<a href='http://the-best-widgets.blogspot.gr/search/label/ΕΝΣΩΜΑΤΩΣΗ ΑΡΧΕΙΩΝ'>ΕΝΣΩΜΑΤΩΣΕΙΣ</a><br/>
<a href='http://the-best-widgets.blogspot.gr/search/label/IMAGE EFFECTS'>IMAGE EFFECTS</a><br/>
<a href='http://the-best-widgets.blogspot.gr/search/label/ΑΣΦΑΛΕΙΑ BLOG'>ΑΣΦΑΛΕΙΑ BLOG</a><br/>
<a href='http://the-best-widgets.blogspot.gr/search/label/SEO'>ΣΥΜΒΟΥΛΕΣ SEO</a><br/>
<a href='http://the-best-widgets.blogspot.gr/search/label/ΣΧΟΛΙΑ BLOGGER'>ΣΧΟΛΙΑ BLOGGER</a><br/>
<a href='http://the-best-widgets.blogspot.gr/search/label/FACEBOOK WIDGETS'>FACEBOOK WIDGETS</a><br/>
<a href='http://the-best-widgets.blogspot.gr/search/label/WIDGETS ΓΙΑ BLOGS'>ΆΛΛΑ WIDGETS ΓΙΑ BLOGS</a><br/>
</div>
<div style="background:#131222;padding:5px;float:left;width:290px;">
<span style="font:Bold 14px Arial;background:#FFFF00;color:#000;">LABELS 2</span><br/>
<a href='http://the-best-widgets.blogspot.gr/search/label/COUNTERS'>COUNTERS</a><br/>
<a href='http://the-best-widgets.blogspot.gr/search/label/POST SLIDER'>POST SLIDERS</a><br/>
<a href='http://the-best-widgets.blogspot.gr/search/label/ON LINE TOOLS'>ON LINE ΕΡΓΑΛΕΙΑ</a><br/>
<a href='http://the-best-widgets.blogspot.gr/search/label/ΜΟΡΦΟΠΟΙΗΣΗ BLOG'>ΜΟΡΦΟΠΟΙΗΣΗ BLOG</a><br/> 
<a href='http://the-best-widgets.blogspot.gr/search/label/CLOCKS AND CALENDARS'>CLOCKS AND CALENDARS</a><br/>
<a href='http://the-best-widgets.blogspot.gr/search/label/ΤΑΞΙΝΟΜΗΣΗ ΑΝΑΡΤΗΣΕΩΝ'>ΤΑΞΙΝΟΜΗΣΗ ΑΝΑΡΤΗΣΕΩΝ</a><br/>
<a href='http://the-best-widgets.blogspot.gr/search/label/GALLERIES'>VIDEO & PHOTO GALLERIES</a><br/>
<a href='http://the-best-widgets.blogspot.gr/search/label/SOSIAL BUTTONS'>BUTTONS & POP UP WINDOWS</a><br/>
<a href='http://the-best-widgets.blogspot.gr/search/label/CHRISTMAS WIDGETS'>ΧΡΙΣΤΟΥΓΕΝΝΙΑΤΙΚΑ GADGETS</a><br/>
<a href='http://the-best-widgets.blogspot.gr/search/label/ΟΡΙΖΟΝΤΙΑ ΚΑΙ ΚΑΘΕΤΑ ΜΕΝΟΥ'>ΟΡΙΖΟΝΤΙΑ ΚΑΙ ΚΑΘΕΤΑ ΜΕΝΟΥ</a><br/>
<a href='http://the-best-widgets.blogspot.gr/search/label/ΚΥΛΙΟΜΕΝΑ LINKS TEXT IMAGES'>ΚΥΛΙΟΜΕΝΑ LINKS TEXT IMAGES</a><br/>
</div></div></div>
<div id="f-box">
<a href="#"><button style="position:relative;float:left;width:auto;height:30px; background:#661111; color:#FFFFFF; font:14px Arial; cursor:pointer;">MY LINKS ▼</button></a>
<div id="f-box-wrap">
<div style="position:relative;left:55px;background:#661111;padding:5px;float:left;width:240px;">
<span style="font:Bold 14px Arial;background:#FFFF00;color:#000;">MY LINKS 1</span><br/>
<a href='http://the-best-widgets.blogspot.gr/p/blog-page_11.html'>MY LINKS-1</a><br/>
<a href='http://gadgetsforblogs1.blogspot.gr'>MY DEMO BLOG-1</a><br/>
<a href='http://gadgetsforblogs2.blogspot.gr'>MY DEMO BLOG-2</a><br/>
<a href='http://gadgetsforblogs3.blogspot.gr'>MY DEMO BLOG-3</a><br/>
<a href='http://gadgetsforblogs4.blogspot.gr'>MY DEMO BLOG-4</a><br/>
<a href='http://gadgetsforblogs5.blogspot.gr'>MY DEMO BLOG-5</a><br/>
</div>
<div style="position:relative;left:55px;background:#580200;padding:5px;float:left;width:240px;">
<span style="font:Bold 14px Arial;background:#FFFF00;color:#000;">MY LINKS 2</span><br/>
<a href='http://the-best-widgets.blogspot.gr/p/ranks.html'>MY LINKS-2</a><br/>
<a href='http://gadgetsforblogs6.blogspot.gr'>MY DEMO BLOG-6</a><br/>
<a href='http://gadgetsforblogs7.blogspot.gr'>MY DEMO BLOG-7</a><br/>
<a href='http://gadgetsforblogs8.blogspot.gr'>MY DEMO BLOG-8</a><br/>
<a href='http://the-best-widgets.blogspot.gr/p/friendly-blogs.html'>MY FRIENDLY BLOGS</a><br/>
<a href='http://widgets.freeforums.net'>MY FORUM</a><br/>
</div></div></div>
<div id="f-box">
<a href="#"><button style="position:relative;float:left;width:auto; height:30px; background:#115599; color:#FFFFFF;  font: 14px Arial; cursor:pointer;">MY PHOTOS ▼</button></a>
<div id="f-box-wrap">
<div style="position:relative;left:170px;background:#173377;padding:5px;float:left;width:240px;">
<span style="font:bold 14px arial;background:#FFFF00;color:#000;">MY PHOTOS 1</span><br/>
<a href='http://the-best-widgets.blogspot.gr/p/photo-gallery-1.html'>MY PHOTO GALLERY-1</a><br/>
<a href='http://the-best-widgets.blogspot.gr/p/imgur-slideshow.html'>IMGUR SLIDESHOW</a><br/>
<a href='http://the-best-widgets.blogspot.gr/p/flickr-slideshow.html'>FLICKR SLIDESHOW</a><br/>
<a href='http://the-best-widgets.blogspot.gr/p/picasa-slideshow.html'>PICASA SLIDESHOW</a><br/>
</div>
<div style="position:relative;left:170px;background:#000080;padding:5px;float:left;width:240px;">
<span style="font:Bold 14px Arial;background:#FFFF00;color:#000;">MY PHOTOS 2</span><br/>
<a href='http://the-best-widgets.blogspot.gr/p/photo-gallery-2.html'>MY PHOTO GALLERY-2</a><br/>
<a href='http://the-best-widgets.blogspot.gr/p/panoramio-slideshow.html'>PANORAMIO SLIDESHOW</a><br/>
<a href='http://the-best-widgets.blogspot.gr/p/photobucket-slideshow.html'>PHOTOBUCKET SLIDESHOW</a><br/>
<a href='http://the-best-widgets.blogspot.gr/p/widgets_859.html'>PINTEREST PHOTO GALLERY</a><br/>
</div></div></div>
<div id="f-box">
<a href="#"><button style="position:relative;float:left;width:auto; height:30px; background:#740777;color:#FFF;font:14px arial;cursor:pointer;">MY VIDEOS ▼</button></a>
<div id="f-box-wrap">
<div style="position:relative;left:465px;background:#621061;padding:5px;float:left;width:240px;">
<a href='http://the-best-widgets.blogspot.gr/p/wigdets.html'>VIDEO GALLERY-1</a><br/>
<a href='http://the-best-widgets.blogspot.gr/p/blog-page_31.html'>VIDEO GALLERY-2</a><br/>
<a href='https://www.youtube.com/user/WIDGETSFORBLOGS'>MY VIDEOS ON YOUTUBE</a>
</div></div></div>
<a href="http://the-best-widgets.blogspot.gr/p/widgets_26.html"><button style="position:relative;float:left;width:auto; height:30px; background:#532000;color:#FFF;font:14px Arial; cursor:pointer;">MY FILES</button></a>
<a href="http://the-best-widgets.blogspot.gr/p/blog-page.html"><button style="position:relative;float:left; width:auto;height:30px; background:#FBBB22;color:#000;font: 14px Arial; cursor:pointer;">MY MUSIC</button></a>
<a href="http://the-best-widgets.blogspot.gr/p/widgets_9083.html"><button style="position:relative;float:left;width:auto;height:30px;background:#A11111;color:#FFF;font: 14px Arial; cursor:pointer;">RADIO+TV+NEWS</button></a>
<a href="https://www.facebook.com/widgetsforblogs" target="_blank">
<img border="0" alt="Facebook" style="width: 30px; height: 30px;" src="https://lh5.googleusercontent.com/-2MBwof2uxV4/VRQN0nW6JDI/AAAAAAAAQUY/JOwLKi_llyA/s30-no/facebook-40.jpg"/></a>
<a href="https://plus.google.com/113381416528370124258/posts" target="_blank">
<img border="0" alt="Google plus" style="width: 30px; height: 30px;" src="https://lh4.googleusercontent.com/-IgW-E6gh6co/VRQN0u4sKZI/AAAAAAAAQUM/O0WMlEhgDlk/s30-no/Google%2B40.jpg"/></a>
<a href="https://www.youtube.com/user/WIDGETSFORBLOGS" target="_blank">
<img border="0" alt="YouTube" style="width: 30px; height: 30px;" src="https://lh5.googleusercontent.com/-5yqWFAAr9W4/VRQN6lH0AWI/AAAAAAAAQU0/0aiBGC97W_E/s30-no/youtube-40.jpg"/></a>
<a href="http://www.pinterest.com" target="_blank">
<img border="0" alt="Pinterest" style="width: 30px; height: 30px;" src="https://lh5.googleusercontent.com/-_uS5seiyCu4/VRQN0qs40YI/AAAAAAAAQUQ/d5ItE7IzCzE/s30-no/pinterest-40.jpg"/></a>
<a href="http://www.start.me/p/ZdezYM/widgets-for-blogs" target="_blank">
<img border="0" alt="Start.me" style="width: 30px; height: 30px;" src="https://lh5.googleusercontent.com/-jWrEy7WoWL4/VZk0By55QmI/AAAAAAAAR_E/VvsfYK0R6RA/s30-no/start.me.jpg"/></a>
Για να σχολιάσετε πρέπει να συνδεθείτε.
Προηγούμενο άρθρο
MEGA MENU WITH COLOR BUTTONS AND SUBMENUS-1
Επόμενο άρθρο
MEGA STATIC MENU WITH IFRAMES