GADGETS FOR BLOGS

Facebook Google plus YouTube Pinterest Tumblr DIIGO Start.me feedburner

MEGA MENU No 1

MEGA MENU
MEGA MENU No 1
Το παρακάτω Mega menu είναι πολύ απλό και τοποθετήται σαν gadget. Εχει την δυνατότητα να εμφανίζει σε μία καρτέλα του υπομενού του από 1 εώς 5 στήλες συνδέσμων. Μπορείτε να αλλάξετε το πλάτος και το ύψος της οριζόντιας μπάρας αλλάζοντας το width:1450px; και το height:35px; στην 10η και 12η γραμμή του κώδικα. Το μέγεθος της γραμματοσειράς το αλλάζετε στην 3η γραμμή του κώδικα εκεί που γράφει font-size:14px; Την οικογένεια της γραμματοσειράς την αλλάζετε στην 4η γραμμή εκεί που γράφει font-family:Arial;
Εννοείται ότι το ίδιο κάνετε και για τα μενού που ανοίγουν· αλλάζετε ότι είναι μεγάλο ή μικρό για τις διαστάσεις του ιστολογίου σας. Οι ίδιες παράμετροι επαναλαμβάνονται 2 ή 3 φορές μέσα στον κώδικα. Αλλάξτε όποιες νομίζετε ότι δεν ταιριάζουν στο μέγεθος του blog σας. Δείτε πώς φαίνεται το μενού που το έχω εγκαταστήσει σε μία ξεχωριστή σελίδα στο demo blog μου Νο 2. DEMO.


<style type="text/css">
body, ul, li {
 font-size:14px;
 font-family:Arial;
 line-height:20px;
 text-align:left;}

/* Navigation Bar */
#menu {
 list-style:none;
 width:1450px;
 margin:0px 0px 0px 0px;
 height:35px;
 padding:0px 4px 0px 4px;

 /* Rounded Corners */
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;

 /* Background color */
background: #10500A;

 /* Borders */
 border: 1px solid #11CC20;}
#menu li {
 float:left;
 text-align:center;
 position:relative;
 padding: 4px 4px 4px 4px;
 margin-right:4px;
 margin-top:4px;
 border:none;}
#menu li:hover {
 border: 1px solid #11CC20;
 padding: 4px 4px 4px 4px;

 /* Background color */
background: #FFFF00;

 /* Rounded corners */
 -moz-border-radius: 5px 5px 0px 0px;
 -webkit-border-radius: 5px 5px 0px 0px;
 border-radius: 5px 5px 0px 0px;}
#menu li a {
 font-family:Arial;
 font-size:14px;
 color: #FFFFFF;
 display:block;
 outline:0;
 text-decoration:none;}
#menu li:hover a {
 color:#760991;}
#menu li .drop {
padding-right:2px;
background: none; right 2px;}
#menu li:hover .drop {
 background:none; right 2px;}

/* Drop Down */
.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns {
 margin:4px auto;
 float:left;
 position:absolute !important;
 left:-999em;

/* Hides the drop down */
 text-align:left;
 padding:4px 4px 4px 4px;
 border:1px solid #11CC20;
 border-top:none;

 /* Gradient background */
background:#979707;

 /* Rounded Corners */
 -moz-border-radius: 0px 5px 5px 5px;
 -webkit-border-radius: 0px 5px 5px 5px;
 border-radius: 0px 5px 5px 5px;}
.dropdown_1column {width: 220px;}
.dropdown_2columns {width: 440px;}
.dropdown_3columns {width: 660px;}
.dropdown_4columns {width: 880px;}
.dropdown_5columns {width: 1100px;}
#menu li:hover .dropdown_1column,
#menu li:hover .dropdown_2columns,
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
left:-1px ;
z-index: 10000 !important;
top:auto;}

/* Columns */
.col_1,
.col_2,
.col_3,
.col_4,
.col_5 {
 display:inline;
 float: left;
 position: relative;
 margin-left: 4px;
 margin-right: 4px;}
.col_1 {width:210px;}
.col_2 {width:430px;}
.col_3 {width:640px;}
.col_4 {width:850px;}
.col_5 {width:1060px;}

/* Right alignment */
#menu .menu_left {
 float:left !important;
 margin-left:0px;}
#menu li .align_left {

/* Rounded Corners */
 -moz-border-radius: 5px 0px 5px 5px;
    -webkit-border-radius: 5px 0px 5px 5px;
    border-radius: 5px 0px 5px 5px;}
#menu li:hover .align_left {
 left:auto;
 left:-1px;
 top:auto;}

/* Drop Down Content Stylings */
#menu p, #menu h2, #menu h3, #menu div li {
 font-family:Arial;
 line-height:20px;
 font-size:12px;
 text-align:left; }
#menu h2 {
 font-size:14px;
 font-weight:400;
 letter-spacing:-1px;
 margin:5px 0 5px 0;
 padding-bottom:1px;
 border-bottom:0px;}
#menu h3 {
 font-size:14px;
 margin:5px 0 5px 0;
 padding-bottom:1px;
 border-bottom:0px;}
#menu p {
 line-height:20px;
 margin:0 0 5px 0;}
#menu li:hover div a {
 font-size:12px;
 color:#FFFFFF;}
#menu li:hover div a:hover {
 color:#FFFF00;}
.strong {font-weight:bold;}
.italic {font-style:italic;}

 /* Rounded Corners */
#menu li .black_box {
background-color:none;
color: #FFFFFF;
padding:4px 6px 4px 6px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
 border-radius: 5px;}
#menu li ul {
 list-style:none;
 padding:0;
 margin:1px 1px 1px 1px;}
#menu li ul li {
 font-size:12px;
 line-height:20px;
 position:relative;
 padding:0;
 margin:0;
 float:none;
 text-align:left;
 width:200px;}
#menu li ul li:hover {
 background: #760991;
 border:none;
 padding:0;
 margin:0;}
#menu li .greybox li {
 background:#0F4094;
 margin:2px 2px 2px 2px;
 padding:2px 2px 2px 2px;
 width:200px;

 /* Rounded Corners */
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;}
#menu li .greybox li:hover {
 background:#760991;
 margin:2px 2px 2px 2px;
 padding:2px 2px 2px 2px;}
.tabs-inner .widget li a {
padding: 1px ;
display:block !important;
border: 1px solid  transparent !important;}
</style>

