Οριζοντιο blogger menu widget (και με search bar) με πολλα submenus (υποκατηγοριες-drop down menu)

Πρόκειται για ένα πολύ όμορφο blogger menu. Προσωπικά είναι από τα καλύτερα που έχω δει, αφενός γιατί περιέχει ενσωματωμένο widget αναζήτησης και αφετέρου διότι έχει εως και τρεις υποκατηγορίες της βασικής κατηγορίας στην μπάρα.
μπορείτε να δείτε πως δουλεύει στο http://www.bet-master55giannis35.com/

πρέπει πρώτα να γίνουν κάποιες προεργασίες πριν προχωρήσουμε στην εγκατάσταση του menu

πάμε πανόπτης > πρότυπο > επεξεργασία html και με τη χρήση του ctrl+F ψάχνουμε για την ακόλουθη γραμμή:


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


ίσως βρούμε αυτή την γραμμή πολλές φορές
από όλες τις γραμμές διαγράφουμε το class='tabs'

στη συνέχεια ψάχνουμε να βρούμε στον κώδικα για το παρακάτω κομμάτι κώδικα' για το παρακάτω section


/* 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/AVvXsEi9D8HGomgLW92wIKJ707vPzu4HCldU0WyFrCtv15Z8nvdIEEZDNUrdH7vKpQjYOwqdXLDKk-x3YIaextMfQG7jC0BHUI9Ita4v2x-4lEUCgs5rnQrwMunKljMGJt-CCuMShbsgBo0O-Cw/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/AVvXsEi9D8HGomgLW92wIKJ707vPzu4HCldU0WyFrCtv15Z8nvdIEEZDNUrdH7vKpQjYOwqdXLDKk-x3YIaextMfQG7jC0BHUI9Ita4v2x-4lEUCgs5rnQrwMunKljMGJt-CCuMShbsgBo0O-Cw/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/AVvXsEj_w7Xbfw7DD96MUEGS3Zy8J9sUmWrlQUcbfC_rsulZM84__Id1YTjHqWFJaFkAj7U0RledWbKj8Ss6lchvBFVFIsHRQTBEKWD6okHAkLGisOuHMZmNpL0pTtRmgynxqnPxBdJuAwJLIQU/s1600/searchBar1.png) no-repeat;

}

#search-box {

margin-top: 3px;

border:0px;

background: transparent;

text-align:center;

}


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

Τώρα πατήστε Αποθήκευση Προτύπου

Έπειτα πάμε διάταξη > Προσθήκη 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 που εσείς θέλετε.
Η διαδικασία είναι πάντα ίδια σε όλα τα menus. Μπορείτε να δείτε και μια παλιά μου ανάρτηση με blogger menu (π.χ. http://www.bloggertips.gr/2011/04/blogger-menu-3.html) για να καταλάβετε καλύτερα.

αν θέλετε να προσθέσετε άλλο ένα λινκ τότε πάνω από την 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>


Τα σχόλιά σας, πάντα ευπρόσδεκτα!

Αν το bloggertips.gr σας έχει βοηθήσει, βοηθήστε το κι εσείς με ένα απλό like στο https://www.facebook.com/www.bloggertipstips.gr

Copyrights: http://www.bloggertips.gr/