All You Need To Know About Earning First $100 from Google Adsense Visit Post

How to Create Menu with Sub-menu For Blogger Without Any Scripts

Posted By : Satyendra Maurya | Last Update : 3:39 PM | Category : | |
This is a very nice horizontal menu in which its sub-tabs are displayed in two columns and is also made with CSS, without any scripts.
blogger navigation menu, css menu, drop-down menu
The "advantage" so to speak, is that the sub-tabs when arranged in two columns are not very long, so it will be neat and less space along. You can see an example here:


Adding A Horizontal Menu With Sub Tabs in Two Columns To Blogger

STEP 1: In Blogger, go to your "Layout" and on the "Page Elements" section.
  • Click on the "Add a Gadget" link just under your header image
  • From the Gadget's List, select "HTML/JavaScript" option.
STEP 2: Simply copy and paste this ENTIRE code into your widget. Note: Leave the "Title" section of this widget blank.

<div id='menucol'>
<div id='topwrapper'>
<ul id='top'>
<li><a href='http://YOUR URL HERE.com'>Tab 1 Title Here</a></li>
<li><a href='http://YOUR URL HERE.com'>Tab 2 Title Here</a></li>
<li><a class='submenucol' href='#'>Tab 3 Title Here</a>
<ul>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.1</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.2</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.3</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.4</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.5</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.6</a></li>
</ul>
</li>
<li><a class='submenucol' href='#'>Tab 4 Title Here</a>
<ul>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.1</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.2</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.3</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.4</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.5</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.6</a></li>
</ul>
</li>
<li><a class='submenucol' href='#'>Tab 5 Title Here</a>
<ul>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.1</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.2</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.3</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.4</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.5</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.6</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.7</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.8</a></li>
</ul>
</li>
<li><a href='http://YOUR URL HERE.com'>Tab 6 Title Here</a></li>

</ul>
<br class='clearit'/>
</div>
</div>
Customize your main tabs by changing the Tab Titles to whatever you want. Include a URL for each one if you want it to be 'clickable'. If not, you can just put a # sign where it says http://YOUR URL HERE.com

You can add or delete as many of the main tabs as you need, just make sure to copy the entire code for the main tab for each additional tab you want:

<li><a href='http://YOUR URL HERE.com'>Tab 7 Title Here</a>
<ul>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 7.1</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 7.2</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 7.3</a></li>
</ul>
</li>
STEP 3: Now let's go a step further and add the CSS style in our Template
  • Go to Template > Edit HTML
  • Click on the sideways arrow next to <b:skin>...</b:skin> 

  • Then click anywhere inside the code area and search - using CTRL + F keys - for the ]]></b:skin> tag and just above ]]></b:skin> add this code:
/* Horizontal menu with 2 columns
----------------------------------------------- */
#menucol {
width:940px;
height:37px;
background-image: -moz-linear-gradient(top, #666666, #000000);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #666666), color-stop(1.0, #000000));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#666666,endColorStr=#000000);
border-bottom:1px solid #666666;
border-top:1px solid #666666;
margin:0 auto;padding:0 auto;
overflow:hidden;
}
#topwrapper {
width:940px;
height:40px;
margin:0 auto;
padding:0 auto;
}
.clearit {
clear: both;
height: 0;
line-height: 0.0;
font-size: 0;
}
#top {
width:100%;
}
#top, #top ul {
padding: 0;
margin: 0;
list-style: none;
}
#top a {
border-right:1px solid #333333;
text-align:left;
display: block;
text-decoration: none;
padding:10px 12px 11px;
font:bold 14px Arial;
text-transform:none;
color:#eee;
}
#top a:hover {
background:#000000;
color:#F6F6F6;
}
#top a.submenucol {
background-image: url(http://3.bp.blogspot.com/-TkveEnZCoIw/Uat7PEv8kBI/AAAAAAAADsY/iqVPPTJzvUs/s1600/arrow_white.gif);
background-repeat: no-repeat;
padding: 10px 24px 11px 12px;
background-position: right center;
}
#top li {
float: left;
position: relative;
}
#top li {
position: static !important;
width: auto;
}
#top li ul, #top ul li {
width:300px;
}
#top ul li a {
text-align:left;
padding: 6px 15px;
font-size:13px;
font-weight:normal;
text-transform:none;
font-family:Arial, sans-serif;
border:none;
}
#top li ul {
z-index:100;
position: absolute;
display: none;
background-color:#F1F1F1;
margin-left:-80px;
padding:10px 0;
border-radius: 0px 0px 6px 6px;
box-shadow:0 2px 2px rgba(0,0,0,0.6);
filter:alpha(opacity=87);
opacity:.87;
}
#top li ul li {
width:150px;
float:left;
margin:0;
padding:0;
}
#top li:hover ul, #top li.hvr ul {
display: block;
}
#top li:hover ul a, #top li.hvr ul a {
color:#333;
background-color:transparent;
text-decoration:none;
}
#top ul a:hover {
text-decoration:underline!important;
color:#444444 !important;
}
#crosscol ul {z-index: 200; padding:0 !important;}
#crosscol li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
.tabs-outer {z-index:1;}
.tabs-inner {padding: 0 0px;}

