Intento hacer funcionar un menu para móviles.
Estoy bastante perdido respeto al Js.
Por eso, os voy a poner directamente los códigos (Js,css,html) y algunos comentarios.
Empezamos con el html:
Código HTML:
<ul id="mb_menu" > <li> <a class="" href="blog.html">|B l o g|</a> </li> <li> <a class="" href="password.html">|A r c h i v e| </a> </li> <li> <a class="" href="bio.html">|B i o - C o n t a c t|</a> </li> <li> <a class="" href="corporate.html">|C o r p o r a t e|</a> </li> <li> <a class="" href="stories.html">|S t o r i e s|</a> </li> <li> <a class="active" href="index.html">|H o m e|</a> </li> </ul> <div class="mobile_menu"> <select id="mobile_select"> </select> </div>
Código Javascript:
Ver original
$(document).ready(function() { $('.mb_menu').find('li:has(ul)').addClass('has-menu'); $('.mb_menu').find('li').each(function(){ cur_link = $(this).children("a"); if (!$(this).parent('ul').hasClass('sub-menu')) { $('#mobile_select').append('<option value='+cur_link.attr("href")+'>'+cur_link.text()+'</option>'); } else if (!$(this).parent('ul').hasClass('level1')) { $('#mobile_select').append('<option value='+cur_link.attr("href") +'> -- '+cur_link.text()+'</option>'); } else { $('#mobile_select').append('<option value='+cur_link.attr("href") +'> - '+cur_link.text()+'</option>'); } }); //$('.sub-menu').animate({'opacity' : '0'},1); $('#mobile_select').change(function(){ window.location.hash = $(this).find select_val = $(this).val(); if (select_val.substr(0,1) == '#') { window.location.hash = select_val; } }); })(jQuery);
Y para terminar el css:
.
Código CSS:
Ver original
mobile_menu { display:block!important; height:24px; position:fixed; bottom:0px; background:#FFF; left:0px; width:100%} .mobile_select { width:100%; height:24px;} .mobile_select option { text-transform:uppercase}
Si al menu (en html) le añado class="menu" después del ul id="mb_menu", me sale el menu pero no me funciona los enlace y el menu de la página normal.
Me gustaría que funcionará con el ul id="mb_menu" únicamente pero no sé que tengo que modificar en el js.
Gracias a todos