Menu responsivo para Wordpress

[Wagner C. 1]

Olá, tenho um tema em Wordpress que quero modificá-lo para deixa ele responsivo.

 

Já fiz boa parte do serviço, mas o menu é que esta dando trabalho. Vendo alguns tutoriais na internet tive dificuldades de adaptar o uso das classes desse tutorial por exemplo: http://webdesign.tutsplus.com/tutorials/big-menus-small-screens-responsive-multi-level-navigation--webdesign-8452

 

 

Como poderia modificar meu menu atual (segue código abaixo) para abrir em uma lista deslizante do tipo mostrar/esconder, como a do link acima. Quero usar esse efeito com a Media Querie de width maximo de 480px.

 

Segue código CSS

/* Menu */
.nav_menu{
	width:930px;
	height:25px;
	background:url(img/back_menu.png);
	position:absolute;
	margin-top:120px;
	margin-left:5px;
	border-radius:10px;
	border:1px dashed #FFFFFF;
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	font-weight:bold;
}
.nav_menu ul{
	padding:0;
    margin:0;
}
.nav_menu li{
	list-style:none;
	padding:9px;
	padding-left:12px;
	line-height:25px;
	display:inline;
	position:relative;
	z-index:2;
}
.nav_menu li a{
	text-decoration:none;
	color:#FFFFFF;
	z-index:2;
}
.nav_menu li ul{
	display:none;
	position:absolute;
	left: 0;
	z-index:2;
}
.nav_menu li ul li{
	width:200px;
	padding:0;
	z-index:2;
}
.nav_menu li ul li a{
	background:url(img/back_menu.png);
	display:block;
	width:200px;
	padding-left:10px;
	padding-top:5px;
	padding-bottom:5px;
	border-bottom:1px dashed #FFFFFF;
	z-index:2;
}
.nav_menu li ul li a:hover{
	background:#CCC;
	color:#990000;
	z-index:2;
}
.nav_menu li:hover ul, .nav_menu li.over ul{
	display:block;
	color:#FFF;
	z-index:2;
}
.nav_menu li:hover ul ul{
	display:none;
}
.nav_menu li ul li:hover ul, .nav_menu li ul li.over ul{
	display:block;
	top:-36px;
	z-index:2;
}
.nav_menu li ul li ul li{
	padding-left:10px;
	padding-top:0px;
    margin-left:200px;
	display:block;
	z-index:2;
}
.nav_menu li ul li ul li a:hover{
	background:#CCCCCC;
	display:block;
	border-bottom:1px dashed #FFFFFF;
	z-index:2;
}

O meu HTML está assim...

<div class="nav_menu">
    <?php wp_nav_menu(array( 'theme_location' => 'primary' , 'menu' => 'Menu Principal')); ?>
</div>

Desde já agradeço a quem ajudar.

[emilyoly 1]

No meu tema eu fiz o seguinte, primeiro temos que ter uma função js para mostrar e esconder o menu, criei um novo arquivo Javascript com o seguinte código:

//Esconde e Mostra o Menu
$(document).ready(function() {
    $('.three-line').click(function(){
  $("nav ul").toggle();
    });
});

Onde está .theree-line é a classe do botão do menu que irar mostrar e esconder.

No arquivo header onde se encontra o menu o código tem que estar assim:

<nav id="menuu">
	<?php 
	wp_nav_menu( 
	array( 
	'theme_location' => 'menu_topo', 
	'container_id' => 'nav',
	'menu_class' => 'nav ul li', 
	) ); 
	?>
				
<a href="javascript:void(0);" onClick="javascript:funcao1();" class="three-line">MENU</a>
</nav>

O link nesse código seria o botão que ira mostrar e esconder o menu.

 

No css a classe .three-line que estar com o display none:

nav {}
nav ul li {float: left;}
nav ul li a {display: block;color: #fff;padding-right: 10px;padding-left:10px;}
nav ul li a:hover {background: gray;}
.three-line {position: absolute; top: 1px; right: 10px;color: gray;font-size: 30px;display: none;} 

E no media queries devera ficar assim:

@media screen and (max-width:480px){
	/*Menu*/
	nav ul {display: none;padding-top: 35px;text-align: center;}
	nav ul li {float: none;border-bottom: 1px solid #fff;background:gray}
	nav ul li:last-child { border-bottom: 0;}
	.three-line {display: block;}
}

Não esquecer de chamar os scripts no header antes da tag head :

<script src="<?php bloginfo( 'template_directory' ); ?>/js/scripts.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
	

E não esquecer de chamar a viewport também, antes da tag title adicione:

<meta name="viewport" content="width=device-width,initial-scale=1"> 

Sendo o scripts.js , o arquivo que você criou no começo.

Porém tem um problema, essa nao é a forma correta de chamar um arquivo js, funciona, mas nao é a maneira correta. Eu nao sei a maneira correta também rs'

 

E para ter um menu com o ícone de três linhas, só adicionar no código , ao invés da palavra MENU colocar ☰ , mas esse código não funciona em alguns aparelhos, e eu também nao sei como posso resolver isso. Então você pode colocar uma imagem para substituir e talz.

 

Espero ter ajudado.

[Wagner C. 1]

Olá emilyoly

 

 

Consegui fazer o botão acionar certinho. Agora preciso ajeitar o CSS para ficar com a aparência que preciso.

 

Deixa te fazer outro pergunta... como posso tratar os sub menus?