Foros del Web » Creando para Internet » CSS »

Menú responsive no se ve bien

 Estas en el tema de Menú responsive no se ve bien en el foro de CSS en Foros del Web. hola! tengo el siguiente problema. un menú responsive al abrir el acordeón no se ve completo. supongo que es arreglar la altura. conseguí este menú ...
  #1 (permalink)  
Antiguo 22/05/2015, 06:53
 
Fecha de Ingreso: mayo-2014
Mensajes: 64
Antigüedad: 10 años, 6 meses
Puntos: 1
Menú responsive no se ve bien
hola!
tengo el siguiente problema.
un menú responsive al abrir el acordeón no se ve completo.
supongo que es arreglar la altura.
conseguí este menú busscando en la web, lo estoy estudiando, pero no logro ver bien a que se debe su mal visualización.
dejo códigos.

Código HTML: 
Ver original
  1. <div id="cuadromenu">
  2.         <div id="fdw">
  3.                 <!--nav-->
  4.                     <nav>
  5.                         <ul>
  6.                             <li class="current"><a href="../PruebaMenuResponsive/index2.html">Inicio</a></li>
  7.                             <li><a href="../PruebaMenuResponsive/index2.html">Libros<span class="arrow"></span></a>
  8.                                 <ul style="display: none;" class="sub_menu">
  9.                                     <li class="arrow_top"></li>
  10.                                     <li><a href="../PruebaMenuResponsive/index2.html">Infantil</a></li>
  11.                                     <li><a href="../PruebaMenuResponsive/index2.html">Poesía</a></li>
  12.                                     <li><a href="../PruebaMenuResponsive/index2.html">Narrativa</a></li>
  13.                                 </ul>
  14.                             </li>
  15.                             <li><a href="../PruebaMenuResponsive/index2.html">Reseñas</a></li>
  16.                             <li><a href="../PruebaMenuResponsive/index2.html">Textos</a></li>
  17.                             <li><a href="../PruebaMenuResponsive/index2.html">Contacto</a></li>
  18.                         </ul>
  19.                     </nav>
  20.         </div>
  21. </div>


@import url(http://fonts.googleapis.com/css?fami...e+Kaffeesatz);
/*===== nav style ======*/
#fdw nav select {
display:none; /* this is just for the mobile display */
}
#fdw nav ul {
display:block;
z-index:999999;
}
#fdw nav ul li {
display:inline-block;
padding:50px 3px 30px;
margin-left:30px;
position:relative;
}
#fdw nav ul li a:link, #fdw nav ul li a:visited {
color:#444;
font:normal 20px 'Yanone Kaffeesatz', sans-serif;
text-transform:uppercase;
display:inline-block;
position:relative;
}
#fdw nav ul li a:hover, #fdw nav ul li a:active {
color:#e25d29;
text-decoration:none;
}
#fdw nav ul li span {
position:absolute;
right:-12px;
bottom:6px;
width:7px;
height:8px;
margin:0 0 0 3px;
float:right;
display:block;
background:url('images/nav_arrow.png') no-repeat left -8px;
font:0/0 a;
}
#fdw nav ul li.current {
border-bottom:2px solid #e25d29;
}
#fdw nav ul li.current a {
color:#e25d29;
cursor: default;
}
#fdw nav ul li.current a span {
background:url('../images/nav_arrow.png') no-repeat left 0;
}
#fdw nav ul li.current ul li a {
cursor:pointer;
}

/*===== sub_menu Style =======*/
#fdw nav ul li ul.sub_menu {
position:absolute;
top:90px;
left:0;
margin:0;
padding:0;
background:#fff;
border:1px solid #ececec;
border-top:5px solid #e25d29;
display:none;
z-index:999999;
-moz-box-shadow: 0px 6px 7px #121012;
-webkit-box-shadow: 0px 6px 7px #121012;
box-shadow: 0px 6px 7px #121012;
}
#fdw nav ul li ul.sub_menu li.arrow_top {
position:absolute;
top:-12px;
left:12px;
width:13px;
height:8px;
display:block;
border:none;
background:url('images/arrow_top.png') no-repeat left top;
}
#fdw nav ul li ul.sub_menu li {
float:none;
margin:0;
padding:0;
border-bottom:1px solid #ececec;
}
#fdw nav ul li ul.sub_menu li a {
white-space: nowrap;
width: 150px;
padding:12px;
font:13px Arial, tahoma, sans-serif;
text-transform:capitalize;
color:#777;
}
#fdw nav ul li ul.sub_menu li a:hover {
background:#f9f9f9;
color:#333;
}
#fdw nav ul li ul.sub_menu li a.subCurrent {
color:#e25d29;
cursor:default;
}
#fdw nav ul li ul.sub_menu li a.subCurrent:hover {
background:none;
}
/*===================== end Header style ======================*/


@media only screen and (min-width: 768px) and (max-width: 959px) {
/* nav */
#fdw nav ul li{
margin-left:12px;
}
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {

/* nav menu ul & select */
#fdw nav ul {
display:none;
}
#fdw nav select {
width:100%;
display:block;
margin-bottom:30px;
cursor:pointer;
padding:6px;
background:#f9f9f9;
border:1px solid #e3e3e3;
color:#777;
}
}
  #2 (permalink)  
Antiguo 22/05/2015, 09:35
(Desactivado)
  
Fecha de Ingreso: abril-2015
Ubicación: España
Mensajes: 616
Antigüedad: 9 años, 7 meses
Puntos: 74
Respuesta: Menú responsive no se ve bien
Acabo de ejecutar el código y yo lo veo bien
  #3 (permalink)  
Antiguo 23/05/2015, 12:59
 
Fecha de Ingreso: mayo-2014
Mensajes: 64
Antigüedad: 10 años, 6 meses
Puntos: 1
Respuesta: Menú responsive no se ve bien
mmmmm. supuse que era problema de ese div. pero pongo todo el código.
no logro comprender donde está el problema.

Código HTML: 
Ver original
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.     <meta http-equiv="content-type" content="text/html" />
  5.     <meta name="author" content="" />
  6.     <link rel="stylesheet" href="../responsive/estiloinicioretrato.css"/>
  7.     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  8.  
  9.  
  10.  
  11.     <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700' rel='stylesheet' type='text/css'>
  12.     <link rel="stylesheet" type="text/css" href="../responsive/estilomenu2.css" media="all" />
  13.     <script src="blank.gif" data-src="../responsive/js/jquery-1.7.2.min.js"></script>
  14.  
  15.  
  16.  
  17.  
  18. <style>
  19. .text {font-size:120%; font-family:verdana; color:black; text-decoration:none}
  20. .text:hover {font-size:120%; font-family:verdana; color:#BFA62B; text-decoration:none}
  21. </style>
  22.  
  23.  
  24.  
  25.  
  26.  
  27.  
  28.  
  29.     <!-- jQuery lib from google server ===================== -->
  30.     <script src="../PruebaMenuResponsive/js/jquery-1.7.2.min.js"></script>
  31.  
  32. <!--  javaScript -->
  33.  
  34.     <script> 
  35.  
  36.     <!--  // building select nav for mobile width only -->
  37.     $(function(){
  38.         // building select menu
  39.         $('<select />').appendTo('nav');
  40.      
  41.  
  42.         // building an option for select menu
  43.         $('<option />', {
  44.             'selected': 'selected',
  45.             'value' : '',
  46.             'text': 'Contenido...'
  47.         }).appendTo('nav select');
  48.      
  49.  
  50.         $('nav ul li a').each(function(){
  51.             var target = $(this);
  52.      
  53.  
  54.             $('<option />', {
  55.                 'value' : target.attr('href'),
  56.                 'text': target.text()
  57.             }).appendTo('nav select');
  58.  
  59.  
  60.  
  61.         });
  62.  
  63.      
  64.         // on clicking on link
  65.         $('nav select').on('change',function(){
  66.             window.location = $(this).find('option:selected').val();
  67.         });
  68.     });
  69.     // show and hide sub menu
  70.     $(function(){
  71.         $('nav ul li').hover(
  72.             function () {
  73.                 //show its submenu
  74.                 $('ul', this).slideDown(150);
  75.             },
  76.             function () {
  77.                 //hide its submenu
  78.                 $('ul', this).slideUp(150);        
  79.             }
  80.         );
  81.     });
  82.     //end
  83.     </script>
  84.     <!-- end -->
  85.     <title>Sin título 1</title>
  86. </head>
  87.  
  88. <body>
  89.  
  90. <div id="general">
  91.     
  92.  
  93.   
  94. <div id="cabecera"> 
  95.     <div align="center"><img src="../responsive/images/vicente.jpg" align="center"/></div>
  96. </div>
  97.     
  98.     
  99.     
  100.         
  101.            
  102.     
  103.  
  104.     
  105. <!-- SECCION MENU     
  106. <div id="cuadromenu">
  107.  
  108.   <div id="menu">
  109.     <a class=text href="../responsive/index.html">Inicio</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
  110.     <a class=text href="biografia.html">Biografía</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
  111.     <a class=text href="libros.html">Libros</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
  112.     <a class=text href="resenas.html">Reseñas</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
  113.     <a class=text href="audioyvideo.html">Audios y Videos</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
  114.     </div>
  115. </div>
  116. <!-- FIN SECCION MENU -->
  117. <div id="cuadromenu">
  118.         <div id="fdw">
  119.                 <!--nav-->
  120.                     <nav>
  121.                         <ul>
  122.                             <li class="current"><a href="../PruebaMenuResponsive/index2.html">Inicio</a></li>
  123.                             <li><a href="../PruebaMenuResponsive/index2.html">Libros<span class="arrow"></span></a>
  124.                                 <ul style="display: none;" class="sub_menu">
  125.                                     <li class="arrow_top"></li>
  126.                                     <li><a href="../PruebaMenuResponsive/index2.html">Infantil</a></li>
  127.                                     <li><a href="../PruebaMenuResponsive/index2.html">Poesía</a></li>
  128.                                     <li><a href="../PruebaMenuResponsive/index2.html">Narrativa</a></li>
  129.                                 </ul>
  130.                             </li>
  131.                             <li><a href="../PruebaMenuResponsive/index2.html">Reseñas</a></li>
  132.                             <li><a href="../PruebaMenuResponsive/index2.html">Textos</a></li>
  133.                             <li><a href="../PruebaMenuResponsive/index2.html">Contacto</a></li>
  134.                         </ul>
  135.                     </nav>
  136.         </div>
  137. </div>
  138.  
  139.  
  140.  
  141.  
  142.     
  143. </div>   
  144.     
  145. </body>
  146. </html>


Código CSS: 
Ver original
  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5. body {
  6.     background: gray;
  7.     font-family: Arial;
  8. }
  9. #general {
  10.     width: 100%;
  11.     max-width: 1000px;
  12.     margin: 2% auto;
  13.     overflow: hidden;
  14. }
  15. #cabecera {
  16.     margin: 1%;
  17.     width: 100%;
  18.     height: auto;
  19.     float: left;
  20. }
  21. #cabecera img {
  22.     width: 50%;
  23.     height: auto;
  24. }
  25. #cuadromenu {
  26.     width: 55%;
  27.     height: 50%;
  28.     background-color: gray;
  29.     padding: 0%;
  30.     clear: both;
  31.     margin:0 auto;
  32. }
  33. #fdw {
  34.     text-align: left;
  35.     margin:0 auto;
  36.     display: inline-block;
  37.     
  38. }
  39. #menu {
  40.     margin: auto;
  41.     text-align: center;
  42. }
  43. #content {
  44.     width: 100%;
  45. }
  46. #content img {
  47.     width: 30%;
  48.     padding: 1%;
  49. }
  50. #contenido {
  51.     width: 97%;
  52.     padding: 0%;
  53.     float: left;
  54.     margin-left: auto;
  55.     margin-right: auto;
  56. }
  57. #biografia {
  58.     width: 90%;
  59.     margin-left: auto;
  60.     margin-right: auto;
  61. }
  62. #libros {
  63.     width: 100%;
  64.     padding: 20px;
  65.     height: auto;
  66. }
  67. #libros div {
  68.   display: inline-block;
  69.   width: 20%;
  70.   padding: 18px;
  71. }
  72.  
  73. #libros #otro2 {
  74.   display: block;
  75. }
  76. #libros img {
  77.     width: 100%;
  78.     height: auto;
  79. }
  80. #narrativa {
  81.     text-align: center;
  82.     font: 200% Arial;
  83.     word-wrap: break-word;
  84.     white-space: nowrap;
  85. }
  86. @media all and (max-width: 480px) {
  87.   #libros div {
  88.     display: block;
  89.     width: 80%;
  90.     padding: 10px;
  91.   }
  92. }


Código CSS: 
Ver original
  1. /* Slider
  2. http://www.freshdesignweb.com/drop-down-responsive-menu-with-css3-and-jquery.html
  3. */
  4. @import url(http://fonts.googleapis.com/css?family=Gentium+Basic:400,700|Yanone+Kaffeesatz);
  5. /*===== nav style ======*/
  6. #fdw nav select {
  7.     display:none; /* this is just for the mobile display */
  8. }
  9. #fdw nav ul {
  10.     display:block;
  11.     z-index:999999;
  12. }
  13. #fdw nav ul li {
  14.     display:inline-block;
  15.     padding:50px 3px 30px;
  16.     margin-left:30px;
  17.     position:relative;
  18. }
  19. #fdw nav ul li a:link, #fdw nav ul li a:visited {
  20.     color:#444;
  21.     font:normal 20px 'Yanone Kaffeesatz', sans-serif;
  22.     text-transform:uppercase;
  23.     display:inline-block;
  24.     position:relative;
  25. }
  26. #fdw nav ul li a:hover, #fdw nav ul li a:active {
  27.     color:#e25d29;
  28.     text-decoration:none;
  29. }
  30. #fdw nav ul li span {
  31.     position:absolute;
  32.     right:-12px;
  33.     bottom:6px;
  34.     width:7px;
  35.     height:8px;
  36.     margin:0 0 0 3px;
  37.     float:right;
  38.     display:block;
  39.     background:url('../PruebaMenuResponsive/images/nav_arrow.png') no-repeat left -8px;
  40.     font:0/0 a;
  41. }
  42. #fdw nav ul li.current {
  43.     border-bottom:2px solid #e25d29;
  44. }
  45. #fdw nav ul li.current a {
  46.     color:#e25d29;
  47.     cursor: default;
  48. }
  49. #fdw nav ul li.current a span {
  50.     background:url('../PruebaMenuResponsive/images/nav_arrow.png') no-repeat left 0;
  51. }
  52. #fdw nav ul li.current ul li a {
  53.     cursor:pointer;
  54. }
  55.  
  56. /*===== sub_menu Style =======*/
  57. #fdw nav ul li ul.sub_menu {
  58.     position:absolute;
  59.     top:90px;
  60.     left:0;
  61.     margin:0;
  62.     padding:0;
  63.     background:#fff;
  64.     border:1px solid #ececec;
  65.     border-top:5px solid #e25d29;
  66.     display:none;
  67.     z-index:999999;
  68.     -moz-box-shadow: 0px 6px 7px #121012;
  69.     -webkit-box-shadow: 0px 6px 7px #121012;
  70.     box-shadow: 0px 6px 7px #121012;
  71. }
  72. #fdw nav ul li ul.sub_menu li.arrow_top {
  73.     position:absolute;
  74.     top:-12px;
  75.     left:12px;
  76.     width:13px;
  77.     height:8px;
  78.     display:block;
  79.     border:none;
  80.     background:url('../PruebaMenuResponsive/images/arrow_top.png') no-repeat left top;
  81. }
  82. #fdw nav ul li ul.sub_menu li {
  83.     float:none;
  84.     margin:0;
  85.     padding:0;
  86.     border-bottom:1px solid #ececec;
  87. }
  88. #fdw nav ul li ul.sub_menu li a {
  89.     white-space: nowrap;
  90.     width: 150px;
  91.     padding:12px;
  92.     font:13px Arial, tahoma, sans-serif;
  93.     text-transform:capitalize;
  94.     color:#777;
  95. }
  96. #fdw nav ul li ul.sub_menu li a:hover {
  97.     background:#f9f9f9;
  98.     color:#333;
  99. }
  100. #fdw nav ul li ul.sub_menu li a.subCurrent {
  101.     color:#e25d29;
  102.     cursor:default;
  103. }
  104. #fdw nav ul li ul.sub_menu li a.subCurrent:hover {
  105.     background:none;
  106. }
  107. /*===================== end Header style ======================*/
  108.  
  109.  
  110. @media only screen and (min-width: 768px) and (max-width: 959px) {
  111.         /* nav */
  112.         #fdw nav ul li{
  113.             margin-left:12px;
  114.         }
  115. }
  116.  
  117.     /* All Mobile Sizes (devices and browser) */
  118. @media only screen and (max-width: 767px) {
  119.  
  120.         /* nav menu ul & select */
  121.         #fdw nav ul {
  122.             display:none;
  123.         }
  124.         #fdw nav select {
  125.             width:100%;
  126.             display:block;
  127.             margin-bottom:30px;
  128.             cursor:pointer;
  129.             padding:6px;
  130.             background:#f9f9f9;
  131.             border:1px solid #e3e3e3;
  132.             color:#777;
  133.         }
  134. }
  #4 (permalink)  
Antiguo 27/05/2015, 06:14
(Desactivado)
  
Fecha de Ingreso: abril-2015
Ubicación: España
Mensajes: 616
Antigüedad: 9 años, 7 meses
Puntos: 74
Respuesta: Menú responsive no se ve bien
En esta web tienes menús multinivel que seguro te van a funcionar

http://www.dynamicdrive.com/style/cs...y/category/C1/
  #5 (permalink)  
Antiguo 27/05/2015, 07:07
 
Fecha de Ingreso: mayo-2014
Mensajes: 64
Antigüedad: 10 años, 6 meses
Puntos: 1
Respuesta: Menú responsive no se ve bien
Muchas gracias! la voy a ver y probar, de momento lo que pude hacer es cambiar de lugar el menú, estaba abajo, ahora está arriba.
Veremos...

Etiquetas: background, color, float, responsive, width
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 03:27.