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.
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:
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:
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.
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.
<div id='menucol'>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
<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>
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>STEP 3: Now let's go a step further and add the CSS style in our Template
<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>
- 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;}
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.
I have tried it but prob is the drop drop menu doesnt come but show side by side. how can i deal with this
ReplyDeletecan i have your blog link in which you have applied the code?
DeleteThis comment has been removed by the author.
Deleteya finally i has Solved my previous problem .....
DeleteNow 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.
DeleteSir thank you for your kind replay ... hear my problem is ....
DeleteHOW 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.
Deletereplay...
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.
Deletewww.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
Deletechange 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.
DeleteFor label reference visit http://blogger-hints-and-tips.blogspot.in/2010/04/categorising-your-posts.html
Deletethank u bro ...... thaks for ur response ... i can work out on it
Deletesame here
DeleteMy blog URL : https://estiakahmedbd.blogspot.com/
DeleteIt does not work out...
same problem what i do ?
Deletehi , 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
ReplyDeleteHi, you have to change your URL Link. You have given incorrect URL Links in the code. Please correct it.
Deletehi 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/
ReplyDeletecheck 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 {
Deletewidth:300px;
}
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.
ReplyDeleteThis is working.Thanks a lot.
ReplyDeleteI want to change the menu color.How can I change this?
ReplyDeleteI already did it, how can I add my post to that menu?
ReplyDeleteBlog: applemoretips.blogspot.com
You can give links of your post in the menu in place of "http://YOUR URL HERE.com"
DeleteI 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?
DeleteSorry but this Menu only supports Labels or any link to your post and it will not show posts in it.
DeleteThanks 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
ReplyDeleteYou have delete the sub menu code of class "submenucol"
DeleteThis is the reason no drop down is there.
thanks bro I was able to figure out the problem. the only challenge left that /* Columns
ReplyDelete----------------------------------------------- */
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.
DeleteHi I just followed the steps. But i dont see any change. Plz help me.
ReplyDeleteYou have done something wrong because you can see that I also used the same code on my blog and it works perfectly.
Deletemm... Any guesses.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThank 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.
ReplyDeleteHi 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/#
ReplyDeletemy demoblog is : http://demoblogerforjava.blogspot.in/
Deleteplz check n advised me
unable to add more than two sub-menu in a menu. Plzz help...
ReplyDeleteCheck that you have properly closed all the tags.
DeleteHello, 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.
ReplyDeleteI 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.
DeleteAlso 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
DeleteHi...
ReplyDeletecould you help me how to add submenu from my blog : 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 www.simplystampingwithnarelle.com Thanks
ReplyDeleteYes
Deletewow it works.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeletesir 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
ReplyDeletesir maine apne jese bataya same vese hi kiya but mere dropdown menu nahi aa ra main kya kru bataiye sir please
ReplyDeleteI was trying to make my blog accordingly. But unfortunately I couldn't do it. Can you help me to solve the problem?
ReplyDeletefollow all the steps correctly. For proof I have also attached the same code on this post also.
Deletehellow, 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
ReplyDeletejust delete all submenu codes from the HTML/Javascript code given in post.
DeleteHey, 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.
ReplyDeletehttps://photos2photography.blogspot.in/
this code is meant for two columns in the drop down list
DeleteThank you.. My problem has been solved..
DeleteThis comment has been removed by the author.
ReplyDeleteHi 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
DeleteI have theme not template.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThank you for share code drop down menu and submenu.
ReplyDeleteThanks 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. :)
ReplyDeleteInteresting Blog. Keep it up.
ReplyDeleteDude, 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 www.Chilloey.com
thanks
How come after all is done, i only see 6 tabs of the 25 tabs i have on my menu
ReplyDeleteYour 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 : www.chilloey.com
ReplyDeletehi i want to add sub menu in first and and 2nd tatile also what should i do
ReplyDeletehi ,, 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?
ReplyDeletethankyou but i need only for one column submenu kindly help, i have tried so many with your code but could not get
ReplyDeleteSir created the menu but I have not been able to create a submenu Please help me..
ReplyDeleteSir created the menu but I have not been able to create a submenu! Please help me..
ReplyDeleteI 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
ReplyDeleteInvalid 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 .
ReplyDeleteAfter 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.
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.
ReplyDeleteKindly help out. Thanks
ReplyDeleteHi 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.
ReplyDeleteFor 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?
ReplyDeleteChange YOUR URL HERE with your website or Blog's URL
DeleteTHANK YOU VERY MUCH FOR BLOGGER HELP
ReplyDeleteNice post. Thank you for sharing.
ReplyDeletemoviebox
moviebox ipa
This comment has been removed by the author.
ReplyDeleteNICE POST ITS REALLY HELPFUL
ReplyDeletewww.sbicustomer-care.co.in
Very Nice blog and Helpful information in above Blog........
ReplyDeleteContact google search not working android For instant Help
For more information, visit Web: https://bit.ly/2lqoMxP
Contact at: +18662354333 , +1 888 509 9555 (Toll-Free)
Address: California, United States
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!
ReplyDeleteشركة شحن عفش من الرياض الي الامارات-دبي
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteAll the contents you mentioned in post is too good and can be very useful. I will keep it in mind, thanks for sharing the information keep updating, looking forward for more posts.Thanks Gmail account recovery
ReplyDelete