Drop down menu is the first section of your blog/website used to navigate to different pages in your blog. Unfortunately, most blogs at Blogger.com do not have this handy feature. The main problem is that the Blogger does not include the Gadget for drop down menus and most bloggers do not have the programming skills to work with HTML, CSS. All the bloggers are using the default menu available in blogger, but blogger does not have a multi level drop down.
If you want to add multi level drop down menu to your blog, then you have reached the right post.
In this post, I will explain with my sample code, to add multi level drop down menu to your blog on Blogger. Knowledge of HTML, CSS is required to understand the code. You can directly copy and use the code.
If you have the basics of HTML, CSS, you can create some stunning multi level drop down menu to your blog on Blogger as like in my blog.
Follow the below steps and use my sample code to create multi level dropdown menu in your blog
1. Log in to your Blogger
2. Click the "Layout" section of the dashboard:
3. Click "Add a Gadget" from Layout
4. Add "HTML/JavaScriptAdd"
Using this Gadget you can add third-party functionality or other code to your blog.
5. Add the HTML/CSS code
Place a meaningful title as "dropdown Menu" and write your custom HTML/CSS code to generate dropdown and then click Save.
Note: If you are familiar with HTML/CSS then you can create various stunning dropdown using this gadget.
Here I have attached my sample HTML/CSS code to create dropdown, you could make use of this.
Below is my own HTML/CSS code to produce multi level drop down menu
<![CDATA[
<style type="text/css">
.dropdown-section1{
border-radius:3px;
width:80%;margin:0 auto;
background:#607d8b;
height:38px;
-webkit-box-shadow: 0 3px 4px 0 rgba(50,50,50,.6);
-moz-box-shadow: 0 3px 4px 0 rgba(50,50,50,.6);
box-shadow: 0 3px 4px 0 rgba(50,50,50,.6);
}
.dropdown-section1 .menu li a {
color:#fff;
font-weight:bold;
text-decoration:none;
}
.dropdown-section1 .menu li {
list-style: none;
float: left;
padding: 10px;
background:#607d8b;
}
.dropdown-section1 .menu li:last-child{
border-right:none !important;
}
.dropdown-section1 .menu .sub-menu li{
float: none;
margin-bottom:0px;
padding: 10px;
}
.dropdown-section1 .sub-menu {
display: none;
position: absolute;
z-index: 100;
/* width:100px; */
margin-left: -50px !important;
margin-top: 10px !important;
}
.dropdown-section1 .menu li:hover > .sub-menu {
display: block;
}
.dropdown-section1 .menu li:hover {
background:#94c018;
}
.dropdown-section1 .menu > li {
border-right:1px solid #ccc;
}
.dropdown-section1 .place-right{
left: 206px;
top: 30px;
}
.tabs-inner .widget li a {
padding:none !important;
font:none !important;
}
</style>
<div class="dropdown-section1">
<ul class="menu">
<li><a href="https://manimuthupandi.blogspot.com/" title="Home">Home</a></li>
<li><a href="https://manimuthupandi.blogspot.com/" title="Category">Coose Niche</a></li>
<li><a href="https://manimuthupandi.blogspot.com/" title="Category">Create Blog</a></li>
<li><a href="https://manimuthupandi.blogspot.com/" title="Category">Moniter Blog</a></li>
<li><a href="https://manimuthupandi.blogspot.com/" title="Category">DropDown</a>
<ul class="sub-menu">
<li><a href="https://manimuthupandi.blogspot.com/2020/08/create-breadcrumbs-in-blogger.html">Create Breadcrumb</a></li>
<li><a href="https://manimuthupandi.blogspot.com/2020/08/backup-and-restore-blogger-template.html">Create Backup</a>
<!--ul class="sub-menu place-right">
<li><a href="https://manimuthupandi.blogspot.com/">String</a></li>
<li><a href="https://manimuthupandi.blogspot.com/">Array</a></li>
<li><a href="https://manimuthupandi.blogspot.com/">Match</a></li>
</ul-->
</li>
<li><a href="https://manimuthupandi.blogspot.com/2020/08/backup-and-restore-blogger-template.html">Contact Me</a>
</ul>
</li>
<li><a href="https://manimuthupandi.blogspot.com/p/about-me.html" title="About Me">Blogger</a></li>
<li><a href="https://manimuthupandi.blogspot.com/" title="Contact Me">Reach Me</a></li>
</ul>
</div>
]]>
Output:
Just copy and paste the above code into your blog and change the menu names, it will work. In my blog I have created the multi level drop down menu using this way. If you have any question/suggestion, feel free to comment below.
Happy blogging..!
Really I need help on my default blogger theme.my site is www.myhospitall.org
ReplyDeleteYou can copy the source code given above. This source code will give you the drop down menu
ReplyDeleteReally cool code, and so much simpler than everything else I've seen out there. Is there any way to add a sub-menu to a menu?
ReplyDeleteYes, you can create N number of submenus.
DeleteJust create an ul li inside an li element and write css as I did (.menu2)
thanks for the nice script.. one question.... how can i add another submenu using your script?
ReplyDeleteexample:- Category(1) > String(2) > Hello World(3) > End SubMenu(4)
Thanks in advance :)
Just create an ul li inside an li element and write css
DeleteHello, I do successfully with your code, thank you so much... but I have a small problem: the bar drop menu does not span the whole page, it's in the right corner - the sidebar where I added the code. Please show me how to do it span. Thank you
ReplyDeleteHi,
DeleteI could not see the drop down menu in your blog. Seems you have used the side bar menu
My blog is www.wvui.blogspot.com, please come and see
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteNice Articles.
ReplyDeleteAlso Refer below Articles.
Top 20 SSIS Interview Questions with detailed answers
Top 15 Power BI interview Questions with detailed Answers
Thank You So Much... You're a Geek!
ReplyDeletePlease check out this website to resize, crop, rotate, flip and to create gif images.
ReplyDeletehttps://www.resizeimagepixel.com/
Nice code thanks. My problem is when viewing on mobile. When you click on dropdown button to view the sub-menu you are automatically redirected to a url. Is there anyway to remove the redirection without effecting functionality?
ReplyDelete