Cara Membuat Header Blog & Menu Navigasi seperti VioMagz Template. Header plus menu dan kotak pencarian responsive. Desain header blog kekikian (trending).

Cara Membuat Header Blog & Menu Navigasi seperti VioMagz Template

Cara Membuat Header Blog & Menu Navigasi seperti VioMagz Template

CARA 1

CSS

#header-container {
 background:#0055ff;
    color: #fff;
    -webkit-box-shadow: 0 3px 10px 0 rgba(0,0,0,0.2);
    box-shadow: 0 3px 10px 0 rgba(0,0,0,0.2);
    position: fixed;
 top: 0;
 left: 0;
 right: 0;
    width: 100%;
    z-index: 999;
}
#header-wrapper {
 max-width: 1200px;
 margin: 0 auto;
 position: relative;
}
.header {
 max-width: 400px;
 float: left;
 margin-right: 28px;
 overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.header h1.title, .header p.title {
 font: roboto;
 color:#fff;
 margin: 0;
 text-transform: uppercase;
 padding: 9px 0;
}
.header .description {
 color: #fff;
    margin: -10px 0 4px 0;
    padding: 0;
    font-size: 0.7em;
 display: none;
}
.header a, .header a:hover  {
 color: #fff;
}
.header img {
 display:block;
 width: auto;
    margin: 11px 0;
    max-height: 24px;
}
/* SEARCH FORM */
.search-icon {
    position: absolute;
    top: 11px;
    right: 0px;
 font-size: 19px;
}
.search-icon a {
 color: #fff;
}
#searchfs {
    position: fixed;
 z-index:9999;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
   
    -webkit-transition: all 0.1s ease-in-out;
 -moz-transition: all 0.1s ease-in-out;
 -o-transition: all 0.1s ease-in-out;
 -ms-transition: all 0.1s ease-in-out;
 transition: all 0.1s ease-in-out;
    -webkit-transform: translate(0px, -100%) scale(0, 0);
 -moz-transform: translate(0px, -100%) scale(0, 0);
 -o-transform: translate(0px, -100%) scale(0, 0);
 -ms-transform: translate(0px, -100%) scale(0, 0);
 transform: translate(0px, -100%) scale(0, 0);
   
    opacity: 0;
}
#searchfs.open {
    -webkit-transform: translate(0px, 0px) scale(1, 1);
    -moz-transform: translate(0px, 0px) scale(1, 1);
 -o-transform: translate(0px, 0px) scale(1, 1);
 -ms-transform: translate(0px, 0px) scale(1, 1);
 transform: translate(0px, 0px) scale(1, 1);
    opacity: 1;
 z-index: 9999;
}
#searchfs input[type="search"] {
 position: absolute;
    top: 50%;
    left: 0;
    margin-top: -51px;
    width: 70%;
    margin-left: 15%;
    color: rgb(255, 255, 255);
    background: transparent;
    border-top: 1px solid rgba(255, 255, 255, .8);
    border-bottom: 2px solid rgba(255, 255, 255, .5);
    border-left: 0px solid transparent;
    border-right: 0px solid transparent;
    font-size: 40px;
    text-align: center;
    outline: none;
    padding: 10px;
}
#searchfs .close {
    position: fixed;
    top: 20px;
    right: 30px;
    color: #fff;
    background-color: transparent;
    opacity: 0.8;
    font-size: 40px;
    border: none;
 outline: none;
}
#searchfs .close:hover {
 cursor: pointer;
}
/* NAV MENU */
#cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a, #cssmenu #head-mobile {
 border: 0;
 list-style: none;
 line-height: 1;
 display: block;
 position: relative;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
#cssmenu {
 float: left;
}
#cssmenu ul {
 margin: 0;
 display: block;
}
#cssmenu:after,#cssmenu > ul:after {
 content: "+";
 display: block;
 clear: both;
 visibility: hidden;
 line-height: 0;
 height: 0
}
#cssmenu #head-mobile {
 display: none
}
#cssmenu > ul > li {
 float: left;
 margin: 0;
}
#cssmenu > ul > li > a {
 padding: 17px;
 font:roboto;
 letter-spacing: 0.8px;
 text-decoration: none;
 text-transform: uppercase;
 color: #fff;
}
#cssmenu > ul > li:hover > a, #cssmenu ul li.active a {
 color: #fff;
}
#cssmenu > ul > li:hover, #cssmenu ul li.active:hover, #cssmenu ul li.active, #cssmenu ul li.has-sub.active:hover {
 background: rgba(64,64,64,0.05);
 -webkit-transition: background .2s ease;
 -ms-transition: background .2s ease;
 transition: background .2s ease;
}
#cssmenu > ul > li.has-sub > a {
 padding-right: 25px
}
#cssmenu > ul > li.has-sub > a:after {
 position: absolute;
 top: 22px;
 right: 11px;
 width: 8px;
 height: 2px;
 display: block;
 background: #fff;
 content:''
}
#cssmenu > ul > li.has-sub > a:before {
 position: absolute;
 top: 19px;
 right: 14px;
 display: block;
 width: 2px;
 height: 8px;
 background: #fff;
 content:'';
}
#cssmenu > ul > li.has-sub:hover > a:before {
 top: 23px;
 height: 0
}
#cssmenu ul ul {
 position: absolute;
 left: -9999px;
 z-index: 1;
 -webkit-box-shadow: 0 2px 8px 0 rgba(0,0,0,0.15);
    box-shadow: 0 2px 8px 0 rgba(0,0,0,0.15);
}
#cssmenu ul ul li {
 height: 0;
 background :#f8f8f8;
 margin: 0;
}
#cssmenu ul ul li:hover {
 background: #efefef;
}
#cssmenu li:hover > ul {
 left: auto
}
#cssmenu li:hover > ul > li {
 height: 33px
}
#cssmenu ul ul ul{
 margin-left: 100%;
 top: 0
}
#cssmenu ul ul li a {
    border-bottom: 1px solid rgba(150,150,150,0.15);
    padding: 10px 25px 10px 15px;
    max-width: 100%;
 min-width: 150px;
    font-size: 12px;
    text-decoration: none;
    color: #888;
    font-weight: 400;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
