Οριζόντιο Dropdown Μενού με Submenu και Search Bar - Blogger

Ένα όμορφο μενού με υποκατηγορίες για κάθε κύρια κατηγορία και ενσωματωμένη Search Bar το οποίο έχω επιλέξει προσωπικά για το Blog μου, ελαφρώς τροποποιημένο. Τη διαδικασία εγκατάστασης δε θα τη χαρακτήριζε κανείς ''απλή'' αλλά πιστεύω ότι αξίζει τον κόπο. Δε θα αντιμετωπίσετε κανένα πρόβλημα αν ακολουθήσετε τα παρακάτω βήματα...

[Θα συνιστούσα σε όποιον δεν έχει εγκαταστήσει ένα πιο απλό μενού (χωρίς υποκατηγορίες) η δεν έχει τουλάχιστον στοιχειώδη εμπειρία να μην το προσπαθήσει γιατί πιθανότατα (όχι σίγουρα) θα μπερδευτεί]. 

Καταρχήν ανοίγουμε το Blogger μας και πάμε Πρότυπο Δημιουργία Αντιγράφου ασφαλείας (για κάθε ενδεχόμενο λάθους). Στη συνέχεια Επεξεργασία HTML και πατώντας Cntr+F βρίσκουμε το

<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>

Απ΄ τον μικρούλη αυτόν κώδικα αφαιρούμε το class='tabs' (πιθανόν ο κώδικας να υπάρχει παραπάνω από μία φορές. Τον διαγράφουμε απ' όλες).

Στη συνέχεια βρίσκουμε το

/* Tabs

----------------------------------------------- */


και διαγράφουμε ότι υπάρχει ανάμεσα σ' αυτό και στο

/* Headings

----------------------------------------------- */



Παράδειγμα, αν ο αρχικός κώδικας ήταν αυτός

/* Tabs
----------------------------------------------- */
.tabs-outer {
overflow: hidden;
position: relative;
background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll 0 0;
}
#layout .tabs-outer {
overflow: visible;
}
.tabs-cap-top, .tabs-cap-bottom {
position: absolute;
width: 100%;
border-top: 1px solid $(tabs.border.color);
}
.tabs-cap-bottom {
bottom: 0;
}
.tabs-inner .widget li a {
display: inline-block;
margin: 0;
padding: .6em 1.5em;
font: $(tabs.font);
color: $(tabs.text.color);
border-top: 1px solid $(tabs.border.color);
border-bottom: 1px solid $(tabs.border.color);
border-$startSide: 1px solid $(tabs.border.color);
}
.tabs-inner .widget li:last-child a {
border-$endSide: 1px solid $(tabs.border.color);
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
background: $(tabs.selected.background.color) $(tabs.background.gradient) repeat-x scroll 0 -100px;
color: $(tabs.selected.text.color);
}
/* Headings
----------------------------------------------- */ 

θα πρέπει να μείνει αυτός

/* Tabs

----------------------------------------------- */

/* Headings

----------------------------------------------- */ 


Στη θέση αυτού που διαγράψαμε, επικολλούμε αυτό

#crosscol ul {z-index: 200; padding:0 !important;}
#crosscol li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
.tabs-outer {z-index:1;}
.tabs .widget ul, .tabs .widget ul {overflow: visible;}

Κατόπιν βρίσκουμε το

]]></b:skin>}

ακριβώς από πάνω του επικολλούμε αυτό 

/* Horizontal drop down menu
----------------------------------------------- */
#menuWrapper {

