GADGETS FOR BLOGS

Facebook Google plus YouTube Pinterest Tumblr Delicius DIIGO Start.me NETVIBES feedburner

MEGA MENU No 3

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

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

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

<nav class="navigation">
<ul class="nav nojs" id="menu">
<li><a href="http://the-best-widgets.blogspot.gr">HOME</a></li>
<li><a href="http://the-best-widgets.blogspot.gr/search/label/ΟΡΙΖΟΝΤΙΑ ΚΑΙ ΚΑΘΕΤΑ ΜΕΝΟΥ">MENUS-1</a>
<div class="container-5">
<div class="col1">
<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>
<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>

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

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

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