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.