Οριζόντιο CSS3 Drop Down Menu για το Blog σας

Καλησπέρα σας,

Σήμερα θα σας δείξω πώς να προσθέσετε ένα οριζόντιο μενού στο Blog σας.

Μετά από λαϊκή εντολή, σας παραθέτω τον κώδικα του δικού μου μενού διότι είναι πολύ εύκολος στην προσαρμογή του (δεν χρειάζεται μεγάλη επεξεργασία) και έτσι όσοι θέλετε θα μπορείτε να χωρίσετε τις αναρτήσεις σας σε κατηγορίες, δηλαδή Blogger Tricks, Blogger Gadgets κλπ ή αντίστοιχα για ένα άλλο blog, "Πολιτική", "Αθλητικά", "Ελλάδα", "Κόσμος".

Για να μην καθυστερούμε θα προχωρήσω κατευθείαν στο ψητό:

Ακολουθήστε τα βήματα μου με προσοχή:

1) Σύνδεση στον Blogger
2) Διάταξη
3) Προσθήκη Gadget στο σημείο που θέλουμε το μενού.
4) HTML/JavaScript

Και στο κουτάκι προσθέτουμε τον παρακάτω κώδικα:

<style>
/*------ CSS3 Drop Down Menu By MBT (www.mybloggertricks.com)---------*/

#mbt-menu, #mbt-menu ul {
margin: 0;
padding: 0;
list-style: none;
}

#mbt-menu {
overflow:visible;
width: 960px;
margin: 60px auto;
border: 1px solid #222;
background-color: #111;
background-image: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background-image: -webkit-linear-gradient(#444, #111);
background-image: -o-linear-gradient(#444, #111);
background-image: -ms-linear-gradient(#444, #111);
background-image: linear-gradient(#444, #111);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 1px #777;
-webkit-box-shadow: 0 1px 1px #777;
box-shadow: 0 1px 1px #777;
}

#mbt-menu:before,

#mbt-menu:after {
content: "";
display: table;
}

#mbt-menu:after {
clear: both;
}

#mbt-menu {
zoom:1;
}

#mbt-menu li {
float: left;
border-right: 1px solid #222;
-moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
}

#mbt-menu a {
float: left;
padding: 12px 30px;
color: #999;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}

#mbt-menu li:hover > a {
color: #fafafa;
}

*html #mbt-menu li a:hover { /* IE6 only */
color: #fafafa;
}

#mbt-menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 9999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}

#mbt-menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}

#mbt-menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}

#mbt-menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}

#mbt-menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}

#mbt-menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}

#mbt-menu ul a:hover {
background-color: #0186ba;
background-image: -moz-linear-gradient(#04acec, #0186ba);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background-image: -webkit-linear-gradient(#04acec, #0186ba);
background-image: -o-linear-gradient(#04acec, #0186ba);
background-image: -ms-linear-gradient(#04acec, #0186ba);
background-image: linear-gradient(#04acec, #0186ba);
}

#mbt-menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}

#mbt-menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}

#mbt-menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}

#mbt-menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}

#mbt-menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}

#mbt-menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
</style>

<ul id="mbt-menu">
<li><a href="#">Home</a></li>
<li><a href="#">Categories</a>
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Development Tools</a></li>
<li><a href="#">Web Design</a></li>
</ul>
</li>
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>

Πορτοκαλί Χρώμα : Μέγεθος του μενού ανάλογα με το Blog.
Κόκκινο Χρώμα : Ονόματα που θα εμφανίζονται στο μενού.
Μπλέ Χρώμα (δηλαδή η διέση #) : Βάζεις το site ή URL που θέλεις να ανοίγει το κουμπί
Ρόζ Χρώμα : Γραμματοσειρά

UPDATE: Όλοι όσοι είχαν πρόβλημα με τις υποκατηγορίες, να δοκιμάσουν τον καινούργιο κώδικα και να μου απαντήσουν στα σχόλια για το αν τους δουλεύει.

Όσοι δεν ξέρετε πώς να χωρίζεται τις αναρτήσεις σας σε κατηγορίες παρακαλώ ακολουθήστε τον παρακάτω σύνδεσμο. http://www.bloggertricks.gr/2011/10/pos-xorizo-tis-anartiseis-mou-se.html

UPDATE (20/12/2013): Επειδή μερικοί ήθελαν επιπλέον υποκατηγορίες και σε άλλα κουμπιά του μενού, θα γράψω εδώ την συνέχεια αυτής της ανάρτησης.

Καταρχάς αφήνουμε όλο τον κώδικα ίδιο!!! Δεν αλλάζουμε τίποτα από μόνοι μας

Το μόνο σημείο που μας ενδιαφέρει είναι το τελευταίο κομμάτι του κώδικα δηλαδή:

<ul id="mbt-menu">
<li><a href="#">Home</a></li>
<li><a href="#">Categories</a>
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Development Tools</a></li>
<li><a href="#">Web Design</a></li>
</ul>
</li>
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>

Θα δημίουργήσουμε τώρα τις αντίστοιχες υποκατηγορίες και για το About κουμπί:

1) Αντιγράφουμε τον κώδικα με το γαλάζιο

2) Πάμε στο <li><a href="#">About</a></li> και πριν το τελευταίο </li> βάζουμε το γαλάζιο κώδικα
δηλαδή μετά το </a> και πριν το </li> ώστε να είναι <li><a href="#">About</a>γαλάζιο</li>

Το έγραψα σε συντομία για να μην κάνω copy-paste τους τεράστιους κώδικες.

CopyRights: MyBloggerTricks.com