Tema: Menú responsive no se ve bien
Ver Mensaje Individual
  #3 (permalink)  
Antiguo 23/05/2015, 12:59
fersosa
 
Fecha de Ingreso: mayo-2014
Mensajes: 64
Antigüedad: 10 años, 8 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. }