Horizontal DropDown Menu ( Νο 29 ) 3 Colours

Ένα μοντέρνο οριζόντιο μενού, με υπομενού σε 3 χρώματα ( Γκρι - Θαλασσί - Πράσινο ) για την σελίδα σας.



θα μπείτε στο Πανόπτη σας & μετά >>> Διάταξη >>> Επεξεργασία HTML και θα κάνετε αναζήτηση με το Ctrl + F για το.....

]]></b:skin>

Μόλις το βρείτε πριν από το κλείσιμο του ]]></b:skin>

Κώδικας για ασημί χρώμα:

<!--HORIZONTAL-MENU-29-STARTS-Widget-by-http://loneeagle110.blogspot.com/-->
.bg {background: url(http://i39.tinypic.com/11ty0lx.jpg);
}
.menu29 {
padding:0 0 0 32px;
margin:0; list-style:none;
height:40px; background:#fff url(http://i40.tinypic.com/xmoq2u.jpg) repeat-x;
position:relative;
font-family:arial, verdana, sans-serif;
}
.menu29 li.top {
display:block;
float:left;
position:relative;
}
.menu29 li a.top_link {
display:block;
float:left; height:40px;
line-height:33px;
color:#bbb;
text-decoration:none;
font-size:11px;
font-weight:bold;
padding:0 0 0 12px;
cursor:pointer;
}
.menu29 li a.top_link span {
float:left;
font-weight:bold;
display:block;
padding:0 24px 0 12px;
height:40px;}
.menu29 li a.top_link span.down {
float:left;
display:block;
padding:0 24px 0 12px;
height:40px; background:url(http://i43.tinypic.com/2qizs46.jpg) no-repeat right top;
}
.menu29 li a.top_link:hover {
color:#000; background: url(http://i39.tinypic.com/11ty0lx.jpg) no-repeat;
}
.menu29 li a.top_link:hover span {
background:url(http://i39.tinypic.com/11ty0lx.jpg) no-repeat right top;
}
.menu29 li a.top_link:hover span.down {
background:url(http://i40.tinypic.com/5eznd0.jpg) no-repeat right top;
}

.menu29 li:hover > a.top_link {
color:#000;
background: url(http://i39.tinypic.com/11ty0lx.jpg) no-repeat;
}
.menu29 li:hover > a.top_link span {
background:url(http://i39.tinypic.com/11ty0lx.jpg) no-repeat right top;
}
.menu29 li:hover > a.top_link span.down {
background:url(http://i40.tinypic.com/5eznd0.jpg) no-repeat right top;
}

.menu29 table {
border-collapse:collapse;
width:0;
height:0;
position:absolute;
top:0;
left:0;}

.menu29 a:hover {
visibility:visible;
}
.menu29 li:hover {
position:relative;
z-index:200;
}

.menu29 ul,
.menu29 :hover ul ul,
.menu29 :hover ul :hover ul ul,
.menu29 :hover ul :hover ul :hover ul ul,
.menu29 :hover ul :hover ul :hover ul :hover ul ul {
position:absolute;
left:-9999px;
top:-9999px;
width:0;
height:0;
margin:0;
padding:0;
list-style:none;
}

.menu29 :hover ul.sub {
left:2px; top:40px;
right:2px;
background: #fff;
padding:3px 0;
border:1px solid #999999;
white-space:nowrap;
width:200px;
height:auto;
}
.menu29 :hover ul.sub li {
display:block;
height:20px;
position:relative;
float:left;
width:250px;
}
.menu29 :hover ul.sub li a {
font-weight:normal;
display:block;
font-size:11px;
height:20px;
width:192px;
line-height:20px;
text-indent:5px;
color:#000;
text-decoration:none;
border:3px solid #fff;
border-width:0 0 0 3px;
}
.menu29 :hover ul.sub li a.fly {
background:#fff url(http://i44.tinypic.com/24n1wk3.jpg) 80px 7px no-repeat;
}
.menu29 :hover ul.sub li a:hover {
background:#999999;
color:#fff;
}
.menu29 :hover ul.sub li a.fly:hover {
background:#999999 url(http://i42.tinypic.com/18ya1v.jpg) 80px 7px no-repeat;
color:#fff;
}
.menu29 :hover ul li:hover > a.fly {
background:#999999 url(http://i42.tinypic.com/18ya1v.jpg) 80px 7px no-repeat;
color:#fff;
}

.menu29 :hover ul :hover ul,
.menu29 :hover ul :hover ul :hover ul,
.menu29 :hover ul :hover ul :hover ul :hover ul,
.menu29 :hover ul :hover ul :hover ul :hover ul :hover ul
{
left:90px;
top:-4px;
background: #fff;
padding:3px 0;
border:1px solid 999999;
white-space:nowrap;
width:93px;
z-index:200;
height:auto;
}
<!--HORIZONTAL-MENU-29-STOPS-Widget-by-http://loneeagle110.blogspot.com/-->

Κώδικας για πράσινο χρώμα:

<!--HORIZONTAL-MENU-29b-STARTS-Widget-by-http://loneeagle110.blogspot.com/-->
.bg {
background: url(http://i40.tinypic.com/2r2q0jb.jpg);
}
.menu29b {
padding:0 0 0 32px;
margin:0;
list-style:none;
height:40px;
background:#fff url(http://i40.tinypic.com/etv59f.jpg) repeat-x;
position:relative;
font-family:arial, verdana, sans-serif;
}
.menu29b li.top {
display:block;
float:left;
position:relative;
}
.menu29b li a.top_link {
display:block;
float:left;
height:40px;
line-height:33px;
color:#bbb;
text-decoration:none;
font-size:11px;
font-weight:bold;
padding:0 0 0 12px;
cursor:pointer;}
.menu29b li a.top_link span {
float:left;
font-weight:bold;
display:block;
padding:0 24px 0 12px;
height:40px;
}
.menu29b li a.top_link span.down {
float:left;
display:block;
padding:0 24px 0 12px;
height:40px;
background:url(http://i43.tinypic.com/23ij62c.jpg) no-repeat right top;
}
.menu29b li a.top_link:hover {
color:#000;
background: url(http://i40.tinypic.com/2r2q0jb.jpg) no-repeat;
}
.menu29b li a.top_link:hover span {
background:url(http://i40.tinypic.com/2r2q0jb.jpg) no-repeat right top;
}
.menu29b li a.top_link:hover span.down {
background:url(http://i41.tinypic.com/2008ck5.jpg) no-repeat right top;
}

.menu29b li:hover > a.top_link {
color:#000;
background: url(http://i40.tinypic.com/2r2q0jb.jpg) no-repeat;
}
.menu29b li:hover > a.top_link span {
background:url(http://i40.tinypic.com/2r2q0jb.jpg) no-repeat right top;
}
.menu29b li:hover > a.top_link span.down {
background:url(http://i41.tinypic.com/2008ck5.jpg) no-repeat right top;
}
.menu29b table {
border-collapse:collapse;
width:0;
height:0;
position:absolute;
top:0;
left:0;
}
.menu29b a:hover {
visibility:visible;
}
.menu29b li:hover {
position:relative;
z-index:200;}

.menu29b ul,
.menu29b :hover ul ul,
.menu29b :hover ul :hover ul ul,
.menu29b :hover ul :hover ul :hover ul ul,
.menu29b :hover ul :hover ul :hover ul :hover ul ul {
position:absolute;
left:-9999px;
top:-9999px;
width:0;
height:0;
margin:0;
padding:0;
list-style:none;
}

.menu29b :hover ul.sub {
left:2px;
top:40px;
right:2px;
background: #fff;
padding:3px 0;
border:1px solid #009900;
white-space:nowrap;
width:200px;
height:auto;
}
.menu29b :hover ul.sub li {
display:block;
height:20px;
position:relative;
float:left;
width:250px;
}
.menu29b :hover ul.sub li a {
font-weight:normal;
display:block;
font-size:11px;
height:20px;
width:192px;
line-height:20px;
text-indent:5px;
color:#000;
text-decoration:none;
border:3px solid #fff;
border-width:0 0 0 3px;
}
.menu29b :hover ul.sub li a.fly {
background:#fff url(http://i39.tinypic.com/15669us.jpg) 80px 7px no-repeat;
}
.menu29b :hover ul.sub li a:hover {
background:#42c555; color:#fff;
}
.menu29b :hover ul.sub li a.fly:hover {
background:#42c555 url(http://i43.tinypic.com/snlxc9.jpg) 80px 7px no-repeat;
color:#fff;
}
.menu29b :hover ul li:hover > a.fly {
background:#42c555 url(http://i43.tinypic.com/snlxc9.jpg) 80px 7px no-repeat;
color:#fff;
}

.menu29b :hover ul :hover ul,
.menu29b :hover ul :hover ul :hover ul,
.menu29b :hover ul :hover ul :hover ul :hover ul,
.menu29b :hover ul :hover ul :hover ul :hover ul :hover ul
{
left:90px;
top:-4px;
background: #fff;
padding:3px 0;
border:1px solid 95d2ee;
white-space:nowrap;
width:93px;
z-index:200;
height:auto;
}
<!--HORIZONTAL-MENU-29b-STOPS-Widget-by-http://loneeagle110.blogspot.com/-->

Κώδικας για θαλασσί χρώμα:

<!--HORIZONTAL-MENU-29c-STARTS-Widget-by-http://loneeagle110.blogspot.com/-->
.bg {
background: url(http://i41.tinypic.com/2nm3zm9.jpg);
}
.menu29c {
padding:0 0 0 32px;
margin:0;
list-style:none;
height:40px;
background:#fff url(http://i43.tinypic.com/jgk1kx.jpg) repeat-x;
position:relative;
font-family:arial, verdana, sans-serif;
}
.menu29c li.top {
display:block;
float:left;
position:relative;
}
.menu29c li a.top_link {
display:block;
float:left;
height:40px;
line-height:33px;
color:#bbb;
text-decoration:none;
font-size:11px;
font-weight:bold;
padding:0 0 0 12px;
cursor:pointer;}
.menu29c li a.top_link span {
float:left;
font-weight:bold;
display:block;
padding:0 24px 0 12px;
height:40px;}
.menu29c li a.top_link span.down {
float:left;
display:block;
padding:0 24px 0 12px;
height:40px;
background:url(http://i39.tinypic.com/ip13ig.jpg) no-repeat right top;
}
.menu29c li a.top_link:hover {
color:#000;
background: url(http://i41.tinypic.com/2nm3zm9.jpg) no-repeat;
}
.menu29c li a.top_link:hover span {
background:url(http://i41.tinypic.com/2nm3zm9.jpg) no-repeat right top;
}
.menu29c li a.top_link:hover span.down {
background:url(http://i40.tinypic.com/sexdp2.jpg) no-repeat right top;
}

.menu29c li:hover > a.top_link {
color:#000;
background: url(http://i41.tinypic.com/2nm3zm9.jpg) no-repeat;
}
.menu29c li:hover > a.top_link span {
background:url(http://i41.tinypic.com/2nm3zm9.jpg) no-repeat right top;
}
.menu29c li:hover > a.top_link span.down {
background:url(http://i40.tinypic.com/sexdp2.jpg) no-repeat right top;
}

.menu29c table {
border-collapse:collapse;
width:0;
height:0;
position:absolute;
top:0;
left:0;}

.menu29c a:hover {
visibility:visible;
}
.menu29c li:hover {
position:relative;
z-index:200;
}

.menu29c ul,
.menu29c :hover ul ul,
.menu29c :hover ul :hover ul ul,
.menu29c :hover ul :hover ul :hover ul ul,
.menu29c :hover ul :hover ul :hover ul :hover ul ul {
position:absolute;
left:-9999px;
top:-9999px;
width:0;
height:0;
margin:0;
padding:0;
list-style:none;
}

.menu29c :hover ul.sub {
left:2px;
top:40px;
right:2px;
background: #fff;
padding:3px 0;
border:1px solid #95d2ee;
white-space:nowrap;
width:200px;
height:auto;
}
.menu29c :hover ul.sub li {
display:block;
height:20px;
position:relative;
float:left;
width:250px;
}
.menu29c :hover ul.sub li a {
font-weight:normal;
display:block;
font-size:11px;
height:20px;
width:192px;
line-height:20px;
text-indent:5px;
color:#000;
text-decoration:none;
border:3px solid #fff;
border-width:0 0 0 3px;
}
.menu29c :hover ul.sub li a.fly {
background:#fff url(http://i43.tinypic.com/16arthl.jpg) 80px 7px no-repeat;
}
.menu29c :hover ul.sub li a:hover {
background:#95d2ee;
color:#fff;
}
.menu29c :hover ul.sub li a.fly:hover {
background:#95d2ee url(http://i39.tinypic.com/28h0s9y.jpg) 80px 7px no-repeat;
color:#fff;
}
.menu29c :hover ul li:hover > a.fly {
background:#95d2ee url(http://i39.tinypic.com/28h0s9y.jpg) 80px 7px no-repeat;
color:#fff;
}

.menu29c :hover ul :hover ul,
.menu29c :hover ul :hover ul :hover ul,
.menu29c :hover ul :hover ul :hover ul :hover ul,
.menu29c :hover ul :hover ul :hover ul :hover ul :hover ul
{
left:90px;
top:-4px;
background: #fff;
padding:3px 0;
border:1px solid 95d2ee;
white-space:nowrap;
width:93px;
z-index:200;
height:auto;
}
<!--HORIZONTAL-MENU-29c-STOPS-Widget-by-http://loneeagle110.blogspot.com/-->

Κάνετε αποθήκευση προτύπου & πάμε στο 2ο βήμα.....

Πανόπτης ---> Διάταξη ---> Στοιχεία Σελίδας ---> Προσθήκη gadget ---> HTML/JavaScript

Και μέσα στο gadget βάζουμε τον παρακάτω κώδικα, χωρίς να προσθεσουμε κάτι στον Τίτλο.

Κώδικας για ασημί χρώμα:

<!--HORIZONTAL-MENU-29-SILVER-STARTS-Widget-by-http://loneeagle110.blogspot.com/-->
<ul class="menu29">
<li class="top"><a href="...your link..." class="top_link"><span>Login</span></a></li>
<li class="top"><a href="...your link..." class="top_link"><span>Home</span></a></li>
<li class="top"><a href="http://loneeagle110.blogspot.com/search/label/Blogger%20Tutorials" target="_self" title="Blogger Tutorials" class="top_link"><span>Blogger Tutorials</span></a>
<ul class="sub">
<li><a href="...your link...">tab 1</a></li>
<li><a href="...your link...">tab 2</a></li>
</ul>
</li>
<li class="top"><a href="...your link..." class="top_link"><span>Documents</span></a>
<ul class="sub">
<li><a href="...your link...">tab 1</a></li>
<li><a href="...your link...">tab 2</a></li>
</ul>
</li>
<li class="top"><a href="...your link..." class="top_link"><span>Graphics</span></a></li>
<ul class="sub">
<li><a href="...your link...">tab 1</a></li>
<li><a href="...your link...">tab 2</a></li>
</ul>
<li class="top"><a href="...your link..." class="top_link"><span>Tools</span></a></li>
<li class="top"><a href="...your link..." class="top_link"><span>Tutorials</span></a></li>
<li class="top"><a href="...your link..." class="top_link"><span>Other</span></a></li>
<li class="top"><a href="...your link..." class="top_link"><span>Tips & tricks</span></a></li>
<li class="top"><a href="...your link..." class="top_link"><span>Contact me</span></a></li>
</ul>
<!--HORIZONTAL-MENU-29-SILVER-STOPS-Widget-by-http://loneeagle110.blogspot.com/-->

Κώδικας για πράσινο χρώμα:

<!--HORIZONTAL-MENU-29-GREEN-STARTS-Widget-by-http://loneeagle110.blogspot.com/-->
<ul class="menu29b">
<li class="top"><a href="...your link..." class="top_link"><span>Login</span></a></li>
<li class="top"><a href="...your link..." class="top_link"><span>Home</span></a></li>
<li class="top"><a href="http://loneeagle110.blogspot.com/search/label/Blogger%20Tutorials" target="_self" title="Blogger Tutorials" class="top_link"><span>Blogger Tutorials</span></a>
<ul class="sub">
<li><a href="...your link...">tab 1</a></li>
<li><a href="...your link...">tab 2</a></li>
</ul>
</li>
<li class="top"><a href="...your link..." class="top_link"><span>Documents</span></a>
<ul class="sub">
<li><a href="...your link...">tab 1</a></li>
<li><a href="...your link...">tab 2</a></li>
</ul>
</li>
<li class="top"><a href="...your link..." class="top_link"><span>Graphics</span></a></li>
<ul class="sub">
<li><a href="...your link...">tab 1</a></li>
<li><a href="...your link...">tab 2</a></li>
</ul>
<li class="top"><a href="...your link..." class="top_link"><span>Tools</span></a></li>
<li class="top"><a href="...your link..." class="top_link"><span>Tutorials</span></a></li>
<li class="top"><a href="...your link..." class="top_link"><span>Other</span></a></li>
<li class="top"><a href="...your link..." class="top_link"><span>Tips & tricks</span></a></li>
<li class="top"><a href="...your link..." class="top_link"><span>Contact me</span></a></li>
</ul>
<!--HORIZONTAL-MENU-29-GREEN-STOPS-Widget-by-http://loneeagle110.blogspot.com/-->

Κώδικας για θαλασσί χρώμα:

<!--HORIZONTAL-MENU-29-BLUE-STARTS-Widget-by-http://loneeagle110.blogspot.com/-->
<ul class="menu29c">
<li class="top"><a href="...your link..." class="top_link"><span>Login</span></a></li>
<li class="top"><a href="...your link..." class="top_link"><span>Home</span></a></li>
<li class="top"><a href="http://loneeagle110.blogspot.com/search/label/Blogger%20Tutorials" target="_self" title="Blogger Tutorials" class="top_link"><span>Blogger Tutorials</span></a>
<ul class="sub">
<li><a href="...your link...">tab 1</a></li>
<li><a href="...your link...">tab 2</a></li>
</ul>
</li>
<li class="top"><a href="...your link..." class="top_link"><span>Documents</span></a>
<ul class="sub">
<li><a href="...your link...">tab 1</a></li>
<li><a href="...your link...">tab 2</a></li>
</ul>
</li>
<li class="top"><a href="...your link..." class="top_link"><span>Graphics</span></a></li>
<ul class="sub">
<li><a href="...your link...">tab 1</a></li>
<li><a href="...your link...">tab 2</a></li>
</ul>
<li class="top"><a href="...your link..." class="top_link"><span>Tools</span></a></li>
<li class="top"><a href="...your link..." class="top_link"><span>Tutorials</span></a></li>
<li class="top"><a href="...your link..." class="top_link"><span>Other</span></a></li>
<li class="top"><a href="...your link..." class="top_link"><span>Tips & tricks</span></a></li>
<li class="top"><a href="...your link..." class="top_link"><span>Contact me</span></a></li>
</ul>
<!--HORIZONTAL-MENU-29-BLUE-STOPS-Widget-by-http://loneeagle110.blogspot.com/-->

Όπου ...your link... βάζετε τον σύνδεσμο της αντίστοιχης ετικέτας σας.

Αν κρατήσετε τον σύνδεσμο Blogger Tutorials που έχει ο παραπάνω κώδικας, ίσως δώσετε την δυνατότητα & στους επισκέπτες σας να μας μάθουν & να μπορέσουν κι αυτοί με τη σειρά τους να βελτιώσουν την σελίδα τους.
Μέσα από τις πληροφορίες που σας προσφέρουμε απλόχερα.
Εμείς το ελάχιστο που μπορούμε να κάνουμε είναι να σας Ευχαριστήσουμε δημόσια εκ των προτέρων για αυτή σας την κίνηση.

Αφού περάσετε τις ετικέτες που θέλετε κάνετε αποθήκευση & μετά από την διάταξη της σελίδας σας, παίρνεται το gadget & το τοποθετείται ακριβώς κάτω από τη κεφαλίδα σας.

Πατάτε ΑΠΟΘΗΚΕΥΣΗ κι είστε ΟΚ.

Το αποτέλεσμα:



Για σχέδια σε Οριζόντια Μενού δείτε τα.....

Οριζόντιο Μενού Νο 1
Οριζόντιο Μενού Νο 2
Οριζόντιο Μενού Νο 3
Οριζόντιο Μενού Νο 4
Οριζόντιο Μενού Νο 5
Οριζόντιο Μενού Νο 6
Οριζόντιο Μενού Νο 7
Οριζόντιο Μενού Νο 8
Οριζόντιο Μενού Νο 9
Οριζόντιο Μενού Νο 10
Οριζόντιο Μενού Νο 11
Οριζόντιο Μενού Νο 12
Οριζόντιο Μενού Νο 13
Οριζόντιο Μενού Νο 14
Οριζόντιο Μενού Νο 15
Οριζόντιο Μενού Νο 16
Οριζόντιο Μενού Νο 17
Οριζόντιο Μενού Νο 18
Οριζόντιο Μενού Νο 19
Οριζόντιο Μενού Νο 20
Οριζόντιο Μενού Νο 21
Οριζόντιο Μενού Νο 22
Οριζόντιο Μενού Νο 23
Οριζόντιο Μενού Νο 24
Οριζόντιο Μενού Νο 25
Οριζόντιο Μενού Νο 26
Οριζόντιο Μενού Νο 27
Οριζόντιο Μενού Νο 28
Οριζόντιο Μενού Νο 29
Οριζόντιο Μενού Νο 30
Οριζόντιο Μενού Νο 31
Οριζόντιο Μενού Νο 32
Οριζόντιο Μενού Νο 33
Οριζόντιο Μενού Νο 34
Οριζόντιο Μενού Νο 35
Οριζόντιο Μενού Νο 36
Οριζόντιο Μενού Νο 37
Οριζόντιο Μενού Νο 38
Οριζόντιο Μενού Νο 39
Οριζόντιο Μενού Νο 40
Οριζόντιο Μενού Νο 41
Οριζόντιο Μενού Νο 42
Οριζόντιο Μενού Νο 43
Οριζόντιο Μενού Νο 44
Οριζόντιο Μενού Νο 45
Οριζόντιο Μενού Νο 46
Οριζόντιο Μενού Νο 47
Οριζόντιο Μενού Νο 48
Οριζόντιο Μενού Νο 51

Για σχέδια σε Κάθετα μενού δείτε τα....

Κάθετο Μενού Νο 1
Κάθετο Μενού Νο 2
Κάθετο Μενού Νο 3
Κάθετο Μενού Νο 4
Κάθετο Μενού Νο 5
Κάθετο Μενού Νο 6
Κάθετο Μενού Νο 7
Κάθετο Μενού Νο 8
Κάθετο Μενού Νο 9
Κάθετο Μενού Νο 11
Κάθετο Μενού Νο 12
Κάθετο Μενού Νο 13
Κάθετο Μενού Νο 14
Κάθετο Μενού Νο 15
Κάθετο Μενού Νο 16
Κάθετο Μενού Νο 17
Κάθετο Μενού Νο 18
Κάθετο Μενού Νο 20
Κάθετο Μενού Νο 21
Κάθετο Μενού Νο 22
Κάθετο Μενού Νο 23
Κάθετο Μενού No 26

ΚΑΛΗ ΕΠΙΤΥΧΙΑ!!!!!