Black professional Responsive drop down menu for Blogger

Black professional Responsive drop down menu for Blogger

5
data:blog.title
responsive

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.


menu


navigation

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 

<div id='header-wrapper'> or <div id='outer-wrapper'>
------Other Code---------
<!--end header-wrapper-->
  >>Paste the below code here<<

<nav id='BSResponsivemenu'>
<input type='checkbox'/>
<label>&#8801;<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>&#8801;<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 5 Place gadget below header. That’s it.

Customization


  • Replace all # with Label URL
  • change Menu text with Label name

If you feel any problem then feel free to leave a comment below. I will reply you as soon as possible. 
Black professional Responsive drop down menu for Blogger
4 Stars stars - "Black professional Responsive drop down menu for Blogger " Menu is the main function to visit different labels or categories basis posts. It helps visito...

nice post bro . tanx

Thanks for share bloggerspoce..

Welcome Ali. And thanks or dropping your comment

Its really worth able Article thanks for sharing admin :)

Thanks Quang Men...

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *