Sharing Librarian: Create a Horizontal Menu Bar with Sub Menu for Blogger

In this tutorial you will learn how to add a horizontal menu bar with submenu on your blog. Earlier we have used the pages and link list gadgets to create a horizontal menu. But these gadgets do not provide for submenus. Here we will learn how to create a menu using plain HTML and CSS.

Adding A Horizontal Menu With Sub Menus to Blogger

First, let's create the menu using HTML list. We make use the <ul><li> elements to make a list of links for the menu. The basic structure of <ul><li> elements are as follows
<ul>
<li><a href="default.html">Home</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="#">Links</a></li>
</ul>
You can see the <a> HTML tag is used for each <li> tag to provide links to the list item. A "#" can be provided where you don't want an item to be clickable. You can add more links to the list by by copying the line <li>....</li> and changing the link and title for the list item (highlighted in red). These are the menu items. So we have three menu items in the list above. If you need to add submenu to any of the menu items above, you will have to add a list under the menu item. For example, you want to add two submenu items to the Links menu as follows
<ul>
<li><a href="http://cbse.nic.in">CBSE</a></li>
<li><a href="http://ncert.nic.in">NCERT</a></li>
</ul>

We will add the submenu as follows:
<ul>
<li><a href="default.html">Home</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="#">Links</a>
<ul>
<li><a href="http://cbse.nic.in">CBSE</a></li>
<li><a href="http://ncert.nic.in">NCERT</a></li>
</ul>
</li>
</ul>

Note that we just placed the new list just before the closing </li> tag for the menu item. We have given "#" instead the URL, as we do not want the menu to be linked to any website as it has submenu. You can copy and paste the lists and make changes to the menu as required. In the box below you can create your menu by modifying the list items. Remember that when you are deleting an item remove the complete line <li>...</li> , else it will not render properly. Only add menus that can be accommodated in a single line.

Copy the content inside the above box to clipboard.
Now go to blogger and login to your account.
Go to your "Layout" and on the "Page Elements" section:

Click on the "Add a Gadget" link just under your header image (cross-column 1)
From the Gadget's List, select "HTML/JavaScript" option.
Paste the copied HTML code inside the body. Do not provide any title to this gadget
Click on Save

If you view your blog now, you can see the menu bar added to the blog. We will have add some CSS styles to get it working.

#navbar {
width: 100%; /* change the width of the navigation bar */
height: 35px; /* change the height of the navigation bar */
}

#navbartop { 
margin: 0 auto;
padding: 0; 
  width: 100%;  /* Set your width to fit your blog */
}

#navbartop ul { 
  background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
float: none; 
list-style: none; 
margin: 0; 
padding: 0; 
overflow: visible; 
}

#navbartop li a, #navbartop li a:link, #navbartop li a:visited {
color: #000000; /* change color of the main links */
display: block;
margin: 0;
padding: 10px 20px;  /* change the first number for the top/bottom spacing, and the second number for left/right spacing */
}

#navbartop li a:hover, #navbartop li a:active {
color: #FF69B4 ; /* change the color of the links when hovered over */
margin: 0;
padding: 10px 20px; /* make sure these are the same as the section above! */
}

#navbartop li li a, #navbartop li li a:link, #navbartop li li a:visited {
background: #ffffff;  /* change the background color of the drop down box */
width: 150px;
color: #000000; /* change the color of the drop down links */
float: none;
margin: 0;
padding: 7px 10px; /* similar to above, change for the spacing around the links */
}

#navbartop li li a:hover, #navbartop li li a:active {
background: #FF69B4 ; /* change the background color of drop down items on hover */
color: #ffffff; /* change the color of drop down links on hover */
padding: 7px 10px;  /* keep these the same as the above section */
}

#navbartop li {
float: none; 
display: inline-block; 
list-style: none; 
margin: 0; 
padding: 0; 
}

#navbartop li ul { 
z-index: 9999; 
position: absolute; 
left: -999em; 
height: auto; 
width: 150px; 
margin: 0;
padding: 0;
}

#navbartop li:hover ul, #navbartop li li:hover ul, #navbartop li li li:hover ul, #navbartop li.sfhover ul, #navbartop li li.sfhover ul, #navbartop li li li.sfhover ul { 
left: auto; 
}

Copy the complete CSS style text from the box above.

In Blogger, click on Theme and then click Customise button.
Click on Advanced tab on the left and then click on Add CSS option at the bottom
Paste the copied CSS Style inside the box.
Click on Apply to Blog

Now view the blog to see the menu working.
You can change the color of the background, link text, hover effects etc by making changes to the CSS Style. I have created a CSS Maker for your convenience where you can select the colors for your menu and the generated CSS Style can be copied and pasted to get the desired effect.
Click here for the CSS Maker (The CSS Maker is only useful for this menu)

Sharing Librarian

Saturday, 9 May 2020

Create a Horizontal Menu Bar with Sub Menu for Blogger

Adding A Horizontal Menu With Sub Menus to Blogger

1 comment: