Menu responsive fast loading Blogger

- 14:18:00
menu-customized-terbaik-2016

menu-fast-loading-membuat-terbaik-blogger

Menu responsive fast loading blogger é um menu perfeito para qualquer tipo de blog isso é responsive preparado para dispositivos moveis onde pode ser visualizado como mostra a figura acima o melhor efeito é que ele tem o Home em destaque vermelho com uma linha abaixo dos botões então se torna mais atraente para qualquer template sem contar seu carregamento rápido então se preferir usar em seu blog siga o tutorial abaixo.


Como instalar no seu Blogger 

Faça login no blogger em menu escolha 
modelo >> então editar>> HTML/JavaScript 

Código CSS.

com as teclas combinadas CTRL+F busque por ]]></b:skin> 


#menu-wrapper{background:#4b3f57;height:50px;width:100%;position:relative;}#menu1{background:#4b3f57;color:#fff;height:50px;}#menu1 {border-bottom: 4px solid #D83C3C;}#menu1 ul,#menu1 li{margin:0;padding:0;list-style:none;}#menu1 ul{height:50px}#menu1 li{float:left;display:inline;position:relative;font-family:&#39;Open Sans Condensed&#39;,Arial;font-size:15px;font-weight:600;text-transform:uppercase;}#menu1 li a{color:#fff;}#menu1 a{display:block;line-height:50px;padding:0 10px;text-decoration:none;color:#fff;transition:all 0.2s ease-in-out;}#menu1 li:hover &gt; a{background:#3f354a;color:#fff;}#menu1 li a:hover{color:#fff;}#menu1 li:last-child a{border-right:none;}#menu1 input{display:none;margin:0;padding:0;width:80px;height:50px;opacity:0;cursor:pointer}#menu1 label{font-family:Arial;font-size:30px;font-weight:700;text-transform:uppercase;display:none;width:35px;height:51px;line-height:51px;text-align:center}#menu1 label span{font-size:13px;position:absolute;left:35px}#menu1 ul.menus{visibility:hidden;opacity:0;height:auto;overflow:hidden;width:166px;background:#3f354a;position:absolute;z-index:99;display:none;color:#fff;transition:all 0.3s ease-in-out;}#menu1 li &gt; ul.menus{transition:all 0.3s linear;}#menu1 li:hover &gt; ul.menus{visibility:visible;opacity:1;display:block;-moz-animation: fadeInUp .3s ease-in-out;-webkit-animation: fadeInUp .3s ease-in-out;animation: fadeInUp .3s ease-in-out;transition:all 0.3s linear;}#menu1 a.ai,#menu1 a.trigger2{padding:0 27px 0 14px;transition:all 0.3s linear;}#menu1 li:hover &gt; a.ai,#menu1 a.ai:hover{background:#3f354a;color:#fff}#menu1 li &gt; a.ai::after {content:&quot;&quot;;margin:0 auto;background:url(&#39;http://2.bp.blogspot.com/-mHVCs4K3A84/U9vKbpqhSmI/AAAAAAAAE5E/y7Dp7HzmenA/s1600/arrow.png&#39;) no-repeat;width:10px;height:10px;line-height:50px;position:absolute;top:20px;right:10px;transition:all 0.3s linear;}#menu1 li:hover &gt; a.ai::after {content:&quot;&quot;;margin:0 auto;background:url(&#39;http://3.bp.blogspot.com/-ihlfaVl0yFM/U9vMSJa-tLI/AAAAAAAAE5Q/9SRXYxdvmmI/s1600/arrowhover.png&#39;) no-repeat;width:10px;height:10px;line-height:50px;position:absolute;top:20px;right:10px;transition:all 0.3s linear;}#menu1 ul.menus a{background:#3f354a;color:#fff;border-bottom:1px solid #3a3144;transition:all .3s linear;}#menu1 ul.menus a:hover{background:#322a3b;color:#fff;transition:all .1s linear;}#menu1 ul.menus li{display:block;width:100%;font-family:&#39;Open Sans&#39;;font-size:13px;font-weight:400;text-transform:none;}#menu1 ul.menus li:hover{width:100%;}#menu1 ul.menus li:last-child {border-bottom:none;}#menu1 ul.menus li:first-child a{border-top:none;}#menu1 ul.menus li:last-child a{border-bottom:none;}#menu1 ul.menus li:hover a {background:#322a3b;color:#fff;}#menu1 .homers a{background:#D83C3C;color:#fff;}#menu1 .homers a:hover{background:#D83C3C;color:#fff;}#menu1 .homers1 a{box-shadow:inset 0 -4px 0 0 #D83C3C;color:#fff;}#menu1 .homers1 a:hover{box-shadow:inset 0 -54px 0 0 #D83C3C;color:#fff;}
@media screen and (max-width:960px) {#menu1{position:relative;background:#4b3f57;color:#fff;}#menu1 ul{background:#3f354a;position:absolute;top:100%;right:0;left:0;z-index:5;height:auto;display:none;}#menu1 ul.menus{width:100%;position:static;}#menu1 li{display:block;width:100%;text-align:left;}#menu1 a{border:none;}#menu1 li a{color:#fff;}#menu1 li a:hover{background:#D83C3C;color:#fff}#menu1 li:hover{background:#D83C3C;color:#fff;}#menu1 li:hover &gt; a.ai,#menu1 a.ai:hover{background:#D83C3C;color:#fff;}#menu1 li:hover &gt; a,#menu1 li a:hover{background:#D83C3C;color:#fff;box-shadow:none;transition: .3s linear;}#menu1 ul.menus a{background:#3f354a;color:#fff;border-bottom:none;}#menu1 ul.menus a:hover{background:#D83C3C;color:#fff;border-left:none;}#menu1 ul.menus li{background:#3f354a;color:#fff;border-bottom:none;}#menu1 ul.menus li:hover{background:#D83C3C;color:#fff;border-left:none;}#menu1 ul.menus li a{background:#3f354a;color:#fff;border-bottom:none;}#menu1 ul.menus li a:hover{background:#D83C3C;color:#fff;border-left:none;}#menu1 input,#menu1 label{display:inline-block;position:absolute;right:0;top:0;}#menu1 input:after,#menu1 label:after {content:&quot;&quot;;background:url(&#39;http://1.bp.blogspot.com/-P2RRijDirXA/U8ftwSomm6I/AAAAAAAAEbo/tLU4c5dk2K4/s1600/nav-icon.png&#39;) no-repeat; width:30px;height:30px;display:inline-block;position:absolute;right:15px;top:17px;}#menu1 input{z-index:4}#menu1 input:checked + label{color:#fff;font-weight:700}#menu1 input:checked ~ ul{display:block}#menu1 .homers a{background:transparent;color:#fff;}#menu1 .homers a:hover{background:#D83C3C;color:#fff;}#footer-widgetfix {width:100%;overflow:hidden;}#menu1 li:hover &gt; a.ai::after{content:&quot;&quot;;width:6px;height:6px;border:2px solid #fff;border-right-width:0;border-top-width:0;transform:rotate(320deg);-webkit-transform:rotate(320deg);-moz-transform:rotate(320deg);-o-transform:rotate(320deg);-ms-
transform:rotate(320deg);position:absolute;top:19px;right:12px;transition:all .3s linear;}}

Agora vamos ao código html 

Então sob o código <div id='header'...> mantenha o código sobre isso 

<nav id='menu1'>
<input type='checkbox'/>
<label><span>CB</span></label>
<ul>
<li class='homers'><a href='/'><i class='fa fa-home fa-2x fa-fw'></i></a></li>
<li><a href='#'>Drop Down1</a>
<ul class='menus'>
<li><a href='#'>Tab 1</a></li>
<li><a href='#'>Tab 2</a></li>
<li><a href='#'>Tab 3</a></li>
</ul>
</li>
<li><a href='#'>Seo</a></li>
<li><a href='#'>Template</a></li>
<li><a href='#'>Widget</a></li>
<li><a href='#'>Social Media</a></li>
</ul>
<a href='#' id='pull'>MENU</a></nav>

personalização # modifique isso por o link que deseja abrir.

salve e pronto  

Créditos:Contoh




.


EmoticonEmoticon

 

Start typing and press Enter to search