Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 284
Nome: Vinícius Muniz
Descrição do site: As últimas notícias sobre "Harry Potter" em um só lugar.
Sexo: Masculino
Localização: Vargem Grande Paulista, SP
Contato:

Menu responsivo não é exibido corretamente

20-06-2016 20:30

Minha primeira dúvida sobre CSS! :)

Eu gostaria de saber como incluo o menu "#social_networks" junto ao menu principal. Com o código abaixo, o primeiro menu fica deslocado. Usando o atributo "margin-top:-37", por exemplo, a barra social é exibida corretamente, porém, ao deixá-lo responsivo, o menu não fica agradável visualmente.

<meta name="viewport" content="width=device-width, initial-scale=1"></meta> <style> .itens,ul,li,a{margin:0;padding:0}a{text-decoration:none} .barra_topo{width:100%;margin:0;padding:0;background: #191919;border-bottom: 2px #0E3E3B solid;} .toggleMenu{display:none;background:#666;padding:10px 15px;color:#fff} .itens{list-style:none;*zoom: 1;background: #191919;border-bottom: 2px #0E3E3B solid} .itens a:hover{background:#131313;text-decoration:underline;text-transform:uppercase;border-top: 1px solid #206820;} .itens:before,.itens:after{content:" ";display:table} .itens:after{clear:both} .itens ul{list-style:none;width:9em} .itens a{padding:10px 15px;color:#fff; text-transform: uppercase; ;} .itens li{position:relative} .itens>li{float:left;border-top:1px solid #104336} .itens>li>.parent{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAFCAYAAACXU8ZrAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADFJREFUeNpiPHTo0H8GAoAJiBkJqGFkgjFwKQCbZGtry4BDISOydQxYFMIVgOQAAgwAptMFfESjI+0AAAAASUVORK5CYII=);background-repeat:no-repeat;background-position:right} .itens>li>a{display:block} .itens li ul{position:absolute;left:-9999px} .itens>li.hover>ul{left:0}.itens li li.hover ul{left:100%;top:0} .itens li li a{display:block;background:#1d7a62;position:relative;z-index:100;border-top:1px solid #175e4c} .itens li li li a{background:#249578;z-index:200;border-top:1px solid #1d7a62} @media screen and (max-width:768px){ .active{display:block}.itens>li{float:none}.itens>li>.parent{background-position:95% 50%}.itens li li .parent{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAFCAYAAACXU8ZrAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADFJREFUeNpiPHTo0H8GAoAJiBkJqGFkgjFwKQCbZGtry4BDISOydQxYFMIVgOQAAgwAptMFfESjI+0AAAAASUVORK5CYII=);background-repeat:no-repeat;background-position:95% 50%}.itens ul{display:block;width:100%}.itens >li.hover>ul,.itens li li.hover ul{position:static} } </style> <style> #social_networks{background:#191919;display:block;float:right;text-align:right;height:35px;border-bottom: 2px #0E3E3B solid;width: 200px;}#social_networks ul{display:block;height:3px;margin:0}#social_networks li{display:inline-block;float:left;width:32px;height:32px;opacity:0.3;background-position:left top;-webkit-transition:All .2s ease;-moz-transition:All .2s ease;-o-transition:All .2s ease}#social_networks li:hover{opacity:1;background-position:left -32px}#social_networks li a span{display:none}#social_networks li.facebook{background-image:url(http://3.bp.blogspot.com/-vYaL46YQXo4/UtWaIG0s-EI/AAAAAAAAO48/E-a7_St4DJQ/s64/icone_facebook.png)}#social_networks li.twitter{background-image:url(http://2.bp.blogspot.com/-0XWfnT2sFZ4/UtWaJNZsCfI/AAAAAAAAO5Y/DZTQwIH3CQU/s64/icone_twitter.png)}#social_networks li.googleplus{background-image:url(http://1.bp.blogspot.com/-tMFl5PO-GLE/UtWaIMoi-2I/AAAAAAAAO5A/tQkuA2YiL4E/s64/icone_googleplus.png)}#social_networks li.youtube{background-image:url(http://3.bp.blogspot.com/-3dL6OI2x85I/UtWaJm9JvII/AAAAAAAAO5U/f21jHAzDqKA/s64/icone_youtube.png)}#social_networks li.orkut{background-image:url(http://4.bp.blogspot.com/-PLkujYLT_R0/UtWaIINhk8I/AAAAAAAAO5E/VI393NDpeEw/s64/icone_orkut.png)}#social_networks li.rss{background-image:url(http://1.bp.blogspot.com/-K2eBQIgk3m8/UtX3QPXgUJI/AAAAAAAAO6Q/B9A9n7VQvXQ/s64/icone_rss.png)}#social_networks li a{display:inline-block;width:32px;height:32px} </style> <div class="barra_topo"> <a class="toggleMenu" href="#">Menu</a> <ul class="itens"> <li><a href=''>Home</a></li> <li><a href='/'>Contato</a></li> <li><a href='/'>Pesquisa</a></li> <li> <a href="#">Outerwear</a> <ul> <li> <a href="#">Womens</a> <ul> <li><a href="#">Winter</a></li> <li><a href="#">Spring/Fall</a></li> </ul> </li> <li> <a href="#">Mens</a> <ul> <li><a href="#">Winter</a></li> <li><a href="#">Spring/Fall</a></li> </ul> </li> </ul> </li> </ul> <ul id="social_networks"> <li class="facebook"><a alt="Facebook" href="/" target="_blank" title="Facebook"></a></li> <li class="twitter"><a alt="Siga-nos!" href="/" target="_blank" title="Siga-nos!"></a></li> <li class="googleplus"><a alt="Google+" href="/" target="_blank" title="Google+"></a></li> <li class="youtube"><a alt="Assista aos nossos vídeos no Youtube" href="/" target="_blank"></a></li> <li class="orkut"><a href="/"></a></li> <li class="rss"><a alt="Feed/RSS" href="/" target="_blank" title="Feed/RSS"></a></li> </ul> </div> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script type="text/javascript">var ww=document.body.clientWidth;$(document).ready(function(){$(".itens li a").each(function(){if($(this).next().length>0){$(this).addClass("parent");};}) $(".toggleMenu").click(function(e){e.preventDefault();$(this).toggleClass("active");$(".itens").toggle();});adjustMenu();}) $(window).bind('resize orientationchange',function(){ww=document.body.clientWidth;adjustMenu();});var adjustMenu=function(){if(ww<768){$(".toggleMenu").css("display","inline-block");if(!$(".toggleMenu").hasClass("active")){$(".itens").hide();}else{$(".itens").show();}$(".itens li").unbind('mouseenter mouseleave');$(".itens li a.parent").unbind('click').bind('click',function(e){e.preventDefault();$(this).parent("li").toggleClass("hover");});}else if(ww>=768){$(".toggleMenu").css("display","none");$(".itens").show();$(".itens li").removeClass("hover");$(".itens li a").unbind('click');$(".itens li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave',function(){$(this).toggleClass('hover');});}}</script>

Desde já, agradeço a atenção!
0
As melhores notícias sobre "Harry Potter" organizadas em um só lugar. Bastidores, fotos e vídeos das gravações de "Harry Potter e as Relíquias da Morte".

Ordem da Fênix Brasileira
http://www.ordemdafenixbrasileira.com/
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17735
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Menu responsivo não é exibido corretamente

20-06-2016 20:46

Vendo esse menu no navegador o menu social fica uma linha abaixo do menu principal. Você quer subir esse menu quando estiver sendo visto pelo navegador?

Se for isso você tem quer fazer uma condicional só para celular. Substitua a classe #social_networks por essa abaixo

#social_networks{margin-top:-37;background:#191919;display:block;float:right;text-align:right;height:35px;border-bottom: 2px #0E3E3B solid;width: 200px;} @media screen and (max-width: 600px){ #social_networks{position:relative;top:37px;clear:both;background:#191919;text-align:right;height:35px;border-bottom: 2px #0E3E3B solid;width: 200px;} }

0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 284
Nome: Vinícius Muniz
Descrição do site: As últimas notícias sobre "Harry Potter" em um só lugar.
Sexo: Masculino
Localização: Vargem Grande Paulista, SP
Contato:

Re: Menu responsivo não é exibido corretamente

27-06-2016 19:15

Ótima solução! Muito obrigado! :)
1
As melhores notícias sobre "Harry Potter" organizadas em um só lugar. Bastidores, fotos e vídeos das gravações de "Harry Potter e as Relíquias da Morte".

Ordem da Fênix Brasileira
http://www.ordemdafenixbrasileira.com/

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado