Menu Vertical para diseño liquido!

[davy0324]

hola sucede que tengo un menu vertical en acordeon y estoy haciendo un diseño liquido con la herramienta de Dreamweaver el caso es que en tamaño de ipads y móviles quisiera que se comprima en una linea y que al hacer clic se desplegara con la intención de ahorrar espacio como en las siguientes capturas:

[URL="http://prntscr.com/1dm174"]http://prntscr.com/1dm174[/URL]
[URL="http://prntscr.com/1dm181"]http://prntscr.com/1dm181[/URL]

el menu se puede descargar del link de abajo, yo se copiar codigos basicos pero esto ya es muy avanzado para mi y por eso hago este tema

[URL="http://tympanus.net/codrops/2013/05/08/responsive-retina-ready-menu/"]http://tympanus.net/codrops/2013/05/08/responsive-retina-ready-menu/[/URL]


aqui dejo el codigo de mi html con el js

Código HTML:

<div class="menu">
<ul class="navegador">
  
  <li><a href="#" class="desplegable" title="FASHION"><span>FASHION</span></a>
       <ul class="subnavegador">
	  <li><a href="#" title="Entre Rios">Entre R&iacute;os</a></li>
	  <li><a href="#" title="Arata">Arata</a></li>			
      </ul>
  </li>	
  <li><a href="#" class="desplegable" title="PORTRAIT"><span>PORTRAIT</span></a>			
      <ul class="subnavegador">
	  <li><a href="#" title="Portfolio">Portfolio One</a></li>
      </ul>
  </li>
  
  <li><a href="#" class="desplegable" title="EDITORIAL"><span>EDITORIAL</span></a>			
      <ul class="subnavegador">
	  <li><a href="#" title="Leo">Leo Espinosa/Wabi Sabi Lab</a></li>
      <li><a href="#" title="Juan">Juan/Wabi Sabi Lab</a></li>
      <li><a href="#" title="Believe">Believe/WSL</a></li>
      <li><a href="#" title="Antonio">Antonio Yemail/WSL</a></li>
      </ul>
  </li>
  
  
  <li class="blog"><a href="http://marcelcapato.tumblr.com/" title="Blog" target="_blank">Blog</a></li>
  <li class="contact"><a href="contact.php" title="Contact">Contact</a></li>
</ul>
</div> <!--end .menu --> 

CODIGO JS

Código:

 $(document).ready(function(){ 
    $("ul.subnavegador").not('.selected').hide();
    $("a.desplegable").mouseover(function(e){    
    var desplegable = $(this).parent().find("ul.subnavegador");
      $('.desplegable').parent().find("ul.subnavegador").not(desplegable).slideUp('slow');
      desplegable.slideToggle('normal');
      e.preventDefault();
    })
 });