Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: basickdagger en 11 Noviembre 2014, 18:32 pm


Título: problema con fixed y menu ul
Publicado por: basickdagger en 11 Noviembre 2014, 18:32 pm
hola estoy aprendiendo a usar las medias querys y tengo el siguiente problema, tengo un contenedor llamado divmenu y un ul llamado menu...

al contenedor le coloco la propiedad fixed para que el usuario al hacer scroll siempre el menu este visible...

el problema es que el menu es demasiado largo y en algunos dispositivos no se puede ver el menu en toda la pantalla, pero al tener la propiedad fixed en el div no me permite ver más allá de la pantalla......

les dejo un ejemplo que edite un poco para ver si alguien puede guiarme...

si redimensionan el navegador sabran a lo que me refiero....
saludos

Código
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2.  
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml" lang="es">
  6.  
  7.     <link href='http://fonts.googleapis.com/css?family=Open+Sans:400' rel='stylesheet' type='text/css'>
  8. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  9.  
  11.  
  12.  
  13. html a img{border:none;}
  14.  
  15. img {
  16.     border: none;
  17. }
  18. html{
  19. padding:0;
  20. margin:0;
  21. }
  22. body{
  23.  
  24.     padding:0;
  25.     margin:0px;
  26.  
  27.     background:#e8f9f9;
  28. 	    font-family: 'Open Sans', sans-serif;
  29. 	}
  30.  
  31.  
  32.  
  33. #divmenu{
  34. width:100%;
  35. height:65px;
  36. border-top:#6fceed solid 4px;
  37. position:fixed;
  38. z-index:9999;
  39. margin:0px auto;
  40. background: #FFF;
  41. }
  42.  
  43. #blanco{
  44. width:100%;
  45. height:65px;
  46. }
  47.  
  48. #todo{
  49.    width: 636px;
  50. height: 63px;
  51. float: left;
  52. border: red solid 0px;
  53. }
  54.  
  55. #c_menu{
  56.    width: 636px;
  57. height: 63px;
  58. float: left;
  59. }
  60.  
  61. #logo{
  62.     width:232px;
  63.     height:63px;
  64.     float:left;
  65.     margin-left:10px;
  66. }
  67.  
  68. #logo img{
  69.     width:228px;
  70.     height:63px;
  71.     }
  72.  
  73. #menu{
  74.  list-style: none;
  75. height: 53px;
  76. margin: 0;
  77. float: left;
  78. text-align: left;
  79. padding: 0;
  80.  
  81. }
  82. #menu li{
  83.     float:left;
  84.     display:block;
  85.  
  86.     border-bottom:#fff solid 0px;
  87.  
  88.  
  89. }
  90. #menu li a{
  91.   display: block;
  92. padding: 20px 0px;
  93. margin: 0;
  94. border: purple solid 0px;
  95. text-decoration: none;
  96. text-align: center;
  97. color: #0078ca ;
  98. font-family: 'Open Sans', sans-serif;
  99. width: 110px;
  100. font-size:16px;    
  101. }
  102. #menu li:hover {
  103.     background:#6fceed;   
  104.     color:#FFF !important;   
  105. }
  106. #menu li a:hover {
  107.     border-bottom:#ECECEC solid 1px;
  108.     background:#6fceed;
  109.     color:#FFF;
  110. }
  111. #menu li a:hover, #menu .submenu li:hover a{
  112.    border-bottom:#ECECEC solid 1px;
  113.     background:#6fceed;
  114.     color:#FFF;
  115. }
  116.  
  117.  
  118. #menu li a:active {    
  119.      background:#6fceed;
  120.     color:#FFF;
  121. }
  122.  
  123. #menu .submenu{
  124.     width:110px;    
  125.     display:none;
  126.     z-index:99999;
  127.     position:absolute;
  128.     margin:0px;
  129.     padding:0px;
  130.     background:#fff;
  131. }
  132.  
  133.  
  134. #menu .submenu  li{
  135.     text-align:center;
  136.     display:block;
  137.     width:110px;
  138.     margin:0px auto;
  139.     border-bottom:#ECECEC solid 1px;   
  140. }
  141. #menu .submenu  li  a{
  142.     display:block;
  143.     padding: 20px 0px;
  144.     border:purple solid 0px;
  145.     text-decoration: none;    
  146.     text-align:center;
  147.     color:#6fceed;
  148.     font-family: 'Open Sans', sans-serif;
  149.     width:110px;
  150.     font-size:10pt;
  151.  
  152. }
  153.  
  154. #menu .submenu  li a:hover {
  155.  
  156.     color:white;
  157.     background: #0078ca;
  158. }
  159.  
  160.  
  161.  
  162. #menu li:hover > .submenu {    
  163.     display:block;
  164. }
  165.  
  166. #contenido_principal{
  167. width:900px;
  168. margin:0 auto;
  169. background:#000;
  170. }
  171. #contenido_principal img{
  172.     width:900px;
  173. }
  174.  
  175.  
  176. /***********************************RESPONSIVE*****************************************=**********************/
  177.  
  178. #menu_responsive {
  179. margin: 0px 0px 0px; 
  180. display: none;
  181. padding: 8px 5px 2px;
  182. text-align: center;
  183. width: 106px;
  184. font-family: 'Open Sans', sans-serif;
  185. font-size: 0.8em;
  186.     }  
  187.  
  188.  
  189. @media (max-width: 1034px) {
  190.            #c_menu{ left:none !important;}
  191.            #contenido_principal{width:100%;}
  192.            #contenido_principal img{width:100%;}
  193.     }
  194.  
  195.  
  196.  
  197. @media (max-width: 860px) {    
  198.             #divmenu{ width:100%; height:146px;}
  199.             #logo{ float: none;position:relative; margin:0 auto; }
  200.             #todo{ float: none; position:relative; margin:0 auto; }
  201.             #c_menu{ float: none;position:relative; margin:0 auto; left:none !important;}   
  202.     }
  203.  
  204.  
  205.  
  206.  
  207.  @media (max-width: 457px) {
  208.  
  209.     #menu_responsive{display:block; }
  210.     #divmenu{  width:100%;  height:67px;}
  211.     #logo {width:250px;float:right;border:red solid 0px;}
  212.     #logo img{width:250px;float:right;}
  213.     #todo{width:100%}
  214.     #c_menu{
  215.     background:#8ad1ef;
  216.     color: /*#0078ca*/ #FFF ;
  217.     width:100%;
  218.     min-height:200px;
  219.     overflow:auto;
  220.     position:absolute;
  221.     left:-100%;    
  222.     z-index:9999;   
  223.     }
  224.     #menu li a{
  225.         width: 100%;
  226.         background: #0078ca;
  227.     color: /*#0078ca*/ #FFF ;
  228.         }
  229.         #menu li {
  230.         width: 100%;
  231.         background: #0078ca;
  232.     color: /*#0078ca*/ #FFF ;
  233.         }
  234. #menu .submenu{
  235.     width: 100%;
  236.     display:block;
  237.     position:relative;
  238.     background:#8ad1ef;
  239.     color:  #FFF ;
  240. }
  241. #menu .submenu li{
  242.     width: 100%;
  243.     background:#8ad1ef;
  244.     color:  #FFF ;
  245. }
  246. #menu .submenu  li  a{
  247.     width:100%;
  248.     background:#8ad1ef;
  249.     color:  #FFF ;
  250. }
  251.  
  252. #menu{
  253.  width:100%;
  254. height:auto;
  255.  
  256.  
  257. }
  258.  
  259.  
  260.  
  261.  
  262.     }
  263.  
  264.  
  265.  
  267.  
  268.  
  269.  
  270.  
  271.  
  272.  
  273. </head>
  275.  
  276.  
  277.     <div id="divmenu">
  278.         <div id="logo">
  279.             <img src="http://www.vectortemplates.com/raster/batman-logo-big.gif">
  280.          </div>
  281.  
  282.  
  283.     <script>
  284. $(document).ready(function(){
  285. 	var contador = 0;
  286. 	$('#desplazar').click(function efecto(){
  287. 	if (contador/2==0){
  288. 	$('#c_menu').animate({'left':0+'%'});
  289.         $("#c_menu").css({ height:"auto" });
  290.  
  291.  
  292. 	contador+=1;
  293. 	}
  294. 	else{
  295. 	$('#c_menu').animate({'left':-100+'%'});
  296.         $("#c_menu").css({ height:"300px" });
  297.  
  298. 	contador+=-1;	
  299. 	}
  300. 	});
  301.  
  302. });
  304.  
  305.  
  306.    <div id="todo">
  307.   <div id="menu_responsive" onclick=""><a href="#" id="desplazar"><img src="http://www.vectortemplates.com/raster/batman-logo-big.gif" width="20">Menu</a></div>
  308.  
  309.          <div id="c_menu" >
  310.  
  311.             <ul id="menu">
  312.                 <li><a href="#" target="_blank">Menu P 1</a>
  313.                 <ul class="submenu">
  314.                          <li><a href="#">submenu 1</a></li>
  315.  
  316.                     </ul>
  317.                 </li>
  318.                 <li><a href="#">Menu P 2</a>
  319.                     <ul class="submenu">
  320.                          <li><a href="#">submenu 2</a></li>
  321.                           <li><a href="#">submenu 2.1</a></li>
  322.  
  323.                     </ul>
  324.                 </li>
  325.                 <li><a href="#">Menu P 3</a>
  326.                     <ul class="submenu">
  327.                          <li><a href="#">submenu 3</a></li>
  328.                           <li><a  href="#">submenu 3.1</a></li>
  329.                           <li><a href="#">submenu 3.2</a></li>
  330.                            <li><a href="#">submenu 3.3</a></li>
  331.                         <li><a href="#">submenu 3.4</a></li>
  332.                         <li><a href="#">submenu 3.5</a></li>
  333.                         <li><a href="#">submenu 3.6</a></li>
  334.                     </ul>
  335.                 </li>
  336.                 <li><a href="#">Menu P 4</a>
  337.                  <ul class="submenu">
  338.                  <li ><a href="#">submenu 4</a></li>
  339.                  <li><a href="#">submenu 4.1</a></li>
  340.                  <li ><a href="#">submenu 4.1</a></li>
  341.                  <li ><a href="#">submenu 4.1</a></li>
  342.                  <li ><a href="#">submenu 4.1</a></li>
  343.                  <li><a href="#">submenu 4.1</a></li>
  344.                  <li ><a href="#">submenu 4.1</a></li>
  345.                  <li ><a href="#">submenu 4.1</a></li>
  346.                  </ul>
  347.                 </li>
  348.  
  349.                 <li><a href="#">Menu P 5</a>
  350.  
  351.  
  352.                 </li>
  353.  
  354.             </ul>
  355.  
  356.          </div>
  357.      </div>   
  358.  
  359.     </div>
  360.  
  361.     <div id="blanco"></div>
  362.  <div id="contenido_principal">
  363.     <img src="http://www.vectortemplates.com/raster/batman-logo-big.gif">
  364.  
  365.  </div>
  366.  
  367. </body>
  368. </html>
  369.  
  370.  

Título: Re: problema con fixed y menu ul
Publicado por: basickdagger en 13 Noviembre 2014, 17:14 pm
hola, bueno lo solucione haciendo lo siguiente


Código
  1. $(document).ready(function(){
  2. 	var contador = 0;
  3. 	$('#desplazar').click(function efecto(){
  4. 	if (contador/2==0){
  5. 	$('#c_menu').animate({'left':0+'%'});
  6.         $("#c_menu").css({ height:"auto" });
  7.         $("#divmenu").css({ position:"absolute" });
  8.  
  9.  
  10. 	contador+=1;
  11. 	}
  12. 	else{
  13. 	$('#c_menu').animate({'left':-100+'%'});
  14.         $("#c_menu").css({ height:"300px" });
  15.           $("#divmenu").css({ position:"fixed" });
  16.  
  17. 	contador+=-1;	
  18. 	}
  19. 	});
  20.  
  21. });
  22.  


Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines