MEGA MENU No 3
Το παρακάτω mega menu έχει
την δυνατότητα εώς και 5 στηλες συνδέσμων και μάλιστα σε όποια διάταξη θέλουμε.
Για παράδειγμα μπορούμε να έχουμε μέσα σε ένα υπομενού 2 στήλες σε κάθετη
διάταξη και 2 στηλές σε οριζόντια διάταξη. Υπάρχει επίσης η δυνατότητα να ενσωματώσετε
μέσα στα υπομενού, φωτογραφιες, slideshows, βίντεο,
μουσική, παρουσιάσεις, φόρμες, φύλλα ecxel,
έγγραφα word και pdf και
γενικώς ότι έχει κώδικα και χωράει μέσα στα υπομενού μπορεί να ενσωματωθεί. Τα
χρώματα αλλάζουν εάν αλλάξετε τον εξαψήφιο κωδικό χρώματος που βρίσκεται μετά
το σύμβολο της δίεσης #. Τα υπομενού που έχουν πολλές
στήλες να τα βάζετε στην αρχή του μενού γιατί ανοιγουν προς τα δεξιά.
<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>
<nav class="navigation">
<ul class="nav nojs"
id="menu">
<li><a
href="#">HOME</a></li>
<li><a href="#">MENUS-1</a>
<div class="container-5">
<div class="col1">
<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 class="col1">
<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 class="col1">
<h3>ROLL DOWN MENUS</h3>
<ul>
<li><a href="#">ROLL DOWN MENU-1</a></li>
<li><a href="#">ROLL DOWN MENU-2</a></li>
<li><a href="#">ROLL DOWN MENU-3</a></li>
<li><a href="#">ROLL DOWN MENU-4</a></li>
<li><a href="#">ROLL DOWN MENU-5</a></li>
</ul>
</div>
<div class="col1">
<h3>MEGA MENUS</h3>
<ul>
<li><a href="#">MEGA MENU No-1</a></li>
<li><a href="#">MEGA MENU-No 2</a></li>
<li><a href="#">MEGA MENU-No 3</a></li>
<li><a href="#">MEGA MENU-No 4</a></li>
<li><a href="#">MEGA MENU-No 5</a></li>
</ul>
</div>
<div class="col1">
<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>
<div class="container-4">
<div class="col1">
<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 class="col1">
<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 class="col1">
<h3>ROLL DOWN MENUS</h3>
<ul>
<li><a href="#">ROLL DOWN MENU-1</a></li>
<li><a href="#">ROLL DOWN MENU-2</a></li>
<li><a href="#">ROLL DOWN MENU-3</a></li>
<li><a href="#">ROLL DOWN MENU-4</a></li>
<li><a href="#">ROLL DOWN MENU-5</a></li>
</ul>
</div>
<div class="col1">
<h3>MEGA MENUS</h3>
<ul>
<li><a href="#">MEGA MENU No-1</a></li>
<li><a href="#">MEGA MENU-No 2</a></li>
<li><a href="#">MEGA MENU-No 3</a></li>
<li><a href="#">MEGA MENU-No 4</a></li>
<li><a href="#">MEGA MENU-No 5</a></li>
</ul>
</div></div></li>
<li><a href="#">MENUS-3</a>
<div class="container-3">
<div class="col1">
<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 class="col1">
<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 class="col1">
<h3>ROLL DOWN MENUS</h3>
<ul>
<li><a href="#">ROLL DOWN MENU-1</a></li>
<li><a href="#">ROLL DOWN MENU-2</a></li>
<li><a href="#">ROLL DOWN MENU-3</a></li>
<li><a href="#">ROLL DOWN MENU-4</a></li>
<li><a href="#">ROLL DOWN MENU-5</a></li>
</ul>
</div>
</div></li>
<li><a href="#">MENUS-4</a>
<div class="container-2">
<div class="col1">
<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 class="col1">
<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>
<div class="container-1">
<div class="col1">
<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>
