Black professional Responsive drop down menu for Blogger

Menu is the main function to visit different labels or categories basis posts. It helps visitors to find their desired articles. Though I have shared many menu but this is the trend of responsive. Everything is now designing as responsive thus any widget can adjust with any smart devices. So for this time I am sharing a black professional drop-down responsive menu which will best fit for any devices. It will adjust with any devices. I have made the tutorial so simple that can be install by any blog user. So let�s proceed to the tutorial.

Live Demo

You can install this drop-down responsive menu 2 ways. I am explaining both method one by one below:

Method 1

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Click on Now click on -> Template -> Edit HTML-> Unfold code ?

Step 3 Now Find this code ]]></b:skin> by Pressing Ctrl + F

Step 4 Paste the below code Before/above ]]></b:skin> and Save the templates.

/*Responsive Menu by www.bloggerspice.com */
#BSResponsivemenu{background:#1a1a1a;color:#fefefe;height:35px;}
#BSResponsivemenu ul,#BSResponsivemenu li{margin:0;padding:0;list-style:none}
#BSResponsivemenu ul{height:35px}
#BSResponsivemenu li{float:left;display:inline;position:relative;font:bold 13px Arial;}
#BSResponsivemenu li a{color:#ccc}
#BSResponsivemenu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#fefefe;}
#BSResponsivemenu li:hover > a,#BSResponsivemenu li a:hover{color:#ffffff}
#BSResponsivemenu input{display:none;margin:0 0;padding:0 0;width:80px;height:35px;opacity:0;cursor:pointer}
#BSResponsivemenu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#BSResponsivemenu label span{font-size:13px;position:absolute;left:35px}
#BSResponsivemenu ul.BSResponsivemenus{height:auto;overflow:hidden;width:180px;background:#000000;position:absolute;z-index:99;display:none;border:1px solid #ccc;border-top:none;color:#fefefe}
#BSResponsivemenu ul.BSResponsivemenus a{color:#fefefe}
#BSResponsivemenu ul.BSResponsivemenus li{display:block;width:100%;font:12px Arial;text-transform:none;}
#BSResponsivemenu li:hover ul.BSResponsivemenus{display:block}
#BSResponsivemenu a.prett,#BSResponsivemenu a.trigger2{padding:0 27px 0 14px}
#BSResponsivemenu li:hover > a.prett,#BSResponsivemenu a.prett:hover{background:#000000;color:#fefefe}
#BSResponsivemenu a.prett::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:15px;right:9px}
#BSResponsivemenu ul.BSResponsivemenus a:hover{background:#1a1a1a;}
#BSResponsivemenu a.trigger2::after{content:"";width:0;height:0;border-width:5px 6px;border-style:solid;border-color:transparent transparent transparent #eee ;position:absolute;top:13px;right:9px}
@media screen and (max-width: 768px){
#BSResponsivemenu{position:relative}
#BSResponsivemenu ul{background:#838383;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;}
#BSResponsivemenu ul.BSResponsivemenus{width:100%;position:static;border:none}
#BSResponsivemenu li{display:block;float:none;width:auto;text-align:left}
#BSResponsivemenu li a{color:#000000}
#BSResponsivemenu li a:hover{color:#fefefe}
#BSResponsivemenu li:hover{background:#1a1a1a;color:#fefefe;}
#BSResponsivemenu li:hover > a.prett,#BSResponsivemenu a.prett:hover{background:#1a1a1a;color:#fefefe;}
#BSResponsivemenu ul.BSResponsivemenus a{background:#1a1a1a;}
#BSResponsivemenu ul.BSResponsivemenus a:hover{background:#000000;}
#BSResponsivemenu input,#BSResponsivemenu label{position:absolute;top:0;left:0;display:block}
#BSResponsivemenu input{z-index:4}
#BSResponsivemenu input:checked + label{color:white}
#BSResponsivemenu input:checked ~ ul{display:block}
}

Step 5 Now Find <div id='header-wrapper'> or <div id='outer-wrapper'> by Pressing Ctrl + F

Step 6 Paste the below code after/below

------Other Code---------

>>Paste the below code here<<

<nav id='BSResponsivemenu'>
<input type='checkbox'/>
<label>≡<span>Navigation</span></label>
<ul>
<li><a href='/' title="Home">Home</a></li>
<li><a href='#' title="Menu 1">Menu 1</a></li>
<li><a class='prett' href='#' title="Drop Menu">Drop Menu</a>
<ul class='BSResponsivemenus'>
<li><a href='#' title="Drop Menu1">Drop Menu 1</a></li>
<li><a href='#' title="Drop Menu2">Drop Menu 2</a></li>
<li><a href='#' title="Drop Menu3">Drop Menu 3</a></li>
</ul>
</li>
<li><a href='#' title="Menu 2">Menu 2</a></li>
<li><a class='prett' href='#' title="Drop Menu1">Drop Menu 1</a>
<ul class='BSResponsivemenus'>
<li><a href='#' title="Drop Menu 1">Drop Menu 1</a></li>
<li><a href='#' title="Drop Menu 2">Drop Menu 2</a></li>
<li><a href='#' title="Drop Menu 3">Drop Menu 3</a></li>
</ul>
</li>
</ul>
</nav>

