MEGA MENU No 1
Το παρακάτω Mega menu είναι πολύ απλό και τοποθετήται σαν gadget. Εχει την δυνατότητα να εμφανίζει σε μία καρτέλα του υπομενού του από 1 εώς 5 στήλες συνδέσμων. Μπορείτε να αλλάξετε το πλάτος και το ύψος της οριζόντιας μπάρας αλλάζοντας το width:1450px; και το height:35px; στην 10η και 12η γραμμή του κώδικα. Το μέγεθος της γραμματοσειράς το αλλάζετε στην 3η γραμμή του κώδικα εκεί που γράφει font-size:14px; Την οικογένεια της γραμματοσειράς την αλλάζετε στην 4η γραμμή εκεί που γράφει font-family:Arial;
Το παρακάτω Mega menu είναι πολύ απλό και τοποθετήται σαν gadget. Εχει την δυνατότητα να εμφανίζει σε μία καρτέλα του υπομενού του από 1 εώς 5 στήλες συνδέσμων. Μπορείτε να αλλάξετε το πλάτος και το ύψος της οριζόντιας μπάρας αλλάζοντας το width:1450px; και το height:35px; στην 10η και 12η γραμμή του κώδικα. Το μέγεθος της γραμματοσειράς το αλλάζετε στην 3η γραμμή του κώδικα εκεί που γράφει font-size:14px; Την οικογένεια της γραμματοσειράς την αλλάζετε στην 4η γραμμή εκεί που γράφει font-family:Arial;
Εννοείται ότι
το ίδιο κάνετε και για τα μενού που ανοίγουν· αλλάζετε ότι είναι μεγάλο ή μικρό
για τις διαστάσεις του ιστολογίου σας. Οι ίδιες παράμετροι επαναλαμβάνονται 2 ή
3 φορές μέσα στον κώδικα. Αλλάξτε όποιες νομίζετε ότι δεν ταιριάζουν στο
μέγεθος του blog σας. Δείτε πώς φαίνεται το μενού σε αυτό το 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>
ΧΙΛΙΑ ΕΥΧΑΡΙΣΤΩΩΩ ΦΙΛΕ... ΠΡΑΓΜΑΤΙΚΑ ΕΙΣΑΙ ΑΠΑΙΧΤΟΣ.... ΜΟΥ ΕΒΓΑΛΕ ΤΗΝ ΨΗΧΗ ΝΑ ΑΛΛΑΞΩ ΤΑ ΛΙΝΚ...ΚΑΙ ΝΑ ΤΟ ΠΡΟΣΑΡΜΟΣΩ ΑΛΛΑ ΤΑ ΚΑΤΑΦΕΡΑ..ΚΑΙ ΔΟΥΛΕΥΕΙΙΙΙΙΙΙ...!!!! δες το αν θελεις στο μπλοκ μου http://hlektronikesagores.blogspot.com
ΑπάντησηΔιαγραφήΕβγαλα το καινούργιο MEGA MENU No 3 που είναι κλάσεις ανώτερο δές το αξίζει τον κόπο.
Διαγραφή