How To Create Drop Down Menu In Blogger | Tutor Pratik
In this video we will learn how to create drop down menu in blogger. We can create menu and submenu as drop down menu in blogger very easily using new blogger themes, but while we are using blogger default inbuilt template themes it does not support underscore menu system for creating drop down menu in blogger. So here today i bring you a special code that can activate underscore menu system on bloggers default normal themes. You can learn how to install free professional new blogger themes and how to create menu and submenu in blogger from our previous video: https://youtu.be/BmOhdZfvK6M But if your blogger theme not supporting underscore menu system or using bloggers normal theme, so you are searching for how to create drop down menu in blogger that make support underscore menu system on your using blogger theme either its normal default theme, then congrats ! you are in the right video. Here today i bring script codes that you have to add into your current theme codes, which activates underscore menu system into your theme. To download Script Code: http://shorturl.at/rtDG9 By this video you will not only learn how to create drop down menu in blogger, you can also able to learn how to install Underscore Menu System into your blogger themes. Then you can easily create and edit your custom blogger navigation bar. For now our code supports up to second level submenu system. If you want third level and more underscore menu system please do comment and we will update for you to create drop down menu in blogger. #DropDown #Menu #Blogger
First Code: jQuery Link
==========================================
<!-- Start of First Code -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- End of First Code -->
Second Code: CSS codes
=========================================
/******************************** Start of Tutor-Pratik Second Code **********************/
/*****************************************************************
Adding Underscore Feature - The Most Advanced Menu Widget In Blogger
Used for Creating Menu Submenu Generation on Blogger
Code By: Pratik Dangol
Subscribe: https://youtube.com/tutorpratik
Like: https://facebook.com/tutorpratik
Follow: https://instagram/tutorpratik
******************************************************************/
.nav-menu ul li{
display:inline;
margin: 0;
padding: 0;
}
.nav-menu li{
display: block;
float: left;
position: relative;
}
.nav-menu ul li ul{
visibility: hidden;
opacity: 0;
position: absolute;
display: none;
left: 15px;
padding: 0;
}
.nav-menu li:hover > ul,
.nav-menu ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
.nav-menu ul li ul li {
clear: both;
width: 100%;
}
.nav-menu li ul {
z-index: 9999;
}
.nav-menu li ul a {
width: 140px;
}
/******************************** End of Tutor-Pratik Second Code **********************/
Third Code: Script Codes
=========================================
<!-- Start of Third Code Navigation Menu By Tutor Pratik -->
<div class='navi-menu'>
<b:section class='nav-menu row' id='Navigation Menu' maxwidgets='2' name='Navigation Menu By Tutor Pratik' showaddelement='no'>
<b:widget id='LinkList100' locked='true' title='' type='LinkList' version='1' visible='true'>
<b:includable id='main'>
<div class='widget-content'>
<ul id='nav' itemscope='' itemtype='http://schema.org/SiteNavigationElement'>
<b:loop values='data:links' var='link'>
<li itemprop='name'><a expr:href='data:link.target' itemprop='url'><data:link.name/></a></li>
</b:loop>
</ul>
<script type='text/javascript'>
//<![CDATA[
$("#LinkList100").each(function(){var e="<ul id='nav'><li><ul id='sub-menu'>";$("#LinkList100 li").each(function(){var t=$(this).text(),n=t.substr(0,1),r=t.substr(1);"_"==n?(n=$(this).find("a").attr("href"),e+='<li><a href="'+n+'">'+r+"</a></li>"):(n=$(this).find("a").attr("href"),e+='</ul></li><li><a href="'+n+'">'+t+"</a><ul id='sub-menu'>")});e+="</ul></li></ul>";$(this).html(e);$("#LinkList100 ul").each(function(){var e=$(this);if(e.html().replace(/\s| /g,"").length==0)e.remove()});$("#LinkList100 li").each(function(){var e=$(this);if(e.html().replace(/\s| /g,"").length==0)e.remove()})});
//]]>
</script>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
<div style='clear: both;'/>
<!-- End of Third Code Navigation Menu By Tutor Pratik -->
Comments
Post a Comment