If you want to change color of the background of the tabs then go to Blogger Dashboard > Template > Customize > Advanced > Tabs Background > From there change it to your desired color.

STEP 4: The final step is to Save the Template and you are done!
Hope you had not met with any problem...if any comment below.

47 comments:

  1. I have tried it but prob is the drop drop menu doesnt come but show side by side. how can i deal with this

    ReplyDelete
    Replies
    1. can i have your blog link in which you have applied the code?

      Delete
    2. This comment has been removed by the author.

      Delete
    3. ya finally i has Solved my previous problem .....
      Now a new. My question is "How can i add posts to one of the page in drop down menu"
      So please kindly Replay me. As soon as possible....???
      Tq

      Delete
    4. Search for http://YOUR URL HERE.com and change it with your URLs in the sub part.

      Delete
    5. Sir thank you for your kind replay ... hear my problem is ....
      HOW TO ADD SOME POSTS TO THE 'SUB TAB 3.5' PAGE"
      {I HAS CREATED PAGES TO ALL SUB TABS NOW I WANT TO ADD POSTS UNDER THAT SUB TABS}
      SO PLEASE REPLAY ME ..... THANK YOU IN ADVANCE

      Delete
    6. EX:- In your blog "TECHNOGEEKZONE" you has a tab "BLOGGING ZONE" under that tab their are lot of sub tabs like "Articals to read, Make money & Tips and seo" so how can i add posts to "Tips and Seo" tab.
      replay...
      THANKU ADVANCE

      Delete
    7. May I have your blog URL? only then I can suggest you some changes. Otherwise you can change the name in "Tab 3 Title Here" to "Tips and SEO" then add the URL under 'SUB TAB 3.1' and rename it.

      Delete
    8. www.googletechno.com is my blog url. I am willing to add posts to whatsapp tab which is present in social networks tab in my blog

      Delete
    9. change your url of whatsapp tab to http://www.googletechno.com/search/label/Whatsapp?max-results=10 and go to your post and add label of Whatsapp to it and then opening the link will display all posts labelled Whatsapp. just like in my blog when you will click on Articles2Read then all post with label Articles2Read will be displayed. Labels are case-sensitive use the same spelling in url which you used in post. if any problem then I will be adding a new post on blog about how you can categories in blogger using labels.

      Delete
    10. For label reference visit http://blogger-hints-and-tips.blogspot.in/2010/04/categorising-your-posts.html

      Delete
    11. thank u bro ...... thaks for ur response ... i can work out on it

      Delete
  2. hi , I have used above code ,tabs and sub menus are there but upon clicking them the page does not opens ... it ask for login to blogger account . could you help with this .. Blog address: atshealth4u.blogspot.in

    ReplyDelete
    Replies
    1. Hi, you have to change your URL Link. You have given incorrect URL Links in the code. Please correct it.

      Delete
  3. hi Can you help with how to increase the width of menu bar since if I am adding new submenu it is not shown in the menubar. my site is http://atshealth4u.blogspot.com/

    ReplyDelete
    Replies
    1. check whether you have added the new submenu in correct tag. and if you want to increase the width of submenu then change the width in this code in this code in you html #top li ul, #top ul li {
      width:300px;
      }

      Delete
  4. Also let know how to increase the width on both side left as well as right keeping whole menu bar in centre position of blog.

    ReplyDelete
  5. This is working.Thanks a lot.

    ReplyDelete
  6. I want to change the menu color.How can I change this?

    ReplyDelete
  7. I already did it, how can I add my post to that menu?
    Blog: applemoretips.blogspot.com

    ReplyDelete
    Replies
    1. You can give links of your post in the menu in place of "http://YOUR URL HERE.com"

      Delete
    2. I mean that I already have the Menu, but I don't have post in the Menu, I want to put some post in the menu, how can I do?

      Delete
    3. Sorry but this Menu only supports Labels or any link to your post and it will not show posts in it.

      Delete
  8. Thanks Man. But I encountered a problem. The sub-menus are not dropping as I positioned my cursor over the main menu. It's a new music blog. website=> www.mbnigeria.blogspot.com

    ReplyDelete
    Replies
    1. You have delete the sub menu code of class "submenucol"
      This is the reason no drop down is there.

      Delete
  9. thanks bro I was able to figure out the problem. the only challenge left that /* Columns
    ----------------------------------------------- */
    is missing. i was careful enough not to tamper with any of the code lines. Please help.

    ReplyDelete
    Replies
    1. Post is now updated! check it again. Those extra code has been merged.

      Delete
  10. Hi I just followed the steps. But i dont see any change. Plz help me.

    ReplyDelete
    Replies
    1. You have done something wrong because you can see that I also used the same code on my blog and it works perfectly.

      Delete
  11. This comment has been removed by the author.

    ReplyDelete
  12. Thank for the tip but doesn't work in my blog. I want to have a sub menus, can you help me to correct the code. You can see my blog HERE. Thank you in advance.

    ReplyDelete
  13. Hi i copied your code as given. nothing i changed.. but still sub menu are not being showed.. can you advise me.. what i have to do change i my block https://programminglogic4u.blogspot.in/#

    ReplyDelete
    Replies
    1. my demoblog is : http://demoblogerforjava.blogspot.in/
      plz check n advised me

      Delete
  14. unable to add more than two sub-menu in a menu. Plzz help...

    ReplyDelete
    Replies
    1. Check that you have properly closed all the tags.

      Delete
  15. Hello, I've tried your code here and was having some trouble. With my first template being one of the "Watermark" selections, the menu did drop down but it only displayed one or two rows. I then changed my template to one of the "Awesome Inc." selections and it didn't drop down at all. I made a final template change to one of the templates under "Simple" and it works perfectly.

    I think this menu and possibly any drop down css menu will only work on the "Simple" templates.

    ReplyDelete
    Replies
    1. Agh.. I can't edit it. I should note that with every template change I DID add the css code again as switching templates removes it.

      Delete
    2. Also wanted to add that if you don't move your mouse down fast enough to catch the link that tiny little 1px space between the main menu and the drop down part is enough to make the submenu disappear.. I fixed it by adding margin-top: -1px; to the #top li ul { } section. :3

      Delete
  16. Hi...
    could you help me how to add submenu from my blog : www.albertacollections.blogspot.com, your help will mean alot to me, thank s

    ReplyDelete
  17. I have added the code and all works brilliantly. But I seem to have an extra box to the right of the menu that I can't seem to get rid of. My site is www.simplystampingwithnarelle.com Thanks

    ReplyDelete
  18. This comment has been removed by the author.

    ReplyDelete
  19. This comment has been removed by the author.

    ReplyDelete
  20. sir the menu bar is working properly and submenu bar also but submenu bar is single Horizontal and when i paste the codes on the place the codes are not working

    ReplyDelete
  21. sir maine apne jese bataya same vese hi kiya but mere dropdown menu nahi aa ra main kya kru bataiye sir please

    ReplyDelete

Although every comment is appreciated, Keep in mind that any link or keyword in the comments may be the reason for deletion of your comment. Thanks for understanding!

#Techno Geek Network

#Proudly Hosted on Blogger


DMCA.com Protection Status

©2014-2016 Techno Geek Network | Technology and Science is What You Make It! | Designed by Satyendra