How To Create Dropdown Menu Responsive Floating On Blogger Header

Bismillaahirrahmaanirrahiim
Assalaamu'alaikum Wr Wb!

As a Webmaster or Blogger professional following technological advances, especially for those of you that design technology and networks, this is the foundation and will be a website or blog you need good tutorial for creating a dropdown menu float responsive to the header Blogger or so-called "Dropdown Menu Responsive Floating On Blogger Header", as a Blogger who love and often wandered the world of internet you often find plenty Website, Blog and Portal using the menu. This menu also pamper its visitors and make it easier for visitors to navigate a web page or blog in search for various purposes, such as visitors to a blog to find a tutorial.

With the sticky and floating when the cursor in drag down easier for visitors to use the short time in searching requirements on a blog because visitors do not need to repeat scroll up to select the menu option, this is the best because of the modern technology is getting easier and various complaints resolved by the growth of knowledge that increased to an improvement. You should know that the menu is very responsive and adaptive to the Desktop and Mobile device. Design is no longer our contemporary decor too much color for modern times is the simple but impressive simple, not simple in plain meaning total, but simple maturity that is easily understood. I add a little explanation that a Website, Blog or Portal is not nice and modern if it is not too simple because of the lack of effort shown an admin and not beautiful and not to be an evaluation impressive.

If you already understand my description, let us to tutorials⇨

1. Login to Blogger> Template> Edit HTML and put the following CSS above / before the </head> tags⇩

/*******************************************************************************
Header Dropdown Menu Sticky And Floating Responsive By www.BloggerDiscreet.com
*******************************************************************************/
<style>
#menutop{width:100%;max-width:100%;margin:0 auto;height:45px;background:#000000;border:0px solid #ffffff;}
#menutop ul,#menutop li{margin:0;padding:0;list-style:none;}
#menutop ul{height:45px}
#menutop li{float:left;display:inline;position:relative;font-family:&#39;Open Sans&#39;;font-size:13px;
font-weight:bold;}
#menutop a{display:block;line-height:45px;padding:0 14px;text-decoration:none;color:#ffffff;}
#menutop ul li:hover a{color:#006600;}
#menutop input{display:none;margin:0 0;padding:0 0;width:100%;height:45px;opacity:0;cursor:pointer}
#menutop label{font-family:&#39;Open Sans&#39;;font-size:30px;font-weight:400;display:none;width:35px;height:45px;line-height:45px;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:#006600}
#menutop ul li ul li a{color:#006600;height:45px;line-height:45px;background:#fff;width:100%;}
#menutop ul.menux{visibility:hidden;opacity:0;height:auto;overflow:hidden;background:#000000;position:absolute;z-index:99;color:#006600;box-shadow: 0px 2px 3px rgba(0,0,0,0.1);top:10px;transition:all 0.3s ease-in-out;}
#menutop li:hover &gt; ul.menux{visibility:visible;opacity:1;top:45px;}
#menutop a.dutt{padding:0 27px 0 14px}
#menutop a.dutt::after{content:&quot;\f0d7&quot;;font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:45px;position:absolute;top:0;right:10px;}
#menutop a.dutt:hover::after,#menutop ul li:hover a.dutt::after{content:&quot;\f0d7&quot;;font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:45px;position:absolute;top:0;right:10px;}
#menutop ul.menux li a{background:#000000;color:#006600;}
#menutop ul li ul li a:hover{background:#000000;color:#006600;}
#menutop li.facebook {padding:0 5px;}
#menutop li.facebook,#menutop li.twitter,#menutop li.youtube,#menutop li.googleplus,#menutop li.soundcloud{background:#000000;text-align:center;color:#ffffff;float:right;transition:all 0.2s ease-in-out;}
#menutop li a.facebook:hover,#menutop li a.twitter:hover,#menutop li a.youtube:hover,#menutop li a.googleplus:hover,#menutop li a.soundcloud:hover{color:#006600;}
#menutop li.facebook .fa.fa-facebook,#menutop li.twitter .fa.fa-twitter,#menutop li.youtube .fa.fa-youtube,#menutop li.googleplus .fa.fa-google-plus,#menutop li.soundcloud .fa.fa-soundcloud{color:#ffffff;transition:all 0.2s ease-in-out;}
#menutop li.facebook:hover,#menutop li.twitter:hover,#menutop li.youtube:hover,
#menutop li.googleplus:hover,#menutop li.soundcloud:hover{background:#000000;color:#ffffff;}
#menutop li.facebook:hover .fa.fa-facebook,#menutop li.twitter:hover .fa.fa-twitter,#menutop li.youtube:hover .fa.fa-youtube,#menutop li.googleplus:hover .fa.fa-google-plus,#menutop li.soundcloud:hover .fa.fa-soundcloud{color:#006600;}

@media screen and (max-width:960px) {
#menutop li:hover &gt; ul.menux{display:block;}
#menutop ul{border:none;border-bottom:4px solid #006600;}
#menutop{position:relative;border:none;border-bottom:4px solid #006600;}
#menutop ul{background:#000000;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:#006600}
#menutop li a:hover{background:#006600;color:#006600;}
#menutop li:hover{background:#006600;color:#006600;}
#menutop a.dutt{font-weight: bold;}
#menutop li:hover &gt; a.dutt,#menutop a.dutt:hover{background:#006600;color:#006600;}
#menutop input,#menutop label{display:inline-block;position:absolute;right:0;top:0;}
#menutop input:after,#menutop label:after {content:&quot;\f0c9&quot;;font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:none;font-size:30px;color:#006600;
display:inline-block;position:absolute;right:15px;top:25%;line-height:30px;}
#menutop input{z-index:4;}
#menutop input:checked + label{color:#006600;font-weight:700}
#menutop input:checked ~ ul{display:block}
#menutop ul li ul li a{width:100%;color:#006600;}
#menutop ul li ul li a:hover{background:#006600;color:#006600;}
#menutop ul.menux a{background:#006600;color:#006600;}
#menutop ul.menux a:hover{background:#006600;color:#006600;}
#menutop ul.menux li{background:#006600;color:#006600;}
#menutop ul.menux li:hover{background:#006600;color:#006600;}
#menutop ul.menux li a{background:#006600;color:#006600;}
#menutop ul.menux li a:hover{background:#006600;color:#006600;}
</style>

2. Put the following HTML below / after the </head> tags⇩

<!-- Header Dropdown Menu Sticky And Floating Responsive By www.BloggerDiscreet.com Starts -->
<nav id='menutop'>
<input type='checkbox'/>
<label/>
<ul>
<li><a href='/' title='Home'>Home</a></li>
<li><a class='dutt' href='#'>Drop-Down</a>
<ul class='menux'>
<li><a href='#'>Sub-item 1</a></li>
<li><a href='#'>Sub-item 2</a></li>
</ul>
</li>
<li><a class='dutt' href='/p/get-in-touch.html'>Contact</a>
<ul class='menux'>
<li><a href='#'>e-mail Form</a></li>
</ul>
</li>
<li><a href='/p/privacy-policy.html'>Privacy Policy</a></li>
<li><a href='/p/sitemap.html'>Sitemap</a></li>
</ul>
</li>
<li class='sorting-02 twitter'><a href='https://twitter.com/username' target='_blank'><i class='fa fa-twitter fa-lg' title='Twitter'/><span class='inv'/></a></li>
<li class='sorting-01 facebook'><a href='https://www.facebook.com/username' target='_blank'><i class='fa fa-facebook fa-lg' title='Facebook'/><span class='inv'/></a></li>
<li class='sorting-06 soundcloud'><a href='https://soundcloud.com/username' target='_blank'><i class='fa fa-soundcloud fa-lg' title='SoundCloud'/><span class='inv'/></a></li>
<li class='sorting-04 youtube'><a href='https://www.youtube.com/channel/username' target='_blank'><i class='fa fa-youtube fa-lg' title='YouTube'/><span class='inv'/></a></li>
<li class='sorting-03 googleplus'><a href='https://plus.google.com/u/0/usernname' target='_blank'><i class='fa fa-google-plus fa-lg' title='Google Plus'/><span class='inv'/></a></li>
</ul>
</nav>
<!-- Header Dropdown Menu Sticky And Floating Responsive By www.BloggerDiscreet.com Ends -->

3. Put the following jQuery below / after the <head> tags⇩
Note: If your blog template is installed then just ignore the following jQuery

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

4. To create a menu "Sticky And Floating" when scrolling down, then increase the following JavaScript by putting above / before the </body> tags⇩

<!-- Header Dropdown Menu Sticky And Floating Responsive By www.BloggerDiscreet.com Starts -->
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    var stickyNavTop = $('#menutop').offset().top;
    var stickyNav = function(){
        var scrollTop = $(window).scrollTop(); 
        if (scrollTop > stickyNavTop) {
            $('#menutop').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
        } else {
            $('#menutop').css({ 'position': 'relative' });
        }
    };
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script>
<!-- Header Dropdown Menu Sticky And Floating Responsive By www.BloggerDiscreet.com Ends -->

5. Save Template.

Alhamdulillaah, tutorial is ready.