#cssmenu ul ul li:last-child > a,#cssmenu ul ul li.last-item > a {
 border-bottom: 0
}
#cssmenu ul ul li.has-sub > a:after {
 position: absolute;
 top: 16px;
 right: 11px;
 width: 8px;
 height: 2px;
 display: block;
 background: #888;
 content:''
}
#cssmenu ul ul li.has-sub > a:before {
 position: absolute;
 top: 13px;
 right: 14px;
 display: block;
 width: 2px;
 height: 8px;
 background: #888;
 content:'';
}
#cssmenu ul ul > li.has-sub:hover > a:before {
 top: 17px;
 height: 0
}
#cssmenu ul ul li.has-sub:hover,#cssmenu ul li.has-sub ul li.has-sub ul li:hover {
 background: #efefef;
}
#cssmenu ul ul ul li.active a {
 border-left:1px solid #333
}
#cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active > a{
 border-top: 1px solid #333
}
@media screen and (min-width:800px){
 #cssmenu ul {
  display: block !important;
 }
}
@media screen and (max-width:800px){
 #cssmenu {
  float: none;
 }
 #cssmenu ul {
  background: #f8f8f8;
  width: 100%;
  display: none
 }
 #cssmenu ul ul {
  -webkit-box-shadow: none;
  box-shadow: none;
  display:none;
 }
 #cssmenu ul li {
  width: 100%;
  border-top: 1px solid #efefef;
  background: #f8f8f8;
 }
 #cssmenu ul ul li, #cssmenu li:hover > ul > li {
  height: auto
 }
 #cssmenu ul li a, #cssmenu ul ul li a {
  width: 100%;
  border-bottom: 0;
  color: #888 !important;
 }
 #cssmenu > ul > li {
  float: none
 }
 #cssmenu ul ul li a {
  padding-left: 25px
 }
 #cssmenu ul ul ul li a {
  padding-left: 35px
 }
 #cssmenu ul ul, #cssmenu ul ul ul{
  position: relative;
  left: 0;
  width: 100%;
  margin: 0;
  text-align: left
 }
 #cssmenu > ul > li.has-sub > a:after,#cssmenu > ul > li.has-sub > a:before, #cssmenu ul ul > li.has-sub > a:after, #cssmenu ul ul > li.has-sub > a:before{
  display: none
 }
 #cssmenu #head-mobile {
  display: block;
  padding: 23px;
  color: #fff;
  font-size: 12px;
  font-weight: 500
 }
 .button {
  width: 20px;
  height: 46px;
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
  z-index: 2;
 }
 .button:after {
  position: absolute;
  top: 21px;
  right: 0px;
  display: block;
  height: 4px;
  width: 20px;
  border-top: 3px solid #fff;
  border-bottom: 3px solid #fff;
  content:''
 }
 .button:before {
  position: absolute;
  top: 14px;
  right: 0px;
  display: block;
  height: 3px;
  width: 20px;
  background: #fff;
  content:''
 }
 .button.menu-opened:after {
  top: 21px;
  border: 0;
  height: 3px;
  width: 20px;
  background: #fff;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg)
 }
 .button.menu-opened:before {
  top: 21px;
  background: #fff;
  width: 20px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg)
 }
 #cssmenu .submenu-button {
  position: absolute;
  z-index: 99;
  right: 0;
  top: 0;
  display: block;
  border-left: 1px solid #efefef;
  height: 38px;
  width: 38px;
  cursor: pointer
 }
 #cssmenu .submenu-button.submenu-opened {
  background: rgba(64,64,64,0.05);
 }
 #cssmenu ul ul .submenu-button {
  height: 32px;
  width: 32px
 }
 #cssmenu .submenu-button:after {
  position: absolute;
  top: 19px;
  right: 16px;
  width: 8px;
  height: 2px;
  display: block;
  background: #888;
  content:''
 }
 #cssmenu ul ul .submenu-button:after {
  top: 15px;
  right: 13px
 }
 #cssmenu .submenu-button.submenu-opened:after {
  background: #888
 }
 #cssmenu .submenu-button:before {
  position: absolute;
  top: 16px;
  right: 19px;
  display: block;
  width: 2px;
  height: 8px;
  background: #888;
  content:''
 }
 #cssmenu ul ul .submenu-button:before{
  top: 12px;
  right: 16px
 }
 #cssmenu .submenu-button.submenu-opened:before{
  display: none
 }
 #cssmenu ul ul ul li.active a{
  border-left: none
 }
 #cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active > a{
  border-top: none
 }
}
@media screen and (max-width:1000px) {
#header-wrapper{
  padding-left: 30px;
  padding-right: 30px;
 }
}
@media only screen and (max-width:800px){
 #header-wrapper {
  padding-left: 0px;
  padding-right: 0px;
  position: relative;
 }
 #cssmenu > ul > li > a {
  padding: 12px 20px;
 }
 .button {
  margin-right: 20px;
 }
 .header {
  max-width: 100%;
  position: absolute;
  top: 0;
  left: 20px;
  z-index: 1;
 }
 .search-icon {
  right: 55px;
 }
}
@media only screen and (max-width:640px){
 #cssmenu > ul > li > a {
  padding: 12px 15px;
 }
 .button {
  margin-right: 15px;
 }
 .header {
  left: 15px;
 }
 .search-icon {
  right: 50px;
 }
}
@media only screen and (max-width:480px){
 #cssmenu > ul > li > a {
  padding: 12px 12px;
 }
 .button {
  margin-right: 12px;
 }
 .header {
  left: 12px;
  max-width: 70%;
 }
 #searchfs input[type="search"] {
  font-size: 26px;
 }
 .search-icon {
  right: 47px;
 }
}
@media screen and (max-width:320px){
 #cssmenu > ul > li > a {
  padding: 12px 10px;
 }
 .button {
  margin-right: 10px;
 }
 .header {
  left: 10px;
 }
 .search-icon {
  right: 45px;
 }
}

HTML:

