MEGA MENU No 3

MEGA MENU No 3

Το παρακάτω mega menu έχει την δυνατότητα εώς και 5 στηλες συνδέσμων και μάλιστα σε όποια διάταξη θέλουμε. Για παράδειγμα μπορούμε να έχουμε μέσα σε ένα υπομενού 2 στήλες σε κάθετη διάταξη και 2 στηλές σε οριζόντια διάταξη. Υπάρχει επίσης η δυνατότητα να ενσωματώσετε μέσα στα υπομενού, φωτογραφιες, slideshows, βίντεο, μουσική, παρουσιάσεις, φόρμες, φύλλα ecxel, έγγραφα word και pdf και γενικώς ότι έχει κώδικα και χωράει μέσα στα υπομενού μπορεί να ενσωματωθεί. Τα χρώματα αλλάζουν εάν αλλάξετε τον εξαψήφιο κωδικό χρώματος που βρίσκεται μετά το σύμβολο της δίεσης #.

Τα υπομενού που έχουν πολλές στήλες να τα βάζετε στην αρχή του μενού γιατί ανοιγουν προς τα δεξιά. Δείτε στα παρακάτω links σε demo λειτουργία και το απλό mega menu και το mega menu με τις ενσωματώσεις. (Στα DEMO τα κενά είναι μεγάλα αλλά όταν το εγκαταστήσετε σαν gadget στη θέση gadget πανω απο τις αναρτήσεις τα κενά θα είναι κανονικά).

DEMO-1 ► (MEGA MENU No 3 Χωρίς ενσωματώσεις) DEMO-2 ► (Ο κώδικας για τα ενσωματωμένα gadgets)

<style>

.tabs-outer {z-index:1;}

.tabs .widget ul, .tabs .widget ul {overflow: visible;}

.nav {box-sizing: border-box;width: 100%;padding: 0;margin: 0 auto;background: #333333;height: 40px;}

.nav li {list-style: none;}

.nav li.nav-right {float: right;}

.nav > li {padding: 0;float: left;position: relative;}

.nav > li > a {float: left;color: #FFFFFF;font:13px arial;text-decoration: none;line-height: 40px;padding: 0 14px;margin-right: 1px;height: 40px;}

.nav > li > a:last-of-type {margin-right: 0;}

.nav > li > div {position: absolute;left: 0;top: 40px;display: none;background:#351500;color:#FFFF00;padding: 10px;overflow: hidden;z-index: 99999;}

.nav > li > div ul {margin: 0;padding: 0;}

.nav > li > div ul li a {background:#115599;color: #FFF;text-decoration: none;padding: 9px 12px;margin-bottom: 2px;margin-right: 2px;display: block;}

.nav > li > div ul li a:hover {background: #621061;color: #FFFFFF;}

.nav > li > div p {color: #F11111;}

.nav > li > div .right {right: 0;left: auto;}

.nav > li:hover > a {background:#173377;color:#FFFFFF;}

.nav > li:first-child > a {border-left: 0;}

.nav > li:last-child > a {border-right: 0;}

.nav.nojs > li:hover > a {background: #105105;color: #FFFFFF;}

.nav.nojs > li:hover div[class^="container-"] {display: block !important;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1;}

.navvisfix {visibility: visible !important;opacity: 1 !important;display: block !important;}

.container-1 {width: 240px;}

.container-1 .col1 {margin: 0;padding: 0;float: left;width: 100%;}

.container-2 {width: 480px;}

.container-2 .col1 {margin: 0;padding: 0;float: left;width: 50%;}

.container-2 .col2 {margin: 0;padding: 0;float: left;width: 100%;}

.container-3 {width: 720px;}

.container-3 .col1 {margin: 0;padding: 0;float: left;width: 33.33333%;}

.container-3 .col2 {margin: 0;padding: 0;float: left;width: 66.66667%;}

.container-3 .col3 {margin: 0;padding: 0;float: left;width: 100%;}

.container-4 {width: 960px;}

.container-4 .col1 {margin: 0;padding: 0;float: left;width: 25%;}

.container-4 .col2 {margin: 0;padding: 0;float: left;width: 50%;}

.container-4 .col3 {margin: 0;padding: 0;float: left;width: 75%;}

.container-4 .col4 {margin: 0;padding: 0;float: left;width: 100%;}

.container-5 {width: 1200px;}

.container-5 .col1 {margin: 0;padding: 0;float: left;width: 20%;}

.container-5 .col2 {margin: 0;padding: 0;float: left;width: 40%;}

.container-5 .col3 {margin: 0;padding: 0;float: left;width: 60%;}

.container-5 .col4 {margin: 0;padding: 0;float: left;width: 80%;}

.container-5 .col5 {margin: 0;padding: 0;float: left;width: 100%;}

</style>

<li><a href="http://the-best-widgets.blogspot.gr/search/label/ΟΡΙΖΟΝΤΙΑ ΚΑΙ ΚΑΘΕΤΑ ΜΕΝΟΥ">MENUS-1</a>

<h3>HORIZONTAL MENUS</h3>

<ul>

<li><a href="http://the-best-widgets.blogspot.gr/2013/05/blog-post.html">HORIZONTAL MENU-1</a></li>

<li><a href="http://the-best-widgets.blogspot.gr/2013/05/blog-post.html">HORIZONTAL MENU-2</a></li>

<li><a href="http://the-best-widgets.blogspot.gr/2013/05/blog-post.html">HORIZONTAL MENU-3</a></li>

<li><a href="http://the-best-widgets.blogspot.gr/2013/05/blog-post.html">HORIZONTAL MENU-4</a></li>

<li><a href="http://the-best-widgets.blogspot.gr/2013/05/blog-post.html">HORIZONTAL MENU-5</a></li>

</ul>

</div>

<h3>VETRICAL MENUS</h3>

<ul>

<li><a href="#">VETRICAL MENU-1</a></li>

<li><a href="#">VETRICAL MENU-2</a></li>

<li><a href="#">VETRICAL MENU-3</a></li>

<li><a href="#">VETRICAL MENU-4</a></li>

<li><a href="#">VETRICAL MENU-5</a></li>

</ul>

</div>

<h3>ROLL DOWN MENUS</h3>

<ul>

</ul>

</div>

<h3>MEGA MENUS</h3>

<ul>

</ul>

</div>

<h3>ACCORDION MENUS</h3>

<ul>

<li><a href="#">ACCORDION MENU-1</a></li>

<li><a href="#">ACCORDION MENU-2</a></li>

<li><a href="#">ACCORDION MENU-3</a></li>

<li><a href="#">ACCORDION MENU-4</a></li>

<li><a href="#">ACCORDION MENU-5</a></li>

</ul>

</div></div></li>

<li><a href="#">MENUS-2</a>

<h3>HORIZONTAL MENUS</h3>

<ul>

<li><a href="#">HORIZONTAL MENU-1</a></li>

<li><a href="#">HORIZONTAL MENU-2</a></li>

<li><a href="#">HORIZONTAL MENU-3</a></li>

<li><a href="#">HORIZONTAL MENU-4</a></li>

<li><a href="#">HORIZONTAL MENU-5</a></li>

</ul>

</div>

<h3>VETRICAL MENUS</h3>

<ul>

<li><a href="#">VETRICAL MENU-1</a></li>

<li><a href="#">VETRICAL MENU-2</a></li>

<li><a href="#">VETRICAL MENU-3</a></li>

<li><a href="#">VETRICAL MENU-4</a></li>

<li><a href="#">VETRICAL MENU-5</a></li>

</ul>

</div>

<h3>ROLL DOWN MENUS</h3>

<ul>

</ul>

</div>

<h3>MEGA MENUS</h3>

<ul>

</ul>

</div></div></li>

<li><a href="#">MENUS-3</a>

<h3>HORIZONTAL MENUS</h3>

<ul>

<li><a href="#">HORIZONTAL MENU-1</a></li>

<li><a href="#">HORIZONTAL MENU-2</a></li>

<li><a href="#">HORIZONTAL MENU-3</a></li>

<li><a href="#">HORIZONTAL MENU-4</a></li>

<li><a href="#">HORIZONTAL MENU-5</a></li>

</ul>

</div>

<h3>VETRICAL MENUS</h3>

<ul>

<li><a href="#">VETRICAL MENU-1</a></li>

<li><a href="#">VETRICAL MENU-2</a></li>

<li><a href="#">VETRICAL MENU-3</a></li>

<li><a href="#">VETRICAL MENU-4</a></li>

<li><a href="#">VETRICAL MENU-5</a></li>

</ul>

</div>

<h3>ROLL DOWN MENUS</h3>

<ul>

</ul>

</div>

</div></li>

<li><a href="#">MENUS-4</a>

<h3>HORIZONTAL MENUS</h3>

<ul>

<li><a href="#">HORIZONTAL MENU-1</a></li>

<li><a href="#">HORIZONTAL MENU-2</a></li>

<li><a href="#">HORIZONTAL MENU-3</a></li>

<li><a href="#">HORIZONTAL MENU-4</a></li>

<li><a href="#">HORIZONTAL MENU-5</a></li>

</ul>

</div>

<h3>VETRICAL MENUS</h3>

<ul>

<li><a href="#">VETRICAL MENU-1</a></li>

<li><a href="#">VETRICAL MENU-2</a></li>

<li><a href="#">VETRICAL MENU-3</a></li>

<li><a href="#">VETRICAL MENU-4</a></li>

<li><a href="#">VETRICAL MENU-5</a></li>

</ul>

</div></div></li>

<li><a href="#">MENUS-5</a>

<h3>HORIZONTAL MENUS</h3>

<ul>

<li><a href="#">HORIZONTAL MENU-1</a></li>

<li><a href="#">HORIZONTAL MENU-2</a></li>

<li><a href="#">HORIZONTAL MENU-3</a></li>

<li><a href="#">HORIZONTAL MENU-4</a></li>

<li><a href="#">HORIZONTAL MENU-5</a></li>

</ul>

</div></div></li>

<li><a href="#">SLIDERS</a></li>

<li><a href="#">WIDGETS</a></li>

</ul></nav>

Τετ	Πεμ	Παρ	Σαβ	Κυρ	Δευ

+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 No 3

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

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

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

NEWS WIDGETS

VISITORS TRAFFIC

SANTORINI

SANTORINI

ZAKYNTHOS

LEYKADA

KEFALLONIA

KERKYRA

RODOS

GADGETS FOR BLOGS

document.write(ssyby);

MEGA MENU No 3

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

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

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

NEWS WIDGETS

VISITORS TRAFFIC