Oct 28, 2015

Add Responsive Dropdown Menu to Blogger With Social Icons

data:blog.title
Wanna Create Responsive Drop Down  Menu Bar For Blogger Blog and wondering How To Add Responsive Dropdown Menu In Blogger With Social Icons? Guys, 'Don't Worry' Today we are here with a good looking responsive dropdown menu bar for your blogger blog.

create responsive dropdown menu bar for blogger

In a previous tutorial I have shared a responsive menu bar with you you can say that version 1 and this was version 2, after that our some followers request me that share more responsive menu bars for blogger blog. After the request of these friends, today I bring a another responsive menu which is drop down and we are going to add in a blogger blog.

I am pretty sure that every blogger using blogger.com platform is asking for this feature, I have read it everywhere inside blogger's official page in Google+ social network. If you want your navigation bar to have a drop-down menu then you must exchange it with a whole new custom one.


Check Live Demo Here

What Is Responsive Dropdown Menu Bar?

Actually a responsive menu is a bar which adjusting with screen width, if a visitor visit your blog through desktop, then it looks like a traditional menu bar, but when someone access to your blog through a smart phone or tablet then it looks as a mobile application. In these the using of smart phones and tablets increasing day by day. You would be noticed that many visitors are accessing to your blog through mobile phones. So this utmost necessary to make your blog mobile friendly.


How to add responsive navigation menu bar in blogger 

This is not an uphill task to add this menu in your blog, follow the instructions.
1. Login your blogger account and select a blog which you want to add this menu.
2. Select template >> edit HTML.
3. After opening your template all coding, search this tag -  ]]></b:skin>  and paste below codes just above of this tag.

/* MBG CSS Responsive Menu */
#menutop{height:50px;background:#333;max-width:1000px;margin:0 auto;}
#menutop ul,#menutop li{margin:0;padding:0;list-style:none;}
#menutop ul{height:50px;max-width:1000px;margin:0 auto;}
#menutop li{float:left;display:inline;position:relative;font-family:'Open Sans';font-size:12px;font-weight:bold;}
#menutop a{display:block;line-height:50px;padding:0 14px;text-decoration:none;color:#eee;}
#menutop ul li:hover a{color:#8493A0;}
#menutop input{display:none;margin:0 0;padding:0 0;width:100%;height:50px;opacity:0;cursor:pointer}
#menutop label{font-family:'Open Sans';font-size:30px;font-weight:400;display:none;width:35px;height:50px;line-height:50px;text-align:center;}
#menutop label span{font-size:13px;position:absolute;left:35px}
#menutop ul li ul{height:auto;overflow:hidden;position:absolute;z-index:99;color:#eee;}
#menutop ul li ul li a{background:#fff;color:#eee;height:50px;line-height:50px;width:100%;}
#menutop ul.menux{visibility:hidden;opacity:0;height:auto;overflow:hidden;background:#fff;position:absolute;z-index:99;color:#444;box-shadow: 0px 2px 3px rgba(0,0,0,0.1);left:0;top:50px;min-width:150px;border-radius:3px;transform-origin:50% 0;-moz-transform:rotateY(0deg) translateZ(200px);-webkit-transform:rotateY(0deg) translateZ(200px);transform:rotateY(0deg) translateZ(200px);-webkit-transition:350ms;-moz-transition:350ms;-o-transition:350ms;transition:350ms;}
#menutop .menux li {display:block;width:100%;}
#menutop ul.menux li a{display:block;width:100%;color:#666;border-bottom:1px solid #f0f0f0;}
#menutop .menux li:last-child a{border-bottom:none;}
#menutop li:hover > ul.menux{visibility:visible;opacity:1;-moz-transform: perspective(400) rotate3d(0,0,0,0);-webkit-transform: perspective(400) rotate3d(0,0,0,0);
transform: perspective(400) rotate3d(0,0,0,0);}
#menutop a.dutt{padding:0 27px 0 14px}
#menutop a.dutt::after{content:"\f0d7";font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:50px;position:absolute;top:0;right:10px;}
#menutop a.dutt:hover::after,#menutop ul li:hover a.dutt::after{content:"\f0d7";font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:50px;position:absolute;top:0;right:10px;}
#menutop li:hover > a.dutt,#menutop a.dutt:hover{background:#444;color:#fff;}
#menutop ul li ul li a:hover{background:#fdfdfd;color:#8493A5;}
#menutop li.facebook,#menutop li.googleplus,#menutop li.twitter,#menutop li.youtube{text-align:center;color:#fff;float:right;transition:all 0.2s ease-in-out;}
#menutop .buttonalert {font-size:16px;line-height:50px;color:#8493A0;height:50px;-webkit-transform: translateZ(0);cursor:pointer;position:fixed;top:0;left:30px;z-index:90;transition:all 0.5s ease-in-out;transition-delay:0.2s;}
@media only screen and (max-width:768px){
#menutop{background:#fff;border:1px solid #e9e9e9;}
#menutop li:hover > ul.menux{display:block;}
#menutop{position:relative;border:none;border-bottom:4px solid #e9e9e9;}
#menutop ul{background:#fff;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;}
#menutop ul.menux{width:100%;position:static;border:none}
#menutop li{display:block;float:none;width:auto;text-align:left}
#menutop li a{color:#666}
#menutop li a:hover{background:#8493a0;color:#fff!important;}
#menutop li:hover{background:#8493a0;color:#fff;}
#menutop li:hover > a.dutt,#menutop a.dutt:hover{background:#8493a0;color:#fff;}
#menutop input,#menutop label{display:inline-block;position:absolute;right:0;top:0;}
#menutop input:after,#menutop label:after {content:"\f0c9";font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:none;font-size:30px;color:#666;
display:inline-block;position:absolute;right:15px;top:25%;line-height:30px;}
#menutop input{z-index:4;}
#menutop input:checked + label{color:#fff;font-weight:700}
#menutop input:checked ~ ul{display:block}
#menutop ul li ul li a{width:100%;color:#666;}
#menutop ul li ul li a:hover{background:#8493a0;color:#fff;}
#menutop ul.menux a{background:#fff;color:#666;}
#menutop ul.menux a:hover{background:#8493a0;color:#fff;}
#menutop ul.menux li{background:#fff;color:#666;}
#menutop ul.menux li:hover{background:#8493a0;color:#fff;}
#menutop ul.menux li a{background:#fff;color:#666;}
#menutop ul.menux li a:hover{background:#8493a0;color:#fff;}
}

Adding HTML codes

This depends on you, where you want to appear menu in your blog. If you want to appear after header, then find </header> tag and paste the below codes just after it.

     <!---Responsive Menu By MBG--><nav id='menutop'><label></label><input type='checkbox'/><ul><li><a href='/' title='Home'>Home</a></li><li><a class='dutt' href='#'>Categories</a><ul class='menux'><li><a href='#'>Blogger Tricks</a></li><li><a href='#'>DRM Removal</a></li><li><a href='#'>Jailbreak</a></li><li><a href='#'>e-Books</a></li><li><a href='#'>Calibre</a></li><li><a href='#'>iTools</a></li></ul></li><li class='li-download'><a href='#'>Downloads</a></li><li><a href='#'>Contact</a></li><li class='li-sitemap'><a href='#'>Sitemap</a></li><li><a class='dutt' href='#'>TOS</a><ul class='menux'><li><a href='#'>Privacy Policy</a></li><li><a href='#'>DRM Removal Policy</a></li></ul></li><li class='sorting-04 youtube'><a href='https://www.youtube.com/#/' rel='nofollow' target='_blank'><i class='fa fa-youtube fa-lg'></i><span class='inv'></span></a></li><li class='sorting-03 googleplus'><a href='https://plus.google.com/+MBG' rel='nofollow' target='_blank'><i class='fa fa-google-plus fa-lg'></i><span class='inv'></span></a></li><li class='sorting-02 twitter'><a href='https://twitter.com/MBG' rel='nofollow' target='_blank'><i class='fa fa-twitter fa-lg'></i><span class='inv'></span></a></li><li class='sorting-01 facebook'><a href='https://www.facebook.com/MBG' rel='nofollow' target='_blank'><i class='fa fa-facebook fa-lg'></i><span class='inv'></span></a></li></ul>

Replace the # with your blog links and anchor text with your own and yellow highlighted links with your social profiles. That's it.


Remember 
If you are using the blogger mobile version template in your blog, first disable it by going.


  • Select template >> click the gear icon
  • Select No. Show desktop template on mobile devices.
 

Conclusion:

So above guide is about How To Add Responsive Dropdown Menu In Blogger With Social Icons. Now check your blog with different devices. Hopefully it will be working properly, if you are facing any problem about adding this responsive menu bar then leave your comment below. Give your feedback by comment below. Do share.
Thank You! Stay Blessed!

No comments:

Post a Comment

We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.