GADGETS FOR BLOGS

Facebook Google plus YouTube Pinterest Tumblr DIIGO Start.me feedburner

MEGA MENU No 2

MEGA MENU
MEGA MENU No 2
Το mega menu No 2 είναι αυτό που χρησιμοποιώ στο DEMO BLOG-2 και θα το δείτε σε πλήρη λειτουργία ΕΔΩ. Μπορείτε να αλλάξετε τα χρώματα του μενού και των υπομενού αλλάζοντας τους κωδικούς των χρωμάτων που προηγήται το σύμβολο #. Επίσης μποτείτε να αλλάξετε τα μεγέθη των γραματοσειρών και τις εσωτερικές και εξωτερικές αποστάσεις του μενού και των υπομενού. Τα links με τα πράσινα γράμματα πρέπει να αντικατασταθούν με δικά σας links.

Για να λειτουργήσει σωστά πρέπει να σβήσετε την ενότητα /* Tabs ---------*/ που βρίσκεται μέσα στο πρότυπό σας και για να την βρείτε πρέπει να πάτε στην επεξεργασία προτύπου και να πατήσετε το πρώτο βελάκι στην γραμμή 13-15 περίπου για να επεκταθεί το κρυμένο μέρος του κώδικα. Αφού φανεί ο κρυμένος κώδικας με τα μπλέ γράμματα πηγαίνετε περίπου στις γραμμές 325-373 και σβήστε τον κώδικα της ενότητας /* Tabs ---------*/ ο οποίος τελιώνει πριν την ενότητα /* Headings ---------*/ . Μετά αντιγράψτε στη θέση του τον παρακάτω κώδικα.

/* Tabs ----------------------------------------------- */
#crosscol ul {z-index: 200; padding:0 !important;}
#crosscol li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
.tabs-outer {z-index:1;}  
.tabs .widget ul, .tabs .widget ul {overflow: visible;}

Αυτό ήταν τελιώσατε με τις αλλαγές στο πρότυπο. Σώστε το και πηγαίνετε στην διάταξη και αντιγράψτε σαν gadget τον επόμενο κώδικα και το μέγα μενού θα λειτουργήσει χωρίς κανένα πρόβλημα.

<style type="text/css">
.menuHolder {
margin:0 0 0 0;
padding: 4px; 6px; 6px; 6px;
text-align:left;
position:relative;
height:32px; z-index:20;
background:#333333;
border-radius:8px;}
.menuHolder ul.nav li {display:inline-block; display:inline;}
.menuHolder ul.nav {padding:5px; margin:0px; list-style:none; display:inline-block;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;}
.menuHolder ul.nav li {float:left; display:block; padding:2px;}
.menuHolder ul.nav > li {-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d;}
.menuHolder ul.nav li a.top-a {display:block; text-decoration:none; margin-top:2px; float:left; height:26px;}
.menuHolder ul.nav li a.top-a b {display:block; padding:5px 10px; font:14px Arial; color:#ffffff;}
.menuHolder ul.nav li:hover a.top-a {background:#FF1111; border-radius:2px 2px 2px 2px;}
.menuHolder ul.nav div {position:absolute; top:32px; left:2px; background:#FF6000; padding:2px 2px 2px 2px;
border-radius:0 0 15px 15px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
-moz-transform-origin: 0px 0px;
-moz-transform: rotateX(-90deg);
-webkit-transform-origin: 0px 0px;
-webkit-transform: rotateX(-90deg);
-o-transform-origin: 0px 0px;
-o-transform: rotateX(-90deg);
transform-origin: 0px 0px;
transform: rotateX(-90deg);
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;}
.menuHolder ul.nav div.left {left:auto; right:2px;}
.menuHolder ul.nav div ul {padding:2px; list-style:none; font:13px Arial; width:242px; margin:2px; float:left; display:inline; text-align:left; background:#FBBB22; border-radius:2px;}
.menuHolder ul.nav div ul.colLeft {margin-left:2px;}
.menuHolder ul.nav div ul.colRight {margin-right:2px;}
.menuHolder ul.nav div ul.colSingle {margin-left:2px; margin-right:2px;}
.menuHolder ul.nav div ul li {float:left; border-bottom:0px; margin:2px; display:inline;}
.menuHolder ul.nav div ul li:last-child {border:0;}
.menuHolder ul.nav div ul li a {display:block; width:236px; text-decoration:none; font:13px Arial; color:#ffffff; margin:0; padding:2px; background:#333333;}
.menuHolder ul.nav div ul li a:hover {color:#ffff00; background:#207907;}
.menuHolder ul.nav div.col1 {width:248px;}
.menuHolder ul.nav div.col2 {width:494px;}
.menuHolder ul.nav div.col3 {width:740px;}
.menuHolder ul.nav li:hover div {
-moz-transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);}
</style>
<div id="info">
<div class="menuHolder">
<ul class="nav">
<li><a class="top-a" href="http://gadgetsforblogs2.blogspot.gr"><b>HOME</b></a></li>
<li><a class="top-a" href="#"><b>ΟΡΙΖΟΝΤΙΑ & ΚΑΘΕΤΑ MENU▼</b></a>
<div class="col3">
<ul class="colLeft">
<li><a href="http://gadgetsforblogs2.blogspot.gr/2015/04/blogger.html">ΑΠΛΟ ΟΡΙΖΟΝΤΙΟ MENU</a></li>
<li><a href="http://gadgetsforblogs2.blogspot.gr/2015/04/mega-menu-1.html">MEGA MENU-1</a></li>
<li><a href="http://gadgetsforblogs2.blogspot.gr/2015/04/gadget-1.html">ΟΡΙΖΟΝΤΙΟ MENU-1Α</a></li>
<li><a href="http://gadgetsforblogs2.blogspot.gr/2015/04/sosial-icons-gadget-no-1b.html">ΟΡΙΖΟΝΤΙΟ MENU-1Β</a></li>
<li><a href="http://gadgetsforblogs2.blogspot.gr/2015/04/gadget-2.html">ΟΡΙΖΟΝΤΙΟ MENU-2</a></li>
</ul>
<ul class="col">
<li><a href="http://gadgetsforblogs2.blogspot.gr/2015/04/gadget-3.html">ΟΡΙΖΟΝΤΙΟ MENU-3</a></li>
<li><a href="http://gadgetsforblogs2.blogspot.gr/2015/04/gadget-4.html">ΟΡΙΖΟΝΤΙΟ MENU-4</a></li>
<li><a href="http://gadgetsforblogs2.blogspot.gr/2015/04/3-gadget-5.html">ΟΡΙΖΟΝΤΙΟ MENU-5</a></li>
<li><a href="http://gadgetsforblogs2.blogspot.gr/2015/04/2-gadget-6.html">ΟΡΙΖΟΝΤΙΟ MENU-6</a></li>
<li><a href="http://gadgetsforblogs2.blogspot.gr/2015/05/2-gadget-7.html">ΟΡΙΖΟΝΤΙΟ MENU-7</a></li>
</ul>
<ul class="colRight">
<li><a href="http://gadgetsforblogs2.blogspot.gr/2015/04/scroll-bar.html">ΚΑΘΕΤΟ MENU ΜΕ SCROLL BAR</a></li>
<li><a href="http://gadgetsforblogs2.blogspot.gr/2015/04/roll-down-menu.html">ΚΑΘΕΤΟ ROLL DOWN MENU-1</a></li>
<li><a href="http://gadgetsforblogs2.blogspot.gr/2015/04/roll-down-menu-style.html">ΚΑΘΕΤΟ ROLL DOWN MENU-2</a></li>
<li><a href="http://gadgetsforblogs2.blogspot.gr/2015/05/buttons.html">ΚΑΘΕΤΟ COLOR BUTTONS MENU</a></li>
<li><a href="http://gadgetsforblogs2.blogspot.gr/2015/05/3-gadget.html">ΚΑΘΕΤΟ MENU ME 3 ΥΠΟΜΕΝΟΥ</a></li>
</ul></div></li>
<li><a class="top-a" href="#"><b>BUTTONS▼</b></a>
<div class="col2">
<ul class="colLeft">
<li><a href="http://gadgetsforblogs2.blogspot.gr/2015/05/share-buttons.html">SHARE BUTTONS</a></li>
<li><a href="http://gadgetsforblogs2.blogspot.gr/2015/05/follow-sosial-buttons.html">FOLLOW SOSIAL BUTTONS</a></li>
<li><a href="http://gadgetsforblogs2.blogspot.gr/2015/05/buttons-links.html">ΣΤΑΤΙΚΑ BUTTONS ΜΕ LINKS</a></li>
<li><a href="http://gadgetsforblogs2.blogspot.gr/2015/05/links.html">ΣΤΑΤΙΚΑ ΕΙΚΟΝΙΔΙΑ ΜΕ LINKS</a></li>
</ul>
<ul class="colRight">
<li><a href="http://gadgetsforblogs2.blogspot.gr/2015/05/tv-icons-pop-up-window.html">TV ICONS</a></li>
<li><a href="http://gadgetsforblogs2.blogspot.gr/2015/05/radio-icons-pop-up-window.html">RADIO ICONS</a></li>
<li><a href="http://gadgetsforblogs2.blogspot.gr/2015/05/tv-buttons-pop-up-window.html">TV BUTTONS</a></li>
<li><a href="http://gadgetsforblogs2.blogspot.gr/2015/05/radio-buttons-pop-up-window.html">RADIO BUTTONS</a></li>
</ul></div></li>
<li><a class="top-a" href="#"><b>NEWS WIDGETS▼</b></a>
<div class="col2">
<ul class="colLeft">
<li><a href="http://gadgetsforblogs2.blogspot.gr/2015/05/news-from-newsbombgr.html">NEWS FROM NEWSBOMB.GR</a></li>
<li><a href="http://gadgetsforblogs2.blogspot.gr/2015/05/news-from-e-diseisgr.html">NEWS FROM E-DISEIS.GR</a></li>
<li><a href="http://gadgetsforblogs2.blogspot.gr/2015/05/news-from-inews.html">NEWS FROM INEWS.GR</a></li>
<li><a href="http://gadgetsforblogs2.blogspot.gr/2015/05/news-from-palogr.html">NEWS FROM PALO.GR</a></li>
</ul>
<ul class="colRight">
<li><a href="http://gadgetsforblogs2.blogspot.gr/2015/05/news-from-dougr.html">NEWS FROM DOU.GR</a></li>
<li><a href="http://gadgetsforblogs2.blogspot.gr/2015/05/news-from-frontpagesgr.html">NEWS FROM FRONTPAGES.GR</a></li>
<li><a href="http://gadgetsforblogs2.blogspot.gr/2015/05/news-from-protoselidaefimeridongr.html">PROTOSELIDAEFIMERIDON.GR</a></li>
<li><a href="http://gadgetsforblogs2.blogspot.gr/2015/05/sport-news-from-onsportsgr.html">SPORT NEWS FROM ONSPORTS.GR</a></li>
</ul></div></li>
<li><a class="top-a" href="http://the-best-widgets.blogspot.gr"><b>MY PHOTOS▼</b></a>
<div class="col2">
<ul class="colLeft">
<li><a href="http://gadgetsforblogs2.blogspot.gr/p/imgur-slideshow.html">IMGUR SLIDESHOWS</a></li>
<li><a href="http://gadgetsforblogs2.blogspot.gr/p/flickr-slideshow.html">FLICKR SLIDESHOWS</a></li>
<li><a href="http://gadgetsforblogs2.blogspot.gr/p/blog-page_12.html">PICASSA SLIDESHOWS</a></li>
<li><a href="http://gadgetsforblogs2.blogspot.gr/p/slideshows-1.html">PANORAMIO SLIDESHOWS</a></li>
</ul>
<ul class="colRight">
<li><a href="http://gadgetsforblogs2.blogspot.gr/p/photobucket-slideshow.html">PHOTOBUCKET SLIDESHOW</a></li>
<li><a href="http://gadgetsforblogs2.blogspot.gr/p/pinterest.html">PINTEREST PHOTO GALLERY</a></li>
<li><a href="http://gadgetsforblogs2.blogspot.gr/p/photos.html">FAVORITES PHOTO GALLERY</a></li>
<li><a href="http://gadgetsforblogs2.blogspot.gr/p/blog-page_90.html">SPORADES PHOTO GALLERY</a></li>
</ul></div></li>
<li><a class="top-a" href="http://the-best-widgets.blogspot.gr"><b>MY VIDEOS▼</b></a>
<div class="col1">
<ul class="colSingle">
<li><a href="http://gadgetsforblogs2.blogspot.gr/p/video-galery-1.html">VIDEO GALLERY-1</a></li>
<li><a href="http://gadgetsforblogs2.blogspot.gr/p/blog-page_13.html">VIDEO GALLERY-2</a></li>
<li><a href="http://gadgetsforblogs2.blogspot.gr/p/video-galery-1.html">VIDEO GALLERY-3</a></li>
<li><a href="http://gadgetsforblogs2.blogspot.gr/p/video-galery-1.html">VIDEO GALLERY-4</a></li>
<li><a href="http://gadgetsforblogs2.blogspot.gr/p/video-galery-1.html">VIDEO GALLERY-5</a></li>
</ul></div></li>
<li><a class="top-a" href="http://gadgetsforblogs2.blogspot.gr/p/blog-page_33.html"><b>MY FILES▼</b></a>
<div class="col1">
<ul class="colSingle">
<li><a href="http://gadgetsforblogs2.blogspot.gr/p/blog-page_33.html">MY FILES ON BOX</a></li>
<li><a href="https://app.box.com/s/chdfmak9du0v6hlg0h5b">MY RINGTONES</a></li>
<li><a href="https://app.box.com/s/if98ihmj6bs15f69bro2">FREE PROGRAMS</a></li>
<li><a href="https://drive.google.com/folderview?id=0B8GeBeRdN9NsX0RKYzZOemtwOWM&usp=sharing">ANNIMATED GIFs</a></li>
<li><a href="https://drive.google.com/folderview?id=0B8GeBeRdN9NsT3VPRkpOYmUwSVU&usp=sharing">BLOGGER BACKGROUNDS</a></li>
<li><a href="https://drive.google.com/folderview?id=0B8GeBeRdN9NsfkFqdy1nRTJ5TkZ3MUFPOU05YkxDcjFCcjFxV1h6QkxoYzIzN0sxazlOeDA&usp=sharing">SPORTS BACKGROUNDS</a></li>
</ul></div></li>
</ul></div>

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

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

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

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