Search & Find

Sponsor Post

Best Telegram Groups List Collection - Updated

Thursday, 16 March 2017

How to create Drop Down Menu in Blogger blog with Pictures

Hello friends welcome to the Techtspot blog, today I will show you how to add or create Drop Down Menu in the Blogger blog with pictures.
create Drop Down Menu in Blogger blog

What is Menu Bar?

The menu tab or Menu bar is a navigation system and is located at the top of the blog and website and mostly menu bar looks in horizontal view but sometimes it is left side in vertical view and using the Menu bar visitors easily visit a particular category and even subcategories.

Why we need to add Drop Down Menu Tabs in the blog?

Why do we need a dropdown menu horizontal and vertical bar because we know most of the time we are managing a blog, website, and eCommerce Store, now we are publishing content in our blog then we need to differentiate the categories then we use a drop-down menu tab and add our labels is the submenu.

Likewise when we are working on our website services pages and we subcategories our services page then we add in the submenu and when we are adding a lot of products in our E-Commerce Store and then we are making a dropdown menu bar because we want to subcategorize our products like every eCommerce website are creating drop-down menu bar, now let's start.

These are the Following Steps:-
Step 1: First go to the Blogger blog dashboard and click the Layout option then go to the header layout and click the Add a Gadget link because we want to add a drop-down menu bar in the header section.
create Drop Down Menu in Blogger blog 1
Step 2: Here we select the HTML/JavaScript option.
create Drop Down Menu in Blogger blog 2
Step 3: Now you add your blog menu and submenu in the code and copy the dropdown menu code then paste it in the Content area and at last, click the Save button.
create Drop Down Menu in Blogger blog 3
Drop Down Menu Code:-
<ul id="menu_bar">
  <li><a href="#">Home</a></li>
  <li><a href="#">Menu 0</a></li>
  <li>
    Menu 1
    <ul>
      <li><a href="#">Sub-menu 1</a></li>
      <li><a href="#">Sub-menu 2</a></li>
      <li><a href="#">Sub-menu 3</a></li>
    </ul>
  </li>
<li>
    Menu 2
    <ul>
      <li><a href="#">Sub-menu 1</a></li>
      <li><a href="#">Sub-menu 2</a></li>
      <li><a href="#">Sub-menu 3</a></li>
    </ul>
  </li>
 <li><a href="#">Menu 3</a></li>
  <li><a href="#">Menu 4</a></li>
</ul>
Step 4: Again here you click the Theme option and click the Customise dropdown button then select the Edit HTML option.
create Drop Down Menu in Blogger blog 4
Step 5: Here you click anywhere in the code and press the Ctrl+F button then find out "]]></b:skin>" code and make some space above the code then paste the dropdown menu bar CSS code and at last you click the Save button.
create Drop Down Menu in Blogger blog 5
Drop Down Menu CSS Code:-
.tabs-inner .widget ul#menu_bar {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
  border:none;
}
.tabs-inner .widget ul#menu_bar li {
  font-size: 12px/18px;
  font-family: sans-serif; /* Font for the menu */
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: #fff; /* background colour of the main 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#menu_bar li a {
padding:0;
font-family: sans-serif; /* Font for the menu links */
border:0;
}
.tabs-inner .widget ul#menu_bar li:hover {
  background: #555; /* background colour when you roll over a menu title */
  color: #fff; /* font colour when you roll over a menu title */
}
.tabs-inner .widget ul#menu_bar li:hover a {
  background: transparent;
  color: #fff; /* font colour when you roll over a menu title link */
}
.tabs-inner .widget ul#menu_bar 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#menu_bar li ul li {
  background: #555; /* background colour of the sub menu items */
  display: block;
  color: #fff; /* font colour of the sub menu items */
  text-shadow: 0 -1px 0 #000;
}
ul#menu_bar li ul li a{
  color:#fff  /* link colour of the sub menu items */
}
.tabs-inner .widget ul#menu_bar li ul li:hover {
  background: #666; /* background colour when you roll over sub menu items */
}
.tabs-inner .widget ul#menu_bar li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}
Step 6: Now open the Blogger blog to check the results.

Now Visit the - Demo Blog to see the result.

Above I give you my demo blog link, where I enabling a dropdown horizontal menu bar, if you are thinking to set up a dropdown horizontal menu bar in your blog then first look at the gadget how it looks like in the demo blog.

52 comments:

  1. Very useful. Good to refresh good tips on the mind!!!

    ReplyDelete
  2. Great... I want see more...

    ReplyDelete
  3. You are right. I have added. It takes no time.

    ReplyDelete
  4. Thanks... works perfect!!!

    ReplyDelete
  5. thanks dude this is work.....

    ReplyDelete
  6. please help me
    how can i post on each sub menu

    ReplyDelete
    Replies
    1. hello sir

      All Sub menus have own LABLE and don't worry. I create a video on this topic with in 2 3 day.

      Delete
  7. Sir how to likn dropdown menu and submenus with my data plz give information about it

    ReplyDelete
    Replies
    1. hello there replace # with your URL and rename the menu 1, 2 like tricks and how to

      Delete
  8. How do I hide the sub menus so the viewer would have to click on the main menu to see the sub menu?

    ReplyDelete
  9. It worked Thank you very much
    uttarakhandadventureguide.com

    ReplyDelete
  10. Hey!thanks a lot.but i want to add 3rd level of deop down can you please help me out.

    ReplyDelete
    Replies
    1. just do this

      < li >
      Menu 1
      < ul >
      < li >Sub-menu 1< /li >
      < li >Sub-menu 2< /li >
      < li >Sub-menu
      < ul >
      < li >< a href="#" >Sub-menu 3< /a >< /li >
      < /ul >
      < /li >
      < /ul >
      < /li >

      thanks for comment :)

      Delete
    2. hey bro thanks for advice.. great post.. but how if i want to add more than 3 in subb menu.. i already copy code

      but its not worked bro.. please help me out

      Delete
  11. Can you please tell me what else to add in css for third level drop down. As after including html i am unable to view third level on right side. 2nd and 3rd levels are overlapping. I m unable to find solution.please help.thanks in advance.

    ReplyDelete
    Replies
    1. hello there can you give me you blog or site url and if you want to add 3rd level drop down html code and CSS code

      Delete
    2. Ofcourse, http://learnaturdesk.blogspot.com is my blog url.

      Delete
  12. In this video you can know How To Create Menu and Dropdown Menu in Blogger. Watch now .. https://goo.gl/SVxVQF ... It help you.

    ReplyDelete
  13. How do I create a sub menu to my sub menu? In other words, it would be s total of 2 dub menus??
    Thanks

    ReplyDelete
  14. how do i create multi level menus? thanks

    ReplyDelete
    Replies
    1. hello i think you should user III rd party templates for multi level menus

      Delete
  15. HI SIR BUT HOW TO ADD MY CONTENT ON THAT SUB MENU PLS HELP ME

    ReplyDelete
    Replies
    1. Hello when you copy my first code and you edit it >>> Remove Menu 4 with Contact Us >>> # tag with URL like:-

      < li >< a href="https://your-site.com/contact.html" > Cpntact Us

      Delete
    2. < li >< a href="https://your-site.com/contact.html" > Contact Us < / a > < / li >

      Delete
  16. Hello :) How to add inside borders so that categories are in separate boxes? Thank you!

    ReplyDelete
  17. hi, it works perfect on my computer but not when viewed on a mobile! please help as ive tried every trick! thanks

    ReplyDelete
    Replies
    1. Hello there The Solution is >>>>
      1. Go to Blogger Theme option and click setting ICON below the Mobile View.
      2. Now here you click the drop down button and select custom option then click save button.

      Delete
  18. pls i don't understand the 6th step. pls what to you mean by blogger blog?

    ReplyDelete
    Replies
    1. Hello sir if you apply these steps on your blog then you must open your blog and check it. (step 6 means) !! It work or not
      Thanks

      Delete
  19. Agg laa dali
    Agg laga dali

    tu mumbai aaega

    ReplyDelete
  20. i dont see add gadget in my cross column layout

    ReplyDelete
    Replies
    1. Hello

      First when you add any gadget on blogger blog then hit save theme button and refresh the page then open the blog

      thanks

      Delete
  21. Very nice , it is working . Thank u so much

    ReplyDelete
  22. visit www.talksaboutanythings.blogspot.com

    ReplyDelete