domingo, 6 de março de 2016

Menu responsive fast loading Blogger

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




NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

Nenhum comentário:

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner