Menu responsive Cb para Templates Blogger

responsive-menu-alat-blogger

menu nama blogger template responsive

nama tampa warna responsive menu

Hoje vamos apresentar um menu conforme acima responsive por cb isso é elegante e também tem um diferencial para qualquer tipo de dispositivo movel ficando assim elegante se você deseja adicionar isso a seu template siga os passos abaixo


Adicionando menu responsive no template do Blogger:


Faça login no template do Blogger então va no menu tema com as teclas combinadas CTRL+F 
busque por ]]></b:skin>  então acima disso copie e cole o seguinte código: 

body#layout .siteheadersec,body#layout .header {width:100%;height:auto;}
.header{padding:20px 0;position:relative}
.header .cover{display:block;position:absolute;top:0;right:0;bottom:0;left:0}
.header.bg-image{background-size:cover;background-position:center}
.header.bg-image .cover{opacity:.65}
.Header h1 {width:300px}
.siteheadersec{width:33.33%;padding-right:40px;position:absolute;bottom:-16px;left:0}
.site-title{font-size:1.75em;line-height:110%;font-weight:500}
.site-title a{color:#fff}
.site-title a:hover{color:#fff}
.site-description{display:none}
.search-toggle{display:block;font-size:22px;color:rgba(255,255,255,0.7);position:absolute;bottom:-4px;right:0}
.search-toggle:hover,.search-toggle.active{color:#fff;cursor:pointer}
.header-search{background:#fff;border-bottom:1px solid #eee}
.header-search .search-field{display:block;width:100%;margin:0;padding:45px 0;border:none;background:none;font-family:'Open Sans',sans-serif;font-size:1.5em;font-style:italic;position:relative;color:#333}
.header-search .search-field:focus{outline:none}
.main-menu{margin:0 48px 0 33.33%;float:none}
.main-menu li{position:relative}
.main-menu > li{float:left;margin-right:30px}
.main-menu > li > a{display:block;font-weight:400;color:#fff}
.main-menu > li.menu-item-has-children > a{padding-right:14px}
.main-menu > li.menu-item-has-children:after{content:"";display:block;border:4px solid transparent;border-top-color:rgba(255,255,255,0.7);position:absolute;top:50%;margin-top:-2px;right:0}
.main-menu a:hover,.main-menu > li.menu-item-has-children:hover > a,.main-menu .current_menu_item > a,.main-menu .current_page_item > a{color:#fff}
.main-menu > li.menu-item-has-children:hover:after{border-top-color:#fff}
.main-menu ul{position:absolute;z-index:10000;display:block;left:-9999px;padding-top:15px;top:30px;opacity:0;z-index:999;-webkit-transition:opacity .3s ease-in-out,top .3s ease-in-out;-moz-transition:opacity .3s ease-in-out,top .3s ease-in-out;-ms-transition:opacity .3s ease-in-out,top .3s ease-in-out;-o-transition:opacity .3s ease-in-out,top .3s ease-in-out;transition:opacity .3s ease-in-out,top .3s ease-in-out}
.main-menu > li > ul:before{content:"";display:block;position:absolute;z-index:1000;top:1px;left:50%;margin-left:-7px;border:7px solid transparent;border-bottom-color:#222}
.main-menu ul .menu-item-has-children::after{content:"";display:block;border:5px solid transparent;border-left-color:rgba(255,255,255,0.4);position:absolute;z-index:1001;right:10px;top:50%;margin-top:-5px}
.main-menu ul .menu-item-has-children:hover::after{border-left-color:#222;right:-10px}
.main-menu ul li{width:220px;background:#222;text-align:center}
.main-menu ul li:first-child{border-radius:3px 3px 0 0}
.main-menu ul li:last-child{border-radius:0 0 3px 3px}
.main-menu ul a{display:block;padding:20px;line-height:130%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;border-bottom:1px solid rgba(255,255,255,0.075);font-size:1rem;font-style:italic;color:#fff}
.main-menu ul a:hover{color:#0093C2}
.main-menu ul > li:last-child > a{border-bottom-width:0}
.main-menu > li:hover > ul{opacity:1;left:50%;margin-left:-110px;top:20px}
.main-menu ul ul{padding-top:0;top:10px}
.main-menu ul ul li{background:#333}
.main-menu ul ul .menu-item-has-children:hover::after{border-left-color:#333}
.main-menu ul ul ul li{background:#444}
.main-menu ul ul ul .menu-item-has-children:hover::after{border-left-color:#444}
.main-menu ul ul ul ul li{background:#555}
.main-menu ul ul ul ul .menu-item-has-children:hover::after{border-left-color:#555}
.main-menu ul ul ul ul ul li{background:#666}
.main-menu ul ul ul ul ul .menu-item-has-children:hover::after{border-left-color:#666}
.main-menu li > ul > li:hover > ul{opacity:1;top:0;left:220px;margin-left:0}
@media (max-width: 930px) {
.header{padding:40px 0}
.site-title{width:100%;padding-right:64px;position:static}
.main-menu,.search-toggle{display:none}
.nav-toggle{display:block;width:44px;height:44px;border-radius:99px;border:2px solid #fff;position:absolute;top:50%;margin-top:-22px;right:0}
.nav-toggle .bar{width:20px;height:2px;background:#fff;border-radius:1px;position:absolute;left:50%;margin-left:-10px;top:50%;-webkit-transition:opacity .2s linear 0.2s,margin .2s linear 0.2s,-webkit-transform .2s linear 0;-moz-transition:opacity .2s linear 0.2s,margin .2s linear 0.2s,-moz-transform .2s linear 0;-o-transition:opacity .2s linear 0.2s,margin .2s linear 0.2s,-o-transform .2s linear 0;transition:opacity .2s linear 0.2s,margin .2s linear 0.2s,transform .2s linear 0}
.nav-toggle .bar:nth-child(1){margin-top:-7px}
.nav-toggle .bar:nth-child(2){margin-top:-1px}
.nav-toggle .bar:nth-child(3){margin-top:5px}
.nav-toggle:hover{cursor:pointer}
.nav-toggle.active{background:#fff}
.nav-toggle.active .bar{background:#00A0D7;-webkit-transition:opacity .2s linear 0s,margin .2s linear 0s,-webkit-transform .2s linear .2s;-moz-transition:opacity .2s linear 0s,margin .2s linear 0s,-moz-transform .2s linear .2s;-o-transition:opacity .2s linear 0s,margin .2s linear 0s,-o-transform .2s linear .2s;transition:opacity .2s linear 0s,margin .2s linear 0s,transform .2s linear .2s}
.nav-toggle.active .bar:nth-child(1),.nav-toggle.active .bar:nth-child(3){margin-top:-1px}
.nav-toggle.active .bar:nth-child(1){-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg)}
.nav-toggle.active .bar:nth-child(2){-webkit-opacity:0;-moz-opacity:0;opacity:0}
.nav-toggle.active .bar:nth-child(3){-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);transform:rotate(-45deg)}
.nav-toggle:hover{cursor:pointer}
.mobile-menu{padding:35px 7%;position:relative;background:#333}
.mobile-menu li{margin-top:10px}
.mobile-menu > li:first-child{margin-top:0}
.mobile-menu .sub-menu{margin-left:30px}
.mobile-menu a{display:block;padding:10px 0;font-size:1em;color:#888}
.mobile-menu a:hover,.mobile-menu .current-menu-item a{color:#fff}
.mobile-search{position:relative;background:#444}
.mobile-search .search-field{width:93%;padding:35px 60px 35px 7%;margin:0;background:none;border:none;font-family:'Open Sans',sans-serif;font-size:1em;font-style:italic;color:#fff}
.mobile-search .search-field:focus{outline:none}
.mobile-search .search-button{display:block;padding:10px;font-size:22px;color:#999;position:absolute;top:50%;margin-top:-23px;right:7%}
.mobile-search .search-button:hover{cursor:pointer;color:#fff}
}
@media (max-width: 600px) {
.header {padding:25px 0}
.site-title{margin-right:60px;font-size:1.5em}
.nav-toggle{width:40px;height:40px;margin-top:-20px}
.mobile-menu{padding:25px 7%}
.mobile-menu li{margin-top:5px}
.mobile-search .search-field{padding:25px 60px 25px 7%}
}
@media (max-width:320px) {
.site-title{font-size:1.35em;position:relative;left:auto;bottom:-1px}
}
@media print {
.header {display:none!important}
}


Código Html 


<div class='header section'>
<div class='cover bg-accent'/>
<div class='section-inner'>
<b:section class='siteheadersec' id='siteheadersec' maxwidgets='1' showaddelement='no'>
  <b:widget id='Header1' locked='true' title='Simple Trend BT (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'>325</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;REPLACE&quot;'>
      <!--Show just the image, no text-->
      <div id='header-inner'>
        <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;padding-left:0px;padding-top:0px;'/>
        </a>
      </div>
    <b:else/>
      <!--
      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.
      -->
      <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;px;&quot;                      + &quot;_height: &quot; + data:height + &quot;px;&quot;                      + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>
        <div class='titlewrapper' style='background: transparent'>
          <h1 class='site-title' style='background: transparent; border-width: 0px'>
            <b:include name='title'/>
          </h1>
        </div>
        <b:include name='description'/>
      </div>
    </b:if>
  <b:else/>
    <!--No header image -->
    <div id='header-inner'>
      <div class='titlewrapper'>
        <h1 class='site-title'>
          <b:include name='title'/>
        </h1>
      </div>
      <b:include name='description'/>
    </div>
  </b:if>
</b:includable>
    <b:includable id='description'>
    <h2 class='site-description'><data:description/></h2>
</b:includable>
    <b:includable id='title'>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:includable>
  </b:widget>
</b:section>
<a class='search-toggle' href='#' title='Click to view the search field'><span class='fa fw fa-search'/></a>
<a class='nav-toggle hidden' href='#' title='Click to view the navigation'>
<div class='bars'><div class='bar'/><div class='bar'/><div class='bar'/></div>
</a> <!-- /nav-toggle -->
<ul class='main-menu'>
 <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
   <li><a href='/p/about.html'>About</a></li>
   <li><a href='/p/kontak.html'>Kontak</a></li>
   <li><a href='/p/disclaimer.html'>Disclaimer</a></li>
<li class='menu-item-has-children'><a href='#'>Categories</a>
 <ul class='sub-menu'>
 <li><a href='/search/label/Blogging?&amp;max-results=5'>Blogging</a></li>
 <li><a href='/search/label/SE)?&amp;max-results=5'>SEO</a></li>
 <li><a href='/search/label/Template?&amp;max-results=5'>Templates</a></li>
 <li><a href='/search/label/Widget?&amp;max-results=5'>Widget</a></li>
 <li><a href='/search/label/AdSense?&amp;max-results=5'>AdSense</a></li>
</ul>
</li>
</ul>
<div class='clear'/>
</div> <!-- /section-inner -->
</div> <!-- /header -->
<form action='/search' class='header-search section hidden' method='get' role='search'>
<div class='section-inner'>
<input class='search-field' name='q' placeholder='Type and press enter' type='search'/>
</div> <!-- /section-inner -->
</form> <!-- /header-search -->
<ul class='mobile-menu hidden'>
 <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
   <li><a href='/p/about.html'>About</a></li>
   <li><a href='/p/kontak.html'>Kontak</a></li>
   <li><a href='/p/disclaimer.html'>Disclaimer</a></li>
<li class='menu-item-has-children'><a href='#'>Categories</a>
 <ul class='sub-menu'>
 <li><a href='/search/label/Blogging?&amp;max-results=5'>Blogging</a></li>
 <li><a href='/search/label/SE)?&amp;max-results=5'>SEO</a></li>
 <li><a href='/search/label/Template?&amp;max-results=5'>Templates</a></li>
 <li><a href='/search/label/Widget?&amp;max-results=5'>Widget</a></li>
 <li><a href='/search/label/AdSense?&amp;max-results=5'>AdSense</a></li>
  </ul></li>
</ul> <!-- /mobile-menu -->
<form action='/search' class='mobile-search section hidden' method='get' role='search'>
<input class='search-field' name='q' placeholder='Type and press enter' type='search'/>
<a class='search-button' onclick='document.getElementById(&apos;search-form&apos;).submit(); return false;'><span class='fa fw fa-search'/></a>
</form> <!-- /mobile-search -->

JavaScript pode ser adicionado acima de </head> ou </body>

<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function($) {
 // Dropdown menus on touch devices
 $( '.main-menu li:has(ul)' ).doubleTapToGo();
 // Toggle mobile menu and mobile search
 $(".nav-toggle").on("click", function(){   $(this).toggleClass("active");
  $(".mobile-menu").slideToggle('300');
  $(".mobile-search").slideToggle('300');
  return false;
 });
 // Toggle header search
 $(".search-toggle").on("click", function(){   $(this).toggleClass("active");
  $(".header-search").slideToggle();
  if ($(this).hasClass("active")) {
   $(".header-search .search-field").focus();
  } else {
   $(".header-search .search-field").blur();
  }
  return false;
 });
   // Hide mobile > 930 and header search < 930
 $(window).resize(function() {
  if ($(window).width() > 930) {
   $(".nav-toggle").removeClass("active");
   $(".mobile-menu").hide();
   $(".mobile-search").hide();
  }
  if ($(window).width() < 930) {
   $(".search-toggle").removeClass("active");
   $(".header-search").hide();
  }
 });
 //]]>
</script>


Salve e pronto.




Click to comment