Οριζόντιο blogger drop down menu με search bar

Πρόκειται για ένα πολύ όμορφο blogger menu. Προσωπικά είναι από τα καλύτερα που έχω δει, αφενός γιατί περιέχει ενσωματωμένο widget αναζήτησης και αφετέρου διότι έχει εως και τρεις υποκατηγορίες της βασικής κατηγορίας στην μπάρα. Πρέπει πρώτα να γίνουν κάποιες προεργασίες πριν προχωρήσουμε στην εγκατάσταση του menu.

 

Πάμε Template > Edit html και με τη χρήση του ctrl+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
----------------------------------------------- */

Τώρα εκεί που διαγράψατε προηγουμένως τον κώδικα ανάμεσα στο tabs section και στο headings section θα βάλετε τον παρακάτω κώδικα:

#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/AVvXsEik8B9Q_ckhdAjQY1k81_vJ-upiDR8ocKElK0J9WbGM5vBl7RaZCdX9zGeZIMTNfwZVhLKgXVnblOCYxRNdfvQ92WzuvxkgVVRAZKIc5JdcxSn2OGnRBY7iKDaU_1MRxe6p_oZHfP6aAeg/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/AVvXsEik8B9Q_ckhdAjQY1k81_vJ-upiDR8ocKElK0J9WbGM5vBl7RaZCdX9zGeZIMTNfwZVhLKgXVnblOCYxRNdfvQ92WzuvxkgVVRAZKIc5JdcxSn2OGnRBY7iKDaU_1MRxe6p_oZHfP6aAeg/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/AVvXsEieh3SjozOxxUamfGYEm_yLfBbT3sMytANo5UMdIIXQepOGV97KZOu5ODN6UgnIgcEMPHVkRAsKY8KjGJI_0AAl6fJ2R-1mjKIMujN-_uTfWT_0nzbB9-_sjbt8nzDgV6HsaiEtVOl6Jdk/s1600/searchBar1.png) no-repeat;
}
#search-box {
margin-top: 3px;
border:0px;
background: transparent;
text-align:center;
}

Σε όλο τον παραπάνω κώδικα θα βρείτε επεξηγήσεις ανάμεσα σε "/*" , "*/" (π.χ. "/* Menu width */"), ώστε να το μορφοποιήσετε όπως θέλετε.

Τώρα πατήστε Save Template.

Έπειτα πάμε Layout > Add a 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>

Κάντε αποθήκευση του gadget σας και είστε σχεδόν έτοιμοι! Σχεδόν, γιατί πρέπει να προσθέσετε τα links που εσείς θέλετε. 

Aν θέλετε να προσθέσετε άλλο ένα λινκ τότε πάνω από την search bar βάζετε το:

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

ενώ αν θέλετε άλλο ένα λινκ με υποκατηγορίες θα προσθέσετε το:

<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">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>

πηγή: www.bloggertips.gr