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.
Hope you had not met with any problem…if any comment below.
I have tried it but prob is the drop drop menu doesnt come but show side by side. how can i deal with this
can i have your blog link in which you have applied the code?
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
Hi, you have to change your URL Link. You have given incorrect URL Links in the code. Please correct it.
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/
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.
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;
}
This is working.Thanks a lot.
I want to change the menu color.How can I change this?
I already did it, how can I add my post to that menu?
Blog: applemoretips.blogspot.com
You can give links of your post in the menu in place of "http://YOUR URL HERE.com"
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?
Sorry but this Menu only supports Labels or any link to your post and it will not show posts in it.
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
Search for http://YOUR URL HERE.com and change it with your URLs in the sub part.
This comment has been removed by the author.
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
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
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.
http://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
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.
For label reference visit http://blogger-hints-and-tips.blogspot.in/2010/04/categorising-your-posts.html
thank u bro …… thaks for ur response … i can work out on it
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=> http://www.mbnigeria.blogspot.com
You have delete the sub menu code of class "submenucol"
This is the reason no drop down is there.
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.
Post is now updated! check it again. Those extra code has been merged.
Hi I just followed the steps. But i dont see any change. Plz help me.
You have done something wrong because you can see that I also used the same code on my blog and it works perfectly.
mm… Any guesses.
This comment has been removed by the author.
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.
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/#
my demoblog is : http://demoblogerforjava.blogspot.in/
plz check n advised me
unable to add more than two sub-menu in a menu. Plzz help…
Check that you have properly closed all the tags.
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.
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.
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
Hi…
could you help me how to add submenu from my blog : http://www.albertacollections.blogspot.com, your help will mean alot to me, thank s
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 http://www.simplystampingwithnarelle.com Thanks
Yes
wow it works.
This comment has been removed by the author.
This comment has been removed by the author.
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
sir maine apne jese bataya same vese hi kiya but mere dropdown menu nahi aa ra main kya kru bataiye sir please
I was trying to make my blog accordingly. But unfortunately I couldn't do it. Can you help me to solve the problem?
follow all the steps correctly. For proof I have also attached the same code on this post also.
hellow, can you tell me on how to hide those submenus? i see that all showing up over there. just check my Blog https://royalfashiontz.blogspot.com
same here
Hey, I've used these, but it shows in two columns in the drop-down list. Check this blog, where I've used this for testing.
https://photos2photography.blogspot.in/
just delete all submenu codes from the HTML/Javascript code given in post.
this code is meant for two columns in the drop down list
Thank you.. My problem has been solved..
My blog URL : https://estiakahmedbd.blogspot.com/
It does not work out…
I have theme not template.
This comment has been removed by the author.
Hi using the code provided i was able to create drop down menu. But problem is with the selection of subtabs i am unable to see all the content with that labels on my blog when i am selecting a particular subtab. Could you help me with this
Thank you for share code drop down menu and submenu.
This comment has been removed by the author.
This comment has been removed by the author.
Thanks for the tutorial, its very useful. I just made new blog using your code and its perfect. Just need few adjustment to fit my needs. Looking forward for other tutorial from you. 🙂
Interesting Blog. Keep it up.
Dude, would you like to tell me how i can create Submenu and again another one inside submenu. Any help would be appriciated. I need it for http://www.Chilloey.com
thanks
How come after all is done, i only see 6 tabs of the 25 tabs i have on my menu
Your programe and CSS code are great but i made all these tabs and only a row of them show?
Can you please check this menu is perfect or need some corrects : http://www.chilloey.com
hi i want to add sub menu in first and and 2nd tatile also what should i do
hi ,, i followed your code.. it is working fine in desktop. i can see all the menu tab there but not in phone .. only 3 tabs i can see in phone.. why so?
thankyou but i need only for one column submenu kindly help, i have tried so many with your code but could not get
Sir created the menu but I have not been able to create a submenu! Please help me..
Sir created the menu but I have not been able to create a submenu Please help me..
I add first code by few edits (as required to my blog ) and then save gadget without "title" then I paste given 2nd code in html section of theme(template) as you instructed and also save theme and click to view blog but my blog look was remain same. Then I check HTML gadget in layout. I click to edit gadget but here I getting following error
Invalid widget: HTML4
Error 400
I was face this issue. I have done big R & D on this . I watched all YouTube videos related to adding sub menu also I googled for it. but there is no any tool .
After this I have notice that ,
1) The bloggers who are saying in their videos to use various trick to add submenu to blogsite, they can not work, cause the template they are using is not from blogger . They are using third party template like – wix & others.
so this idea will not work to general blogs whose are using blogger template (theme) cause blogger has update their version.
2) Few bloggers given trick to use underscore _ in the starting of page name
while adding page . They are saying , if you use _ before page name, then it will be add under previous menu.
I tried this trick too but as I said blogger has update their version so also this trick is not working . Now current version showing this underscored page name in main menu list
So all after this i find a solution which is not 100% helpful to me but it is working.
Go to your blogger
1.Click on: Theme
2. Click on: Edit HTML
3. click anywhere in HTML code and press Ctl+F
4.In search box type: Cross-Column 2
5. you can found word: Cross-column 2
after this word you can see another word: showaddelement='no'/>
in this just delete to: no
and add to: yes
after this your code will look like: showaddelement='yes'/>
6 save your theme.
Now you need to do some work about your menu & sub menu list
cause now you have two menu bar
i suggest you to add main menu on 1st bar which is already you have
maybe you already added your menus by using page gadget. but in 2nd bar I suggest you to use labels.
now you need to decide which labels should be use in first and second bar
hope this is helpful to you.
same problem what i do ?
Hi, I did as you directed in your post but on my blog the menu explained above shows as a long list in my header area instead of having the look of a menu bar and it looks strange that way.
Kindly help out. Thanks
Hi Team, I am new to blogger and need your help. On my blog I need to create index on right side and create sub Indexes.
For example of we make a index on right side from 1 to 10 then if we hower cursor to 1 then it will show Subindexes from A to etc.
Also need to know how to link pages to Subindexes.
what is add here do you mean http://YOUR URL HERE.com?
Change YOUR URL HERE with your website or Blog's URL
THANK YOU VERY MUCH FOR BLOGGER HELP
This comment has been removed by the author.
NICE POST ITS REALLY HELPFUL
http://www.sbicustomer-care.co.in
This was SO helpful! Thank you for just donating the code to us (So nice not having to write it) I tried watching multiple tutorials and none of them really address the drop down, they just show how to add tabs at the top. This was clear and easy to execute! Thank you thank you!
This comment has been removed by the author.
NICE ONE
I have all the commands and getting the proper submenu blog. But when I change my theme and tried all the commands again, I am getting the vertical menu – not proper horizontal menu. Pl. guide me.
hii..can i know how to change the menu colour and the font ?
it doesnt work
I am trying to making menu but code doesnt working
Thank you so much!