How to create drop down navigation menu with submenu in blogger? - The WonderSpot - Know all in one spot
Breaking News:
Loading...

How to create drop down navigation menu with submenu in blogger?

How to add drop down navigation menu with sub menu for blogger  

Are you looking for how to create drop down menu in blogger?
When we are blogging we want to use attractive menu feature to make a better navigation for our readers about our blog site. Already you know that like the WordPress or other blog platforms blogger blog hasn’t any easy widgets or easy method like others to add a menu bar for blogger. But by using page widget we can create a menu bar for some far. But that is not enough. To create a advanced menu bar we want to use HTML code as well as the CSS codes.so today lets see how to add attractive menu bar with sub menu for blogger easily.

How to create drop down navigation menu with submenu in blogger?
This is a very nice menu bar with sub tabs. It is also made with HTML codes & CSS, without using any scripts.
So today we discuss about how to create drop down navigation menu with sub menu in Blogger.



Let’s follow the below step by step.

Step 1: First sign up into your blogger site and go to Blogger Layout .-->>  Add a Gadget Link.

Step 2: Click the HTML/JavaScript link.

Step 3: Paste the Code in Content area and Click Save button. First of all you need to customized that menu bars &  menu links.
            
 So open HTML/JavaScript widget & paste below codes.Then do customized as below the table.

<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>
Replace your menu as well as the sub menu bars names with Blue color menu & sub-menu bars as you wish. (Home, Tech, windows 10)
Replace #RED code with Blog URLs.  (It is recommending to use labels URLs like, https://name.blogspot.com/search/label/label name)


How to Create Drop Down Menu In Blogger?

  
 After that click on the save button.

Step 4: Now Click Blogger Theme link and click the Customise button.

Step 5: Click the Advanced Link and scroll Down links then Click Add CSS link. Then copy & paste the CSS Code in below table and click Apply to Blog button.

.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: Go to the Blogger Blog & view your blog site.

Finally, you have a very nice menu bar with attractive sub tabs. That is made with only using HTML codes & CSS style sheet, without using any scripts.

Ok. Then you have a better idea about how to create drop down menu in blogspot.




Thank you for reading - How to add drop down navigation menu with submenu in blogger?


For more reading THEWONDERSPOT



How to take screenshots in windows 10 : Different Methods?................>>

How to make your blog SEO friendly?..............>>>

All in one SEO pack for Blogger blog..................>>>

Thank you for reading - How to create drop down navigation menu with submenu in blogger?
Good Luck.

Don’t forgot to Subscribe us to get latest news letters and give your feedback in below comment section ;-) ;-)

Post a Comment

0 Comments