Step 7 and finally Save the templates.

Customization

Replace all # with Label URL
Change Menu text with Label name

Method 2

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Gadget" then select "HTML/JavaScript" Gadget.

Step 4 Now Copy the all code from below and paste it in "HTML/JavaScript" Gadget and save it.

<style>
/*Responsive Menu by www.bloggerspice.com */
#BSResponsivemenu{background:#1a1a1a;color:#fefefe;height:35px;}
#BSResponsivemenu ul,#BSResponsivemenu li{margin:0;padding:0;list-style:none}
#BSResponsivemenu ul{height:35px}
#BSResponsivemenu li{float:left;display:inline;position:relative;font:bold 13px Arial;}
#BSResponsivemenu li a{color:#ccc}
#BSResponsivemenu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#fefefe;}
#BSResponsivemenu li:hover > a,#BSResponsivemenu li a:hover{color:#ffffff}
#BSResponsivemenu input{display:none;margin:0 0;padding:0 0;width:80px;height:35px;opacity:0;cursor:pointer}
#BSResponsivemenu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#BSResponsivemenu label span{font-size:13px;position:absolute;left:35px}
#BSResponsivemenu ul.BSResponsivemenus{height:auto;overflow:hidden;width:180px;background:#000000;position:absolute;z-index:99;display:none;border:1px solid #ccc;border-top:none;color:#fefefe}
#BSResponsivemenu ul.BSResponsivemenus a{color:#fefefe}
#BSResponsivemenu ul.BSResponsivemenus li{display:block;width:100%;font:12px Arial;text-transform:none;}
#BSResponsivemenu li:hover ul.BSResponsivemenus{display:block}
#BSResponsivemenu a.prett,#BSResponsivemenu a.trigger2{padding:0 27px 0 14px}
#BSResponsivemenu li:hover > a.prett,#BSResponsivemenu a.prett:hover{background:#000000;color:#fefefe}
#BSResponsivemenu a.prett::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:15px;right:9px}
#BSResponsivemenu ul.BSResponsivemenus a:hover{background:#1a1a1a;}
#BSResponsivemenu a.trigger2::after{content:"";width:0;height:0;border-width:5px 6px;border-style:solid;border-color:transparent transparent transparent #eee ;position:absolute;top:13px;right:9px}

@media screen and (max-width: 768px){
#BSResponsivemenu{position:relative}
#BSResponsivemenu ul{background:#838383;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;}
#BSResponsivemenu ul.BSResponsivemenus{width:100%;position:static;border:none}
#BSResponsivemenu li{display:block;float:none;width:auto;text-align:left}
#BSResponsivemenu li a{color:#000000}
#BSResponsivemenu li a:hover{color:#fefefe}
#BSResponsivemenu li:hover{background:#1a1a1a;color:#fefefe;}
#BSResponsivemenu li:hover > a.prett,#BSResponsivemenu a.prett:hover{background:#1a1a1a;color:#fefefe;}
#BSResponsivemenu ul.BSResponsivemenus a{background:#1a1a1a;}
#BSResponsivemenu ul.BSResponsivemenus a:hover{background:#000000;}
#BSResponsivemenu input,#BSResponsivemenu label{position:absolute;top:0;left:0;display:block}
#BSResponsivemenu input{z-index:4}
#BSResponsivemenu input:checked + label{color:white}
#BSResponsivemenu input:checked ~ ul{display:block}
}
</style>
<nav id='BSResponsivemenu'>
<input type='checkbox'/>
<label>≡<span>Navigation</span></label>
<ul>
<li><a href='/' title="Home">Home</a></li>
<li><a href='#' title="Menu 1">Menu 1</a></li>
<li><a class='prett' href='#' title="Drop Menu">Drop Menu</a>
<ul class='BSResponsivemenus'>
<li><a href='#' title="Drop Menu1">Drop Menu 1</a></li>
<li><a href='#' title="Drop Menu2">Drop Menu 2</a></li>
<li><a href='#' title="Drop Menu3">Drop Menu 3</a></li>
</ul>
</li>
<li><a href='#' title="Menu 2">Menu 2</a></li>
<li><a class='prett' href='#' title="Drop Menu1">Drop Menu 1</a>
<ul class='BSResponsivemenus'>
<li><a href='#' title="Drop Menu 1">Drop Menu 1</a></li>
<li><a href='#' title="Drop Menu 2">Drop Menu 2</a></li>
<li><a href='#' title="Drop Menu 3">Drop Menu 3</a></li>
</ul>
</li>
</ul>
</nav>