width:100%; /* Menu width */
height:35px;
padding-left:14px;
background:#333; /* Background color */
border-radius: 10px; 
}
.menu {
padding:0;
margin:0;
list-style:none;
height:35px;
position:relative;
z-index:5;
font-family:arial, verdana, sans-serif;
}
.menu li:hover li a {
background:none;
}
.menu li.top {display:block; float:left;}
.menu li a.top_link {
display:block;
float:left;
height:35px;
line-height:34px;
color:#ccc;
text-decoration:none;
font-family:"Verdana", sans-serif;
font-size:12px; /* Font size */
font-weight:bold;
padding:0 0 0 12px;
cursor:pointer;
}
.menu li a.top_link span {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
}
.menu li a.top_link span.down {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
}
.menu li a.top_link:hover, .menu li:hover > a.top_link {color:#fff; }
.menu li:hover {position:relative; z-index:2;}
.menu ul,
.menu li:hover ul ul,
.menu li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
.menu li:hover ul.sub {
left:0;
top:35px;
background:#333; /* Submenu background color */
padding:3px;
white-space:nowrap;
width:200px;
height:auto;
z-index:3;
}
.menu li:hover ul.sub li {
display:block;
height:30px;
position:relative;
float:left;
width:200px;
font-weight:normal;
}
.menu li:hover ul.sub li a{
display:block;
height:30px;
width:200px;
line-height:30px;
text-indent:5px;
color:#ccc;
text-decoration:none;
}
.menu li ul.sub li a.fly {

/* Submenu Background Color */

background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0BM8H0EenlgXL-i4NGLPE-D08aXurvdLBWRjfvSDEx19N6CiMQP0AZZk0fKFOBXKd0RkDWsL4qOwZy5030sBTWw_aXddjv8uZks4MN587iVhjsMvpIF_bz1ObKti4wgXg7oLfq4Lk9jI/s1600/arrow_over.gif) 185px 10px no-repeat;}
.menu li:hover ul.sub li a:hover {
background:#515151; /* Background Color on mouseover */
color:#fff;
}
.menu li:hover ul.sub li a.fly:hover, .menu li:hover ul li:hover > a.fly {

/* Background on Mouseover */

background:#646464 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0BM8H0EenlgXL-i4NGLPE-D08aXurvdLBWRjfvSDEx19N6CiMQP0AZZk0fKFOBXKd0RkDWsL4qOwZy5030sBTWw_aXddjv8uZks4MN587iVhjsMvpIF_bz1ObKti4wgXg7oLfq4Lk9jI/s1600/arrow_over.gif) 185px 10px no-repeat; color:#fff;}
.menu li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul {
left:200px;
top:-4px;
background: #333; /* Background Color of the Submenu */
padding:3px;
white-space:nowrap;
width:200px;
z-index:4;
height:auto;
}
#search {
width: 228px; /* Width of the Search Box */
height: 50px;
float: right;
z-index: 2;
text-align: center;
margin-top: 5px;
margin-right: 6px;

/* Background of the Search Box */
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimPeJ6wNlcSPp25SS8bQe8HY0jOX8aJwT9kvGESkOlfdyQL1z-VjNHDMVmCgr1kK3-xavV1COzwlYO_g_bIXOtQFoOjIRLMnQ5wvBy2VsgQDvjY4gS7FE3IjXEzTn6KoM_R47U-SHuI9I/s1600/searchBar1.png) no-repeat;
}
#search-box {
margin-top: 3px;
border:0px;
background: transparent;
text-align:center;
}

και πατάμε Αποθήκευση Προτύπου.


Μετά, προσθέτουμε σαν Gadget τον παρακάτω κώδικα:
(Η διαδικασία είναι απλή και για τους περισσότερους γνωστή:
Αντιγραφή κώδικα  --  Πίνακας Ελέγχου  --  επιλέγουμε το Blogger  μας  -- Διάταξη  -- Προσθήκη gadget  --  HTML/JavaScript  --  Επικόλληση κώδικα  -- Αποθήκευση.)