<!-- Begin Home item -->
<div id="menu">
<li><a href="http://the-best-widgets.blogspot.gr" class="drop">HOME</a></li>
<!-- End Home item -->
<!—Begin 2 columns item -->
<li class="menu_left">
<li><a href="#" class="drop">MY PAGES</a>
<div class="dropdown_2columns align_left">
<div class="col_2">
<h2>MY PAGES</h2></div>
<div class="col_1">
<ul class="greybox">
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/p/my-posts.html">ALL MY POSTS</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/p/blog-page_11.html">MY LINKS</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/p/wigdets.html">MY VIDEOS</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/p/widgets_859.html">MY PHOTOS</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/p/widgets_26.html">MY FILES</a></li></ul></div>
<div class="col_1">
<ul class="greybox">
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/p/blog-page.html">MY MUSIC</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/p/my-forum.html">MY FORUM</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/p/widgets_3619.html">MY RSS</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/p/wigdets_31.html">MY NEWS</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/p/widgets_9083.html">RADIO+TV</a></li></ul></div>
</li>
<!-- End 2 columns Item -->
<!-- Begin 5 columns item -->
<li class="menu_left">
<li><a href="#" class="drop">ΟΡΙΖΟΝΤΙΑ & ΚΑΘΕΤΑ MENU</a>
<div class="dropdown_5columns align_left">
<div class="col_5">
<h2>ΟΡΙΖΟΝΤΙΑ & ΚΑΘΕΤΑ MENU</h2></div>
<div class="col_1">
<ul class="greybox">
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/2013/04/blog-post.html">ΟΡΙΖΟΝΤΙΟ MENU-1</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/2014/11/horizontal-menu-fb.html">ΟΡΙΖΟΝΤΙΟ MENU-2</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/2014/11/orizontio-menu.html">ΟΡΙΖΟΝΤΙΟ MENU-3</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/2013/05/blog-post.html">ΟΡΙΖΟΝΤΙΟ MENU-4</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/2013/07/roll-down.html">ΚΑΘΕΤΟ MENU-1</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/2014/05/scrol-bar-blog-gadget.html">ΚΑΘΕΤΟ MENU-2</a></li>
<li><a class='linknudge' href="#">ΚΑΘΕΤΟ MENU-3</a></li>
<li><a class='linknudge' href="#">ΚΑΘΕΤΟ MENU-4</a></li>
<li><a class='linknudge' href="#">ΚΑΘΕΤΟ MENU-5</a></li></ul></div>
<div class="col_1">
<ul class="greybox">
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/2013/04/blog-post.html">ΟΡΙΖΟΝΤΙΟ MENU-1</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/2014/11/horizontal-menu-fb.html">ΟΡΙΖΟΝΤΙΟ MENU-2</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/2014/11/orizontio-menu.html">ΟΡΙΖΟΝΤΙΟ MENU-3</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/2013/05/blog-post.html">ΟΡΙΖΟΝΤΙΟ MENU-4</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/2013/07/roll-down.html">ΚΑΘΕΤΟ MENU-1</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/2014/05/scrol-bar-blog-gadget.html">ΚΑΘΕΤΟ MENU-2</a></li>
<li><a class='linknudge' href="#">ΚΑΘΕΤΟ MENU-3</a></li>
<li><a class='linknudge' href="#">ΚΑΘΕΤΟ MENU-4</a></li>
<li><a class='linknudge' href="#">ΚΑΘΕΤΟ MENU-5</a></li></ul></div>
<div class="col_1">
<ul class="greybox">
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/2013/04/blog-post.html">ΟΡΙΖΟΝΤΙΟ MENU-1</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/2014/11/horizontal-menu-fb.html">ΟΡΙΖΟΝΤΙΟ MENU-2</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/2014/11/orizontio-menu.html">ΟΡΙΖΟΝΤΙΟ MENU-3</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/2013/05/blog-post.html">ΟΡΙΖΟΝΤΙΟ MENU-4</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/2013/07/roll-down.html">ΚΑΘΕΤΟ MENU-1</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/2014/05/scrol-bar-blog-gadget.html">ΚΑΘΕΤΟ MENU-2</a></li>
<li><a class='linknudge' href="#">ΚΑΘΕΤΟ MENU-3</a></li>
<li><a class='linknudge' href="#">ΚΑΘΕΤΟ MENU-4</a></li>
<li><a class='linknudge' href="#">ΚΑΘΕΤΟ MENU-5</a></li></ul></div>
<div class="col_1">
<ul class="greybox">
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/2013/04/blog-post.html">ΟΡΙΖΟΝΤΙΟ MENU-1</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/2014/11/horizontal-menu-fb.html">ΟΡΙΖΟΝΤΙΟ MENU-2</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/2014/11/orizontio-menu.html">ΟΡΙΖΟΝΤΙΟ MENU-3</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/2013/05/blog-post.html">ΟΡΙΖΟΝΤΙΟ MENU-4</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/2013/07/roll-down.html">ΚΑΘΕΤΟ MENU-1</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/2014/05/scrol-bar-blog-gadget.html">ΚΑΘΕΤΟ MENU-2</a></li>
<li><a class='linknudge' href="#">ΚΑΘΕΤΟ MENU-3</a></li>
<li><a class='linknudge' href="#">ΚΑΘΕΤΟ MENU-4</a></li>
<li><a class='linknudge' href="#">ΚΑΘΕΤΟ MENU-5</a></li></ul></div>
<div class="col_1">
<ul class="greybox">
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/2013/04/blog-post.html">ΟΡΙΖΟΝΤΙΟ MENU-1</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/2014/11/horizontal-menu-fb.html">ΟΡΙΖΟΝΤΙΟ MENU-2</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/2014/11/orizontio-menu.html">ΟΡΙΖΟΝΤΙΟ MENU-3</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/2013/05/blog-post.html">ΟΡΙΖΟΝΤΙΟ MENU-4</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/2013/07/roll-down.html">ΚΑΘΕΤΟ MENU-1</a></li>
<li><a class='linknudge' href="http://the-best-widgets.blogspot.gr/2014/05/scrol-bar-blog-gadget.html">ΚΑΘΕΤΟ MENU-2</a></li>
<li><a class='linknudge' href="#">ΚΑΘΕΤΟ MENU-3</a></li>
<li><a class='linknudge' href="#">ΚΑΘΕΤΟ MENU-4</a></li>
<li><a class='linknudge' href="#">ΚΑΘΕΤΟ MENU-5</a></li></ul></div>
</li>
<!-- End 5 columns Item -->
<!-- Begin 4 columns item -->
<li class="menu_left">
<li><a href="#" class="drop">SLIDESHOWS</a>
<div class="dropdown_4columns align_left">
<div class="col_4">
<h2>SLIDESHOWS</h2></div>
<div class="col_1">
<ul class="greybox">
<li><a class='linknudge' href="#">SLIDESHOW-1</a></li>
<li><a class='linknudge' href="#">SLIDESHOW-2</a></li>
<li><a class='linknudge' href="#">SLIDESHOW-3</a></li>
<li><a class='linknudge' href="#">SLIDESHOW-4</a></li>
<li><a class='linknudge' href="#">SLIDESHOW-5</a></li>
<li><a class='linknudge' href="#">SLIDESHOW-6</a></li></ul></div>
<div class="col_1">
<ul class="greybox">
<li><a class='linknudge' href="#">SLIDESHOW-7</a></li>
<li><a class='linknudge' href="#">SLIDESHOW-8</a></li>
<li><a class='linknudge' href="#">SLIDESHOW-9</a></li>
<li><a class='linknudge' href="#">SLIDESHOW-10</a></li>
<li><a class='linknudge' href="#">SLIDESHOW-11</a></li>
<li><a class='linknudge' href="#">SLIDESHOW-12</a></li></ul></div>
<div class="col_1">
<ul class="greybox">
<li><a class='linknudge' href="#">SLIDESHOW-13</a></li>
<li><a class='linknudge' href="#">SLIDESHOW-14</a></li>
<li><a class='linknudge' href="#">SLIDESHOW-15</a></li>
<li><a class='linknudge' href="#">SLIDESHOW-16</a></li>
<li><a class='linknudge' href="#">SLIDESHOW-17</a></li>
<li><a class='linknudge' href="#">SLIDESHOW-18</a></li></ul></div>
<div class="col_1">
<ul class="greybox">
<li><a class='linknudge' href="#">SLIDESHOW-19</a></li>
<li><a class='linknudge' href="#">SLIDESHOW-20</a></li>
<li><a class='linknudge' href="#">SLIDESHOW-21</a></li>
<li><a class='linknudge' href="#">SLIDESHOW-22</a></li>
<li><a class='linknudge' href="#">SLIDESHOW-23</a></li>
<li><a class='linknudge' href="#">SLIDESHOW-24</a></li></ul></div>
</li>
<!-- End 4 columns Item -->
<!-- Begin 3 columns item -->
<li class="menu_left">
<li><a href="#" class="drop">FACEBOOK WIDGETS</a>
<div class="dropdown_3columns align_left">
<div class="col_3">
<h2>FACEBOOK WIDGETS</h2></div>
<div class="col_1">
<ul class="greybox">
<li><a class='linknudge' href="#">FACEBOOK WIDGET-1</a></li>
<li><a class='linknudge' href="#">FACEBOOK WIDGET-2</a></li>
<li><a class='linknudge' href="#">FACEBOOK WIDGET-3</a></li>
<li><a class='linknudge' href="#">FACEBOOK WIDGET-4</a></li>
<li><a class='linknudge' href="#">FACEBOOK WIDGET-5</a></li></ul></div>
<div class="col_1">
<ul class="greybox">
<li><a class='linknudge' href="#">FACEBOOK WIDGET-6</a></li>
<li><a class='linknudge' href="#">FACEBOOK WIDGET-7</a></li>
<li><a class='linknudge' href="#">FACEBOOK WIDGET-8</a></li>
<li><a class='linknudge' href="#">FACEBOOK WIDGET-9</a></li>
<li><a class='linknudge' href="#">FACEBOOK WIDGET-10</a></li></ul></div>
<div class="col_1">
<ul class="greybox">
<li><a class='linknudge' href="#">FACEBOOK WIDGET-11</a></li>
<li><a class='linknudge' href="#">FACEBOOK WIDGET-12</a></li>
<li><a class='linknudge' href="#">FACEBOOK WIDGET-13</a></li>
<li><a class='linknudge' href="#">FACEBOOK WIDGET-14</a></li>
<li><a class='linknudge' href="#">FACEBOOK WIDGET-15</a></li></ul></div>
</li>
<!-- End 3 columns Item -->
<!-- Begin 1 columns item -->
<li class="menu_left">
<li><a href="#" class="drop">SOSIAL BUTTONS</a>
<div class="dropdown_1column align_left">
<div class="col_1">
<h2>SOSIAL BUTTONS</h2></div>
<div class="col_1">
<ul class="greybox">
<li><a class='linknudge' href="#">SOSIAL BUTTONS-1</a></li>
<li><a class='linknudge' href="#">SOSIAL BUTTONS-2</a></li>
<li><a class='linknudge' href="#">SOSIAL BUTTONS-3</a></li>
<li><a class='linknudge' href="#">SOSIAL BUTTONS-4</a></li>
<li><a class='linknudge' href="#">SOSIAL BUTTONS-5</a></li></ul></div>
</li>
<!-- End 1 columns Item -->
<!-- Begin 1 columns item -->
<li class="menu_left">
<li><a href="#" class="drop">EMBED FILES</a>
<div class="dropdown_1column align_left">
<div class="col_1">
<h2>EMBED FILES</h2></div>
<div class="col_1">
<ul class="greybox">
<li><a class='linknudge' href="#">EMBED FILES-1</a></li>
<li><a class='linknudge' href="#">EMBED FILES-2</a></li>
<li><a class='linknudge' href="#">EMBED FILES-3</a></li>
<li><a class='linknudge' href="#">EMBED FILES-4</a></li>
<li><a class='linknudge' href="#">EMBED FILES-5</a></li></ul></div>
</li>
<!-- End 1 columns Item -->
<!-- Begin 1 columns item -->
<li class="menu_left">
<li><a href="#" class="drop">SCROLLING TEXTS</a>
<div class="dropdown_1column align_left">
<div class="col_1">
<h2>SCROLLING TEXTS</h2></div>
<div class="col_1">
<ul class="greybox">
<li><a class='linknudge' href="#"> SCROLLING TEXTS-1</a></li>
<li><a class='linknudge' href="#">SCROLLING TEXTS-2</a></li>
<li><a class='linknudge' href="#">SCROLLING TEXTS-3</a></li>
<li><a class='linknudge' href="#">SCROLLING TEXTS-4</a></li>
<li><a class='linknudge' href="#">SCROLLING TEXTS-5</a></li></ul></div>
</li>
<!-- End 1 columns Item -->
</div>

2 σχόλια:

  1. ΧΙΛΙΑ ΕΥΧΑΡΙΣΤΩΩΩ ΦΙΛΕ... ΠΡΑΓΜΑΤΙΚΑ ΕΙΣΑΙ ΑΠΑΙΧΤΟΣ.... ΜΟΥ ΕΒΓΑΛΕ ΤΗΝ ΨΗΧΗ ΝΑ ΑΛΛΑΞΩ ΤΑ ΛΙΝΚ...ΚΑΙ ΝΑ ΤΟ ΠΡΟΣΑΡΜΟΣΩ ΑΛΛΑ ΤΑ ΚΑΤΑΦΕΡΑ..ΚΑΙ ΔΟΥΛΕΥΕΙΙΙΙΙΙΙ...!!!! δες το αν θελεις στο μπλοκ μου http://hlektronikesagores.blogspot.com

    ΑπάντησηΔιαγραφή
    Απαντήσεις
    1. Εβγαλα το καινούργιο MEGA MENU No 3 που είναι κλάσεις ανώτερο δές το αξίζει τον κόπο.

      Διαγραφή

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