quarta-feira, 9 de dezembro de 2015

Menu responsive drop down blogger



Responsive-drop-down-menu

Hoje vamos apresentar um menu responsive drop down isso é muito elegante além de que é responsive ou seja pode ser muito util no seu blogger quando falamos em dispositivos móveis então se você procura um menu drop down responsive aqui esta um vamos ao passa para adicionar isso a  seu blogger 


Para adicionar menu responsive drop down no blogger 

Primeiro passo é fazer login no seu blogger feito isso 
procure no menu modelo então >>> editar/HTML 
uma vez que você deve usar as teclas combinadas CTRL+F e buscar por  ]]></b:skin>
então copie o código abaixo e cole acima 

#menu-wrapper{background:#4b3f57;height:50px;width:100%;position:relative;}#menu1{background:#4b3f57;color:#fff;height:50px;}#menu1 {border-bottom: 4px solid #f35d5c;}#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:Arial;font-size:14px;font-weight:400;text-transform:capitalize;}#menu1 li a{color:#fff;}#menu1 a{display:block;line-height:50px;padding:0 20px;text-decoration:none;color:#fff;transition:all 0.2s ease-in-out;}#menu1 li:hover > 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:400;text-transform:capitalize ;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 > ul.menus{transition:all 0.3s linear;}#menu1 li:hover > 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 > a.ai,#menu1 a.ai:hover{background:#3f354a;color:#fff}#menu1 li > a.ai::after {content:"";margin:0 auto;background:url('http://2.bp.blogspot.com/-mHVCs4K3A84/U9vKbpqhSmI/AAAAAAAAE5E/y7Dp7HzmenA/s1600/arrow.png') no-repeat;width:10px;height:10px;line-height:50px;position:absolute;top:20px;right:10px;transition:all 0.3s linear;}#menu1 li:hover > a.ai::after {content:"";margin:0 auto;background:url('http://3.bp.blogspot.com/-ihlfaVl0yFM/U9vMSJa-tLI/AAAAAAAAE5Q/9SRXYxdvmmI/s1600/arrowhover.png') 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:'Open Sans';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:#f35d5c;color:#fff;}#menu1 .homers a:hover{background:#d95353;color:#fff;}#menu1 .homers1 a{box-shadow:inset 0 -4px 0 0 #f35d5c;color:#fff;}#menu1 .homers1 a:hover{box-shadow:inset 0 -54px 0 0 #f35d5c;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:#f35d5c;color:#fff}#menu1 li:hover{background:#f35d5c;color:#fff;}#menu1 li:hover > a.ai,#menu1 a.ai:hover{background:#f35d5c;color:#fff;}#menu1 li:hover > a,#menu1 li a:hover{background:#f35d5c;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:#f35d5c;color:#fff;border-left:none;}#menu1 ul.menus li{background:#3f354a;color:#fff;border-bottom:none;}#menu1 ul.menus li:hover{background:#f35d5c;color:#fff;border-left:none;}#menu1 ul.menus li a{background:#3f354a;color:#fff;border-bottom:none;}#menu1 ul.menus li a:hover{background:#f35d5c;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:"";background:url('http://1.bp.blogspot.com/-P2RRijDirXA/U8ftwSomm6I/AAAAAAAAEbo/tLU4c5dk2K4/s1600/nav-icon.png') 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:#f35d5c;color:#fff;}#footer-widgetfix {width:100%;overflow:hidden;}#menu1 li:hover > a.ai::after{content:"";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;}}


Coloque o seguinte código acima de </header> ou <div class = 'main-wrapper> 
<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>

Salve e pronto.


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