Drop Down menu for Blogger

In today's article we will talk about the drop down menu for your blog, something very useful and intuitive for the readers, this way they can select what they want to read without problems.

What is it for?

It is a tool that will help us to organize efficiently, grouping by categories, the contents of our blog.

Before you begin, remember to make a backup in case you regret it.

1- Copy the following code, why? Good question. It is the structure of our drop down menu:

<ul id="Menublog">
 <li><a href="#">Normal Menu1</a></li>
 <li>
 Drop Down Menu
 <ul>
 <li><a href="#">Submenu 1</a></li>
 <li><a href="#">Submenu2</a></li>
 <li><a href="#">Submenu3</a></li>
 </ul>
 </li>
 <li><a href="#">Normal Menu2</a></li>
</ul>

2- Once copied, we go to the editor of blogger and click in Design.

If you already have a menu (Crosscol, pages) you can delete it (Whenever you have backed up if you do not like the new one).

3- We stand in front of Cross-column or Multicolumn and clicked on adding a gadget (It must be just the one under Header):

The gadget to add is HTML/JavaScript:

In the window that opens, paste the code:

4- Now that we have it and before saving, we must put it as we like, So we need two elements:

A) Structure of the menu

Simple button: It is the code <li><a href="#">Normal Menu1</a></li>

Button with Submenu: It is the code
 <li>
 Drop Down Menu
 <ul>
 <li><a href="#">Submenu 1</a></li>
 <li><a href="#">Submenu2</a></li>
 <li><a href="#">Submenu3</a></li>
 </ul>
 </li>

Tip: If you want "Dropdown Menu" also has a link, we must put it like this.
<li>
 <a href="#">Drop Down Menu</a>
 <ul>
 <li><a href="#">Submenu 1</a></li>
 <li><a href="#">Submenu2</a></li>
 <li><a href="#">Submenu3</a></li>
 </ul>
 </li>

B) Menu ítems:

<a href="#"> : We must replace the pad (#) by the link we want, remember NOT to erase quotation marks. For example, if we want to put it on the main page, we would create the simple menu: <li><a href="https://writepleasure.blogspot.com.es/">Start</a></li>. The same thing happens with the drop down menus, adding the categories or sections.

Once the changes are made, do not forget to save.

5- Here we are not finished yet, for now we will see it misconfigured. Let's go to the editor again and click on Template:

Click on Customize and then click on Advanced.We scroll and use the last option we have, Add CSS:

And paste the following code:

/*Drop down menu for The pleasure of writing*/
.tabs-inner .widget ul#ybmenud {
 text-align: left;
 display: inline;
 margin: 0;
 padding: 15px 4px 17px 0; /* Padding space of the menu buttons */
 list-style: none;
 border:none;
}
.tabs-inner .widget ul#ybmenud li {
 font-size: 12px/24px; /* Font size of your menu */
 font-family: sans-serif; /* Font of your menu*/
 display: inline-block;
 margin-right: -4px;
 position: relative;
 padding: 12px 20px;
 background: #b8b8b8; /* Background color of your menu */
 float:none;
 cursor: pointer;
 -webkit-transition: all 0.2s;
 -moz-transition: all 0.2s;
 -ms-transition: all 0.2s;
 -o-transition: all 0.2s;
 transition: all 0.2s;
}
.tabs-inner .widget ul#ybmenud li a {
padding:0;
font-family: sans-serif; /* Letter for menu links */
border:0;
}
.tabs-inner .widget ul#ybmenud li:hover {
 background: #94b1b4; /* Background color for when you hover your mouse over the button on the bar */
 color: #fff; /* Color of the letter when passing with the mouse above */
}
.tabs-inner .widget ul#ybmenud li:hover a {
 background: transparent;
 color: #fff; /* Color of the letter when passing with the mouse above */
}
.tabs-inner .widget ul#ybmenud li ul {
 z-index:1000;
 border:none;
 padding: 0;
 position: absolute;
 top: 45px;
 left: 30px;
 float:none;
 width: 150px;
 -webkit-box-shadow: none;
 -moz-box-shadow: none;
 box-shadow: none;
 display: none;
 opacity: 0;
 visibility: hidden;
 -webkit-transiton: opacity 0.2s;
 -moz-transition: opacity 0.2s;
 -ms-transition: opacity 0.2s;
 -o-transition: opacity 0.2s;
 -transition: opacity 0.2s;
}
.tabs-inner .widget ul#ybmenud li ul li {
 background: #94b1b4; /* Background color of the sub-menu tabs */
 display: block;
 color: #fff; /* Color of the letter of the sub-menus */
 text-shadow: 0 -1px 0 #000;
}
ul#ybmenud li ul li a{
 color:#fff /* Color of submenu links */
}
.tabs-inner .widget ul#ybmenud li ul li:hover {
 background: #a9bcbe; /* Background color when you hover over the sub menu */
}
.tabs-inner .widget ul#ybmenud li:hover ul {
 display: block;
 opacity: 1;
 visibility: visible;
}
Once pasted, you can make the changes that you think necessary in terms of colors and letters to adapt it to your blog.


What do you think? Have you tried it? Would you add some more step to facilitate its use? Do not hesitate to leave your comments, we will all be happy to read them.