Tema: Problema con menu vertical acordion
Ver Mensaje Individual
  #3 (permalink)  
Antiguo 20/03/2013, 12:39
hmm_mcma
 
Fecha de Ingreso: marzo-2013
Ubicación: Barcelona
Mensajes: 2
Antigüedad: 11 años, 8 meses
Puntos: 0
Respuesta: Problema con menu vertical acordion
Este es el CSS:
Código CSS: 
Ver original
  1. #divAccNestedDiv_main{
  2.   min-width:480px;
  3.   width:100%;
  4.   height:101%;
  5.   background:#fff;
  6.   color:#333;
  7.   font:76%/1.6 verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;
  8.   text-align:left;
  9.  
  10.   margin-right:19em;
  11.   position:relative;
  12.   min-height:0;
  13.  
  14.   padding:0 0 1em;
  15.  
  16.   border-top:0.1em solid #ccc;
  17.   overflow:hidden
  18. }
  19.  
  20. #divAccNestedList_1{
  21.   min-width:480px;
  22.   height:101%;
  23.   background:#fff;
  24.   font:76%/1.6 verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;
  25.  
  26.   display:inline;
  27.   width:18em;
  28.   padding-bottom:1.3em;
  29.   position:relative;
  30.   color:#e3e3e3;
  31.   overflow:hidden;
  32.  
  33.   text-align:left;
  34.  
  35.   margin-bottom:30px;
  36.   padding:10px 2.5%;
  37.   border-top:0.1em solid #ccc
  38. }
  39.  
  40. #divAccNestedDiv_main p {margin: 0 10px 1em}
  41. #divAccNestedDiv_main img{border:0 none}
  42. #divAccNestedList_1 p {margin: 0 10px 1em}
  43. #divAccNestedList_1 img{border:0 none}
  44. .strong{font-weight:700}
  45. .clear {clear:both}
  46.  
  47. /* --- Headings --- */
  48. #divAccNestedDiv_main h1, #divAccNestedDiv_main h2, #divAccNestedDiv_main h3 {margin-bottom:1em}
  49. #divAccNestedDiv_main h2, #divAccNestedDiv_main h3, #divAccNestedDiv_main h4 a, #divAccNestedDiv_main h5 a {padding:3px 20px}
  50. #divAccNestedDiv_main h2, #divAccNestedDiv_main h3, #divAccNestedDiv_main h4, #divAccNestedDiv_main h5 {font-size:1em}
  51. #divAccNestedDiv_main h2 {background-color:#f0f0f0}
  52.  
  53. #divAccNestedList_1 h1, #divAccNestedList_1 h2, #divAccNestedList_1 h3 {margin-bottom:1em}
  54. #divAccNestedList_1 h2, #divAccNestedList_1 h3, #divAccNestedList_1 h4 a, #divAccNestedList_1 h5 a {padding:3px 20px}
  55. #divAccNestedList_1 h2, #divAccNestedList_1 h3, #divAccNestedList_1 h4, #divAccNestedList_1 h5 {font-size:1em}
  56. #divAccNestedList_1, #divAccNestedList_1 h2, #divAccNestedList_1 h3 {background:#000; color:#e3e3e3}
  57. #divAccNestedList_1 h2 {border-bottom:1px solid #484b51}
  58.  
  59. /* --- Links --- */
  60. #divAccNestedList_1 a {padding:1px; border:1px solid #e0e0e0; color:#05b; display:block; border-width:0 0 1px; border-color:#445; color:#f0f0f0}
  61.  
  62. #divAccNestedList_1 a:hover, #divAccNestedList_1 a:active, #divAccNestedList_1 a:focus {border-color:#bcd; text-decoration:none; outline:0 none; background-color:#334}
  63.  
  64.  
  65. /* --- Accordion --- */
  66. .js #divAccNestedDiv_main .accordion {visibility:hidden}
  67.  
  68. .js #divAccNestedList_1 .accordion {display:none}
  69.  
  70. .accordion {margin:0; padding:0 10px}
  71.  
  72. .accordion li {list-style-type:none}
  73.  
  74. .accordion li.last-child {margin-left:19px; list-style-type:disc}
  75.  
  76. #divAccNestedList_1 ul.accordion ul {margin:0; padding:0 0 0 20px;}
  77.  
  78. .accordion .outer {border:1px solid #dadada; border-width:0 1px 1px; background: #fff}
  79.  
  80. .accordion .inner {margin-bottom:0; padding:.5em 20px 1em; position:relative; overflow:hidden}
  81.  
  82. .accordion .inner .inner {padding-bottom:0}
  83.  
  84. .accordion .h {padding-top:.3em} /* vertical padding instead of vertical margin (ie8) */
  85.  
  86. .accordion p {margin:.5em 1px 1em}
  87.  
  88. a.trigger {padding-left:20px; background-image: url(plus.gif); background-repeat: no-repeat; background-position: 1px 50%;  font-weight:700}
  89.  
  90. a.trigger.open {background-image: url(minus.gif)}
  91.  
  92. .last-child a.trigger{padding-left:1px; background-image:none; font-weight:normal}
  93.  
  94. #divAccNestedDiv_main a.trigger {background-color:#f0f0f0}
  95.  
  96. #divAccNestedDiv_main a.trigger.open {border-color:#dadada; background-color:#e7e7e7}
  97.  
  98. #divAccNestedDiv_main a:hover.trigger.open, #divAccNestedDiv_main a:focus.trigger.open, #divAccNestedDiv_main a:active.trigger.open {border-color:#bcd}
  99.  
  100. #divAccNestedList_1 a.active{font-weight:700; color:#f72; text-decoration:none}

Este es el HTML:
Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5.  
  6.     <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  7.  
  8.     <title>Prueba Menú Vertical Acordion</title>
  9.  
  10.     <link rel="stylesheet"  href="nested_accordion.css"  type="text/css" />
  11.  
  12.     <!--[if lte IE 6]>
  13.         <style type='text/css'>
  14.             * html #divAccNestedDiv_main, #divAccNestedList_1 a, a.trigger, .accordion .inner {height:1%}
  15.             #lenta{height:52px}
  16.         </style>
  17.     
  18.         <script type="text/javascript">
  19.             try { document.execCommand( "BackgroundImageCache", false, true); } catch(e) {};
  20.         </script>
  21.     <![endif]-->
  22.  
  23.     <!--[if lte IE 7]>
  24.         <style type="text/css">
  25.             .accordion .inner {position:static; overflow:visible}
  26.         </style>
  27.     <![endif]-->
  28.     
  29.     <!--[if !lt IE 6]><!-->
  30.         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  31.         <script type="text/javascript" src="jquery.nestedAccordion.js"></script>
  32.         <script type="text/javascript">
  33.             <!--//--><![CDATA[//><!--
  34.             $("html").addClass("js");
  35.                 $.fn.accordion.defaults.container = false;
  36.                 $(function() {
  37.                     $("#divAccNestedList_1").accordion({initShow : "#divAccNestedList_1"});
  38.                     $("html").removeClass("js");
  39.                 });
  40.             //--><!]]>
  41.         </script>
  42.     <!--<![endif]-->
  43.  
  44. </head>
  45.  
  46. <body>
  47.     <table>
  48.         <tbody>
  49.             <tr>
  50.                 <td align="left" valign="middle" >
  51.                     <div id="divAccNestedList_1">
  52.                         <h2>Categorías</h2>
  53.                         <ul id="AccNestedList_1" class="accordion">
  54.                             <li><a href="#" >Confecciones</a>
  55.                                 <ul>
  56.                                     <li><a href="#" >para senores</a></li>
  57.                                     <li><a href="#" >para ninos</a></li>
  58.                                     <li><a href="#" >para ninas</a></li>
  59.                                 </ul>
  60.                             </li>
  61.                             <li><a href="#" >Accesorios</a>
  62.                                 <ul>
  63.                                     <li><a href="#" >para moviles</a>
  64.                                         <ul>
  65.                                             <li><a href="#" >pantallas</a></li>
  66.                                             <li><a href="#" >teclados</a></li>
  67.                                         </ul>
  68.                                     </li>
  69.                                     <li><a href="#" >para ordenadores</a>
  70.                                         <ul>
  71.                                             <li><a href="#" >fuentes</a></li>
  72.                                         </ul>
  73.                                     </li>
  74.                                 </ul>
  75.                             </li>
  76.                         </ul>
  77.                     </div>
  78.                 </td>
  79.             </tr>
  80.         </tbody>
  81.     </table>
  82. </body>
  83. </html>