<div id='header-container'> 
  <header id='header-wrapper'> 
  <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
      <b:widget id='Header1' locked='true' title='Zergu (Header)' type='Header' version='1'>
        <b:widget-settings>
          <b:widget-setting name='displayUrl'/>
          <b:widget-setting name='displayHeight'>0</b:widget-setting>
          <b:widget-setting name='sectionWidth'>-1</b:widget-setting>
          <b:widget-setting name='useImage'>false</b:widget-setting>
          <b:widget-setting name='shrinkToFit'>false</b:widget-setting>
          <b:widget-setting name='imagePlacement'>BEHIND</b:widget-setting>
          <b:widget-setting name='displayWidth'>0</b:widget-setting>
        </b:widget-settings>
        <b:includable id='main'>
  <b:if cond='data:useImage'>
    <b:if cond='data:imagePlacement == &quot;BEHIND&quot;'>
      <!--
      Show image as background to text. You can't really calculate the width
      reliably in JS because margins are not taken into account by any of
      clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
      width if the user is using shrink to fit.
      This results in a margin-width's worth of pixels being cropped. If the
      user is not using shrink to fit then we expand the header.
      -->
      <b:if cond='data:mobile'>
          <div id='header-inner'>
            <div class='titlewrapper' style='background: transparent'>
              <h1 class='title' style='background: transparent; border-width: 0px'>
                <b:include name='title'/>
              </h1>
            </div>
            <b:include name='description'/>
          </div>
        <b:else/>
          <div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot;                        + &quot;background-position: &quot;                        + data:backgroundPositionStyleStr + &quot;; &quot;                        + data:widthStyleStr                        + &quot;min-height: &quot; + data:height                        + &quot;_height: &quot; + data:height                        + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>
            <div class='titlewrapper' style='background: transparent'>
              <h1 class='title' style='background: transparent; border-width: 0px'>
                <b:include name='title'/>
              </h1>
            </div>
            <b:include name='description'/>
          </div>
        </b:if>
    <b:else/>
      <!--Show the image only-->
      <div id='header-inner'>
     <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
            <h1 style='text-indent:-9999px;margin:0 0 0 0;padding:0 0 0 0;height:0px;'><b:include name='title'/></h1>
          </b:if>
  </b:if>
        <a expr:href='data:blog.homepageUrl' style='display: block'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
        </a>
        <!--Show the description-->
        <b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'>
          <b:include name='description'/>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
      <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
              <h1 style='text-indent:-9999px;margin:0 0 0 0;padding:0 0 0 0;height:0px;'><b:include name='title'/></h1>
      </b:if>
    </b:if>
        </b:if>
      </div>
    </b:if>
  <b:else/>
    <!--No header image -->
    <div id='header-inner'>
      <div class='titlewrapper'> 
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
             <p class='title'><b:include name='title'/></p>
     <b:else/>
       <h1 class='title'><b:include name='title'/></h1>
     </b:if>
  <b:else/>
          <p class='title'><b:include name='title'/></p>
  </b:if>
     <b:include name='description'/>
      </div>
 </div>
  </b:if>
</b:includable>
        <b:includable id='description'>
  <div class='descriptionwrapper'>
    <p class='description'><span><data:description/></span></p>
  </div>
</b:includable>
        <b:includable id='title'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <data:title/>
  <b:else/>
    <a expr:href='data:blog.homepageUrl'><data:title/></a>
  </b:if>
</b:includable>
      </b:widget>
    </b:section>

<nav id='cssmenu'>
<div id='head-mobile'/>
<div class='button' id='menu-button'/>
<!-- menu navigasi header start -->
<ul>
  <li><a href='#'>Menu</a></li>
  <li><a href='#'>Menu</a></li>
  <li><a href='#'>Menu</a></li>
  <li><a href='#'>Menu</a>
  <ul>
 <li><a href='#'>SubMenu1</a></li>
 <li><a href='#'>SubMenu2</a></li>
 <li><a href='#'>SubMenu3</a></li>
  </ul>
  </li>
  <li><a href='#'>Menu</a>
  <ul>
 <li><a href='#'>SubMenu1</a></li>
 <li><a href='#'>SubMenu2</a></li>
 <li><a href='#'>SubMenu3</a></li>
 <li><a href='#'>SubMenu4</a></li>
  </ul>
  </li>
</ul>
<!-- menu navigasi header end -->
</nav>


 <div class='search-icon'>
  <a href='#searchfs'><i class='fa fa-search'/></a>
 </div>
<div id='searchfs'>
<button class='close' type='button'>&#215;</button>
  <form action='/search' id='search-form' method='get'>
    <input name='q' placeholder='type to search' type='search' value=''/>
 <input name='max-results' type='hidden' value='7'/>
  </form>
</div>
 <div class='clear'/>
  </header>
 
</div>

JavaScript:

<script>
//<![CDATA[
/*
 Sticky-kit v1.1.2 | WTFPL | Leaf Corcoran 2015 | http://leafo.net
*/
(function(){var b,f;b=this.jQuery||window.jQuery;f=b(window);b.fn.stick_in_parent=function(d){var A,w,J,n,B,K,p,q,k,E,t;null==d&&(d={});t=d.sticky_class;B=d.inner_scrolling;E=d.recalc_every;k=d.parent;q=d.offset_top;p=d.spacer;w=d.bottoming;null==q&&(q=0);null==k&&(k=void 0);null==B&&(B=!0);null==t&&(t="is_stuck");A=b(document);null==w&&(w=!0);J=function(a,d,n,C,F,u,r,G){var v,H,m,D,I,c,g,x,y,z,h,l;if(!a.data("sticky_kit")){a.data("sticky_kit",!0);I=A.height();g=a.parent();null!=k&&(g=g.closest(k));
if(!g.length)throw"failed to find stick parent";v=m=!1;(h=null!=p?p&&a.closest(p):b("<div />"))&&h.css("position",a.css("position"));x=function(){var c,f,e;if(!G&&(I=A.height(),c=parseInt(g.css("border-top-width"),10),f=parseInt(g.css("padding-top"),10),d=parseInt(g.css("padding-bottom"),10),n=g.offset().top+c+f,C=g.height(),m&&(v=m=!1,null==p&&(a.insertAfter(h),h.detach()),a.css({position:"",top:"",width:"",bottom:""}).removeClass(t),e=!0),F=a.offset().top-(parseInt(a.css("margin-top"),10)||0)-q,
u=a.outerHeight(!0),r=a.css("float"),h&&h.css({width:a.outerWidth(!0),height:u,display:a.css("display"),"vertical-align":a.css("vertical-align"),"float":r}),e))return l()};x();if(u!==C)return D=void 0,c=q,z=E,l=function(){var b,l,e,k;if(!G&&(e=!1,null!=z&&(--z,0>=z&&(z=E,x(),e=!0)),e||A.height()===I||x(),e=f.scrollTop(),null!=D&&(l=e-D),D=e,m?(w&&(k=e+u+c>C+n,v&&!k&&(v=!1,a.css({position:"fixed",bottom:"",top:c}).trigger("sticky_kit:unbottom"))),e<F&&(m=!1,c=q,null==p&&("left"!==r&&"right"!==r||a.insertAfter(h),
h.detach()),b={position:"",width:"",top:""},a.css(b).removeClass(t).trigger("sticky_kit:unstick")),B&&(b=f.height(),u+q>b&&!v&&(c-=l,c=Math.max(b-u,c),c=Math.min(q,c),m&&a.css({top:c+"px"})))):e>F&&(m=!0,b={position:"fixed",top:c},b.width="border-box"===a.css("box-sizing")?a.outerWidth()+"px":a.width()+"px",a.css(b).addClass(t),null==p&&(a.after(h),"left"!==r&&"right"!==r||h.append(a)),a.trigger("sticky_kit:stick")),m&&w&&(null==k&&(k=e+u+c>C+n),!v&&k)))return v=!0,"static"===g.css("position")&&g.css({position:"relative"}),
a.css({position:"absolute",bottom:d,top:"auto"}).trigger("sticky_kit:bottom")},y=function(){x();return l()},H=function(){G=!0;f.off("touchmove",l);f.off("scroll",l);f.off("resize",y);b(document.body).off("sticky_kit:recalc",y);a.off("sticky_kit:detach",H);a.removeData("sticky_kit");a.css({position:"",bottom:"",top:"",width:""});g.position("position","");if(m)return null==p&&("left"!==r&&"right"!==r||a.insertAfter(h),h.remove()),a.removeClass(t)},f.on("touchmove",l),f.on("scroll",l),f.on("resize",
y),b(document.body).on("sticky_kit:recalc",y),a.on("sticky_kit:detach",H),setTimeout(l,0)}};n=0;for(K=this.length;n<K;n++)d=this[n],J(b(d));return this}}).call(this);
// search form
$(function(){$('a[href="#searchfs"]').on("click",function(e){e.preventDefault(),$("#searchfs").addClass("open"),$('#searchfs > form > input[type="search"]').focus()}),$("#searchfs, #searchfs button.close").on("click keyup",function(e){e.target!=this&&"close"!=e.target.className&&27!=e.keyCode||$(this).removeClass("open")})});
// nav menu
!function(s){s.fn.menumaker=function(n){var e=s(this),o=s.extend({format:"dropdown",sticky:!1},n);return this.each(function(){s(this).find(".button").on("click",function(){s(this).toggleClass("menu-opened");var n=s(this).next("ul");n.hasClass("open")?n.slideToggle(150).removeClass("open"):(n.slideToggle(150).addClass("open"),"dropdown"===o.format&&n.find("ul").show())}),e.find("li ul").parent().addClass("has-sub"),multiTg=function(){e.find(".has-sub").prepend('<span class="submenu-button"></span>'),e.find(".submenu-button").on("click",function(){s(this).toggleClass("submenu-opened"),s(this).siblings("ul").hasClass("open")?s(this).siblings("ul").removeClass("open").slideToggle(150):s(this).siblings("ul").addClass("open").slideToggle(150)})},"multitoggle"===o.format?multiTg():e.addClass("dropdown"),!0===o.sticky&&e.css("position","fixed")})}}(jQuery),function(s){s(document).ready(function(){s("#cssmenu").menumaker({format:"multitoggle"})})}(jQuery);
//]]>
</script>

