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();
    })
 });

[memoadian]

pues prácticamente necesitariamos hacerlo nosotros. Y ando muy flojo últimamente.

sería mejor si tuvieras dos menus, uno para pantallas pequeñas y otro para grandes. que es el que tienes. Y aplicar display:none o block según el caso.

También podrias usar tyninav.js para crear un dropdown select a partir de tu menu :)

[davy0324]

Hola! gracias por responder, pues si tu solucion me parece mas rapida de hecho ya la aplique y funciona perfecto! a excepcion de qeu los dos codigos que tengo para los dos menus estan entrando en conflicto si pongo el del menu de pantalla pc el menu de movil deja de funcionar y viceversa

Código HTML:

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> 

Código HTML:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> 

asi que practicamente volvi a quedar en las mismas

[memoadian]

lo estás haciendo con js o con css. Intenta ponerles el estilo con clases distintas

Código HTML:

<ul class="menu">
</ul>
<ul class="menumovil">
</ul>
 

[davy0324]

si tienen diferentes nombres y todo, ahora lo que hice fue usar un menu en css3 para screen de pc, sin js ni nada de eso, para que no hubieran conflicto con los codigos, pero surge el problema de la compatibilidad con IE e,e, no se si haya un codigo en css para restringir ese menu y poner otro exclusivo para ie se puede? D:

[memoadian]

si se puede con hacks, aunque no es lo recomendable. Pero si se puede.

otra cosa sería usar fallbacks, por ejemplo si tu menu tiene opacity:0 o animaciones, trabajarlas para que en IE funcione sin animaciones y con visibility:hidden, por ejemplo.

[davy0324]

Oh! vale muchas gracias ! investigare sobre eso :)

[davy0324]

ahora tengo otro problema con mi galeria de fotos es una sencilla compuesta de un div y un scroll vertical, el problema es que en chrome se ve bien pero en firefox por lo que tengo tantas barras instaladas se corta el div y asi mismo el scroll no hay una forma de arreglar el height para que se ajuste al tamaño del navegdaor, lo hice con la opcion de dreamweaver de cuadricula fluida pero solo se aplica en el width

Código HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<style>

body {
	height: 100%;
	overflow:hidden;
}
#content_1{
	clear: both;
	float: left;
	margin-left: 10%;
	width: 90%;
	display:block;
	height:620px;
	overflow:auto;
	

}
	
img.imagenes {
	width:90%;
	height:auto;
}
</style>
</head>

<body>

 <div class="content" id="content_1">
  
    <img class="imagenes" src="../MARCELCAPATO/imagenes_home/h1.jpg" /><br /><br />
     <img class="imagenes"src="../MARCELCAPATO/imagenes_home/h2.jpg" /><br /><br />
     <img class="imagenes"src="../MARCELCAPATO/imagenes_home/h3.jpg"  /><br /><br />
</body>
</html>