<div id='menuWrapper'>
<ul class='menu'>
<li class='top'><a class='top_link' href='Link URL'><span>Title 1</span></a></li>
<li class='top'><a class='top_link' href='Link URL'><span class='down'>Title 2</span></a><ul class='sub'><li><a class='fly' href='Link URL'>Submenu 2.1</a><ul>
<li><a href='Link URL'>Submenu 2.1.1</a></li>
<li><a href='Link URL'>Submenu 2.1.2</a></li>
<li><a href='Link URL'>Submenu 2.1.3</a></li>
</ul>
</li>
<li class='mid'><a class='fly' href='Link URL'>Submenu 2.2</a>
<ul>
<li><a href='Link URL'>Submenu 2.2.1</a></li>
<li><a href='Link URL'>Submenu 2.2.2</a></li>
<li><a href='Link URL'>Submenu 2.2.3</a></li>
<li><a class='fly' href='Link URL'>Submenu 2.2.4</a>
<ul>
<li><a href='Link URL'>Submenu 2.2.4.1</a></li>
<li><a href='Link URL'>Submenu 2.2.4.2</a></li>
<li><a href='Link URL'>Submenu 2.2.4.3</a></li>
</ul>
</li>
<li><a href='Link URL'>Submenu 2.2.5</a></li>
<li><a class='fly' href='Link URL'>Submenu 2.2.6</a>
<ul>
<li><a href='Link URL'>Submenu 2.2.6.1</a></li>
<li><a href='Link URL'>Submenu 2.2.6.2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='Link URL'>Submenu 2.3</a></li>
<li><a href='Link URL'>Submenu 2.4</a></li>
<li><a href='Link URL'>Submenu 2.5</a></li>
</ul>
</li>
<li class='top'><a class='top_link' href='Link URL'><span class='down'>Title 3</span></a>
<ul class='sub'>
<li><a href='Link URL'>Submenu 3.1</a></li>
<li><a href='Link URL'>Submenu 3.2</a></li>
<li><a href='Link URL'>Submenu 3.3</a></li>
<li><a href='Link URL'>Submenu 3.4</a></li>
</ul>
</li>
<li class='top'><a class='top_link' href='Link URL'><span class='down'>Title 4</span></a>
<ul class='sub'>
<li><a href='Link URL'>Submenu 4.1</a></li>
<li><a class='fly' href='Link URL'>Submenu 4.2</a>
<ul>
<li><a href='Link URL'>Submenu 4.2.1</a></li>
<li><a href='Link URL'>Submenu 4.2.2</a></li>
<li><a href='Link URL'>Submenu 4.2.3</a></li>
<li><a href='Link URL'>Submenu 4.2.4</a></li>
<li><a href='Link URL'>Submenu 4.2.5</a></li>
<li><a href='Link URL'>Submenu 4.2.6</a></li>
</ul>
</li>
<li><a href='Link URL'>Submenu 4.3</a></li>
<li><a href='Link URL'>Submenu 4.4</a></li>
<li><a href='Link URL'>Submenu 4.5</a></li>
<li><a href='Link URL'>Submenu 4.6</a></li>
</ul>
</li>
<li class='top'><a class='top_link' href='Link URL'><span class='down'>Title 5</span></a>
<ul class='sub'>
<li><a href='Link URL'>Submenu 5.1</a></li>
<li><a href='Link URL'>Submenu 5.2</a></li>
<li><a href='Link URL'>Submenu 5.3</a></li>
</ul>
</li>
<!-- Search Bar -->
<li>
<form action='/search' id='search' method='get' name='searchForm' style='display:inline;'>
<input id='search-box' name='q' onblur='if (this.value == "") this.value = "Search here...";' onfocus='if (this.value == "Search here...") this.value = "";' size='28' type='text' value='Search here...'/></form>
</li>
</ul>
</div>

Πατάμε Αποθήκευση.


Εάν θέλουμε να προσθέσουμε κι άλλο link, πάνω απ' την Search Bar επικολλούμε αυτό

<li class="top"><a href="Link URL" class="top_link"><span>Title</span></a></li>

και για link με submenu αυτό

<li class="top"><a href="Link URL" class="top_link"><span class="down">Title</span></a>
<ul class="sub">
<li><a href="Link URL">Submenu Title</a></li>
<li><a href="Link URL">Submenu Title</a></li>
<li><a href="Link URL">Submenu Title</a></li>
</ul>
</li>

Για δεύτερη υποκατηγορία (υποκατηγορίες στην υποκατηγορία) θα πρέπει το 

<li><a href="Link URL">Submenu Title</a></li>

να γίνει

<li><a href="Link URL" class="fly">Submenu Title</a>
<ul>
<li><a href="Link URL">Other Submenu</a></li>
<li><a href="Link URL">Other Submenu</a></li>
<li><a href="Link URL">Other Submenu</a></li>
</ul>
</li>

Θα δώσω 2 links σε όσους χρειάζονται πληροφορίες για το πως να προσθέσουν τα δικά τους links στον παραπάνω κώδικα, μιας και εγώ δεν έχω κάνει ανάρτηση για το συγκεκριμένο θέμα, ακόμη.
1) bloggertips.gr
2) Panagiotis Koursaris