How To Create Drop Down Sajian In Blogger

How to Create Drop Down Menu In Blogger | welcome to the TutBig Blogger tutorial today I will show you how to create Drop Down Menu in Blogger blog with pictures or how to create drop down navigation sajian with sub sajian in Blogger.

Tab Menu can categories our Blogger blog posts like we have Html and windows trick post then we create these categories or tabs like:-

Step 1: First we go to Blogger Layout and click Add a Gadget Link.

Step 2: Click the HTML/JavaScript link.

Step 3: Paste the Code in Content area and Click Save button.

<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: 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. Here we paste the CSS Code 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 sajian */
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: #fff; /* background colour of the main sajian */
  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 sajian links */
border:0;
}
.tabs-inner .widget ul#menu_bar li:hover {
  background: #555; /* background colour when you roll over a sajian title */
  color: #fff; /* font colour when you roll over a sajian title */
}
.tabs-inner .widget ul#menu_bar li:hover a {
  background: transparent;
  color: #fff; /* font colour when you roll over a sajian 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 sajian items */
  display: block;
  color: #fff; /* font colour of the sub sajian items */
  text-shadow: 0 -1px 0 #000;
}
ul#menu_bar li ul li a{
  color:#fff  /* link colour of the sub sajian items */
}
.tabs-inner .widget ul#menu_bar li ul li:hover {
  background: #666; /* background colour when you roll over sub sajian items */
}
.tabs-inner .widget ul#menu_bar li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

Step 6: Go to Your Blogger Blog.

Note:- Here we Replace # RED Code with Blog URL. 

Share This :