Cara Membuat Header Blog & Menu Navigasi seperti VioMagz Template
CARA II

CSS:

#header-wrapper {overflow:hidden;max-height:70px;margin:0;float:left;}
#header a {color:#fff;font-weight:700}
#header h1, #header h2, #header p {color:#fff;line-height:2em;font-size:190%;height:auto;top:0;margin:0;padding:0;text-transform:uppercase;font-weight:700}
#header .description {display:none}
#header img {display:block;height:50px;width:150px;padding:10px 0;}
#container-akmj {max-width:1000px;margin:0 auto;padding:0;position:relative;background:#0099ff;-webkit-box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);}
#container {width:100%;background:#0099ff;top:0;right:0;left:0;position:fixed;z-index:9999;-webkit-box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2)}
/*----- Navigasi -----*/
nav{padding:0;width:100%;}
.nav_wrapper{float:right;}
.btn{padding:5px 1%;margin:5px;color:#0055ff;text-decoration:none;transition:all 0.1s ease}
.btn:hover{transition:all 0.1s ease}
.menu-link{display:none}
.spinner-master input[type=checkbox]{display:none}
.menu{width:100%;height:auto;transition:all 0.3s ease}
.menu ul{padding:0;margin:0;list-style:none;position:relative;display:inline-block}
.menu >li >ul.sub_menu{min-width:15em;padding:4px 0;background-color:#fff;}
.menu ul li{padding:0}
.menu >ul >li{display:inline-block}
.menu ul li a{display:block;text-decoration:none;color:#fff;font-weight:700;font-size:12px;text-transform:uppercase;}
.menu ul li a:hover{background:#0077ff;}
.menu ul li >a{padding:20px}
.menu ul ul{display:none;position:absolute;top:100%;min-width:200px;background:#fff;-webkit-box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);}
.menu ul li:hover >ul{display:block}
.menu ul ul >li{position:relative}
.menu ul ul >li a{padding:10px 15px;height:auto;background:#fff;color:#222;border:1px solid #ddd;border-top:none;font-weight:500;font-size:13px;text-transform:none}
.menu ul ul >li a:hover{color:#0099ff;background:#fff;border-left:5px solid #0099ff}
.menu ul ul ul{position:absolute;left:100%;top:0;text-transform:none}
/*----- 768px -----*/
@media screen and (max-width:768px){
#header-wrapper {margin:0;width:auto;max-width:200px;float:none;padding:0 0 0 15px}
#header img {margin:0;}
nav {padding:0;width:100%}
.nav_wrapper {font-size:12px;width:100%;padding-right:0;-webkit-box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);}
.spinner-master *{transition:all 0.3s;box-sizing:border-box}
.spinner-master{height:0;width:0;float:left}
.spinner-master label{cursor:pointer;position:absolute;z-index:99;height:5px;width:25px;top:17px;right:15px}
.spinner-master .spinner{position:absolute;height:3.5px;width:100%;padding:0;background-color:#fff}
.spinner-master .diagonal.part-1{position:relative;float:right}
.spinner-master .horizontal{position:relative;float:right;margin-top:4px}
.spinner-master .diagonal.part-2{position:relative;float:right;margin-top:4px}
.spinner-master input[type=checkbox]:checked~.spinner-spin >.horizontal{opacity:0}
.spinner-master input[type=checkbox]:checked~.spinner-spin >.diagonal.part-1{transform:rotate(135deg);-webkit-transform:rotate(135deg);margin-top:10px}
.spinner-master input[type=checkbox]:checked~.spinner-spin >.diagonal.part-2{transform:rotate(-135deg);-webkit-transform:rotate(-135deg);margin-top:-12px}
a.menu-link{display:block;color:#fff;position:absolute;float:right;text-decoration:none;padding:0;font-size:12px;top:0;right:0}
a.menu-link:hover{color:#efa666}
a.menu-link:after{content:"\2630";font-weight:500}
a.menu-link.active:after{content:"\2715"}
.menu{clear:both;min-width:inherit;float:none}
.menu,.menu >ul ul{overflow:hidden;max-height:0;background:#fff}
.menu >li >ul.sub-menu{padding:0;border:none}
.menu.active,.menu >ul ul.active{max-height:55em}
.menu ul{display:inline}
.menu li,.menu >ul >li{display:block}
.menu ul li a,.menu ul li >a{color:#000;border-bottom:1px solid #ddd;border-right:1px solid #ddd;border-left:1px solid #ddd}
.menu li a{color:#000;display:block;padding:.8em;position:relative}
.menu li.has-submenu >a:after{content:'+';position:absolute;top:10px;right:0;display:block;font-size:1.5em;padding:0;width:2.5em;text-align:center;}
.menu li.has-submenu >a.active:after{content:"-"}
.menu ul ul >li a{color:#222;padding:10px 18px 10px 30px;background:#fff}
.menu ul li >a {padding:15px;}
.menu ul li a:hover{background:#fff;color:#222;border-left:5px solid #0055ff}
.menu ul li.hover >a{background:#fff;color:#222;border-left:5px solid #0055ff}
.menu ul ul,.menu ul ul ul{background:#fff;display:inherit;position:relative;left:auto;top:auto;border:none}
}

HTML:

<div id='container'><div id='container-akmj'>
<header id='header-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPHeader'><b:section id='header' showaddelement='no'>
  <b:widget id='Header1' locked='true' title='Internalku (Header)' type='Header' version='1'>
    <b:widget-settings>
      <b:widget-setting name='displayUrl'/>
      <b:widget-setting name='displayHeight'>0</b:widget-setting>
      <b:widget-setting name='sectionWidth'>442</b:widget-setting>
      <b:widget-setting name='useImage'>false</b:widget-setting>
      <b:widget-setting name='shrinkToFit'>false</b:widget-setting>
      <b:widget-setting name='imagePlacement'>BEHIND</b:widget-setting>
      <b:widget-setting name='displayWidth'>0</b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'><b:if cond='data:useImage'><b:if cond='data:imagePlacement == &quot;BEHIND&quot;'><b:if cond='data:mobile'><div id='header-inner'><div class='titlewrapper' style='background: transparent'><h1 class='title' style='background: transparent; border-width: 0px'><b:include name='title'/></h1></div><b:include name='description'/></div><b:else/><div expr:style='&quot;background-image: url(&quot;&quot; + data:sourceUrl + &quot;&quot;); &quot;                        + &quot;background-position: &quot;                        + data:backgroundPositionStyleStr + &quot;; &quot;                        + data:widthStyleStr                        + &quot;min-height: &quot; + data:height                        + &quot;_height: &quot; + data:height                        + &quot;background-repeat: no-repeat; &quot;' id='header-inner'><div class='titlewrapper' style='background: transparent'><h1 class='title' style='background: transparent; border-width: 0px'><b:include name='title'/></h1></div><b:include name='description'/></div></b:if><b:else/><div id='header-inner'><b:if cond='data:blog.pageType != &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'><h1 style='text-indent:-9999px;margin:0 0 0 0;padding:0 0 0 0;height:0px;'><b:include name='title'/></h1></b:if></b:if><a expr:href='data:blog.homepageUrl' style='display: block'><img class='lazy' expr:alt='data:title' expr:data-src='data:sourceUrl' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:width='data:width' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=' style='display: block'/></a><!--Show the description--><b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'><b:include name='description'/><b:if cond='data:blog.pageType != &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'><h1 style='text-indent:-9999px;margin:0 0 0 0;padding:0 0 0 0;height:0px;'><b:include name='title'/></h1></b:if></b:if></b:if></div></b:if><b:else/><div id='header-inner'><div class='titlewrapper'><b:if cond='data:blog.pageType != &quot;item&quot;'><b:if cond='data:blog.pageType == &quot;static_page&quot;'><p class='title'><b:include name='title'/></p><b:else/><h1 class='title'><b:include name='title'/></h1></b:if><b:else/><p class='title'><b:include name='title'/></p></b:if><b:include name='description'/></div></div></b:if></b:includable>
    <b:includable id='description'><div class='descriptionwrapper'><p class='description'><span><data:description/></span></p></div></b:includable>
    <b:includable id='title'><b:if cond='data:blog.url == data:blog.homepageUrl'><data:title/><b:else/><a expr:href='data:blog.homepageUrl'><data:title/></a></b:if></b:includable>
  </b:widget>
</b:section></header>
<div class='nav_wrapper'> <!--<a class="menu-link" href="#menu"></a>--> <div class='spinner-master'><input id='spinner-form' type='checkbox'/><label class='spinner-spin' for='spinner-form'><div class='spinner diagonal part-1'/><div class='spinner horizontal'/><div class='spinner diagonal part-2'/></label></div><nav class='menu' id='menu' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
<ul class='dropdown'>
<li><a href='#' title='Android'>Android</a></li>
<li><a href='#' title='Bisnis'>Bisnis</a></li>
<li><a href='#' title='Blogger'>Blogger</a></li>
<li><a href='#' title='Games'>Games</a></li>
<li><a href='#' title='Tips &amp; Trik'>Tips &amp; Trik</a>
<ul>
<li><a href='https://www.internalku.com/2018/06/cara-mendapatkan-kuota-internet-telkomsel-gratis.html' title='Tips Terbaru Internet Telkomsel Gratis'>Kuota Tsel Gratis</a></li>
<li><a href='https://www.internalku.com/2018/06/cara-agar-koneksi-internet-tetap-stabil-tanpa-dc.html' title='Cara Agar Koneksi Internet Tetap Stabil Tanpa DC'>Internet Tetap Stabil</a></li>
<li><a href='https://www.internalku.com/2018/06/cara-membuka-situs-yang-diblokir.html' title='Cara Membuka Situs yang Diblokir di Android dan PC'>Membuka Situs Diblokir</a></li>
</ul></li>
<li><a href='#' title='Windows'>Windows</a>
<ul>
<li><a href='https://www.internalku.com/2018/06/laptop-terbaik-dan-berkualitas-untuk-programmer.html' title='Laptop Terbaik dan Berkualitas Untuk Programmer'>Laptop Programmer</a></li>
<li><a href='https://www.internalku.com/2018/06/cara-merawat-komputer.html' title='Cara Merawat Komputer Agar Tetap Awet dan Tidak Lemot'>Merawat Komputer</a></li>
</ul></li>
</ul>
</nav></div>
</div></div>

Javascript:

<script type='text/javascript'>
$(&quot;ul li:has(ul)&quot;).addClass(&quot;has-submenu&quot;);$(&quot;ul li ul&quot;).addClass(&quot;sub-menu&quot;);$(&quot;ul.dropdown li&quot;).hover(function(){$(this).addClass(&quot;hover&quot;)},function(){$(this).removeClass(&quot;hover&quot;)});var $menu=$(&quot;#menu&quot;),$menulink=$(&quot;#spinner-form&quot;),$search=$(&quot;#search&quot;),$search_box=$(&quot;.search_box&quot;),$menuTrigger=$(&quot;.has-submenu &gt; a&quot;);$menulink.click(function(e){$menulink.toggleClass(&quot;active&quot;);$menu.toggleClass(&quot;active&quot;);if($search.hasClass(&quot;active&quot;)){$(&quot;.menu.active&quot;).css(&quot;padding-top&quot;,&quot;50px&quot;)}});$search.click(function(e){e.preventDefault();$search_box.toggleClass(&quot;active&quot;)});$menuTrigger.click(function(e){e.preventDefault();var t=$(this);t.toggleClass(&quot;active&quot;).next(&quot;ul&quot;).toggleClass(&quot;active&quot;)});$(&quot;ul li:has(ul)&quot;);$(function(){var e=$(document).scrollTop();var t=$(&quot;.nav_wrapper&quot;).outerHeight();$(window).scroll(function(){var n=$(document).scrollTop();if($(document).scrollTop()&gt;=50){$(&quot;.nav_wrapper&quot;).css(&quot;position&quot;)}else{$(&quot;.nav_wrapper&quot;).css(&quot;position&quot;)}if(n&gt;t){$(&quot;.nav_wrapper&quot;).addClass(&quot;scroll&quot;)}else{$(&quot;.nav_wrapper&quot;).removeClass(&quot;scroll&quot;)}if(n&gt;e){$(&quot;.nav_wrapper&quot;).removeClass(&quot;no-scroll&quot;)}else{$(&quot;.nav_wrapper&quot;).addClass(&quot;no-scroll&quot;)}e=$(document).scrollTop()})})
</script>

Sumber1 | Sumber2