Home Foros Foro dudas Foro de CSS Menú desplegable vertical de 3 niveles

Menú desplegable vertical de 3 niveles

  • Este debate está vacío.
Viendo 2 entradas - de la 1 a la 2 (de un total de 2)
  • Autor
    Entradas
  • #10506

    Selma
    Participante

    Hola, estoy intentando hacer un menú vertical desplegable de 3 niveles pero no consigo que el tercer nivel los li se desplacen hacia abajo cuando quiero abrir el submenú, este es el código, alguien me puede ayudar? Gracias.

     
    <div style=»color: #d4d4d4; background-color: #1e1e1e; font-family: Consolas, ‘Courier New’, monospace; font-size: 14px; line-height: 19px; white-space: pre;»>
    <div><span style=»color: #808080;»><</span><span style=»color: #569cd6;»>html</span><span style=»color: #808080;»>></span></div>
    <div><span style=»color: #808080;»><</span><span style=»color: #569cd6;»>head</span><span style=»color: #808080;»>></span></div>
    <div>    <span style=»color: #808080;»><</span><span style=»color: #569cd6;»>link</span> <span style=»color: #9cdcfe;»>href</span>=<span style=»color: #ce9178;»>»icofont/icofont.min.css»</span> <span style=»color: #9cdcfe;»>rel</span>=<span style=»color: #ce9178;»>»stylesheet»</span><span style=»color: #808080;»>></span></div>
    <div>    <span style=»color: #808080;»><</span><span style=»color: #569cd6;»>meta</span> <span style=»color: #9cdcfe;»>http-equiv</span>=<span style=»color: #ce9178;»>»content-type»</span> <span style=»color: #9cdcfe;»>content</span>=<span style=»color: #ce9178;»>»text/html; charset=UTF-8″</span><span style=»color: #808080;»>></span></div>
    <div>    <span style=»color: #808080;»><</span><span style=»color: #569cd6;»>style</span><span style=»color: #808080;»>></span></div>
    <div>        <span style=»color: #d7ba7d;»>body</span> {</div>
    <div>            <span style=»color: #9cdcfe;»>color</span>: <span style=»color: #ce9178;»>white</span>;</div>
    <div>        }</div>
    <div></div>
    <div>        <span style=»color: #d7ba7d;»>nav</span> {</div>
    <div>            <span style=»color: #9cdcfe;»>position</span>: <span style=»color: #ce9178;»>fixed</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>top</span>: <span style=»color: #b5cea8;»>55px</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>left</span>: <span style=»color: #b5cea8;»>0px</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>height</span>: <span style=»color: #dcdcaa;»>calc</span>(<span style=»color: #b5cea8;»>100%</span> – <span style=»color: #b5cea8;»>55px</span>);</div>
    <div>            <span style=»color: #9cdcfe;»>width</span>: <span style=»color: #b5cea8;»>180px</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>background</span>: <span style=»color: #dcdcaa;»>rgba</span>(<span style=»color: #b5cea8;»>0</span>, <span style=»color: #b5cea8;»>0</span>, <span style=»color: #b5cea8;»>0</span>, <span style=»color: #b5cea8;»>0.7</span>);</div>
    <div>            <span style=»color: #9cdcfe;»>overflow</span>: <span style=»color: #ce9178;»>hidden</span>;</div>
    <div>        }</div>
    <div>        <span style=»color: #6a9955;»>/*Nivel 1*/</span></div>
    <div></div>
    <div>        <span style=»color: #d7ba7d;»>nav</span> <span style=»color: #d7ba7d;»>ul</span> {</div>
    <div>            <span style=»color: #9cdcfe;»>list-style-type</span>: <span style=»color: #ce9178;»>none</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>margin</span>: <span style=»color: #b5cea8;»>0px</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>padding</span>: <span style=»color: #b5cea8;»>0px</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>cursor</span>: <span style=»color: #ce9178;»>pointer</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>position</span>: <span style=»color: #ce9178;»>relative</span>;</div>
    <div>        }</div>
    <div></div>
    <div>        <span style=»color: #d7ba7d;»>nav</span>><span style=»color: #d7ba7d;»>ul</span> {</div>
    <div>            <span style=»color: #9cdcfe;»>margin-top</span>: <span style=»color: #b5cea8;»>20px</span>;</div>
    <div>        }</div>
    <div></div>
    <div>        <span style=»color: #d7ba7d;»>nav</span>><span style=»color: #d7ba7d;»>ul</span>><span style=»color: #d7ba7d;»>li</span> {</div>
    <div>            <span style=»color: #9cdcfe;»>text-align</span>: <span style=»color: #ce9178;»>left</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>font</span>: <span style=»color: #b5cea8;»>13px</span> <span style=»color: #ce9178;»>»Roboto Condensed»</span>, <span style=»color: #ce9178;»>sans-serif</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>position</span>: <span style=»color: #ce9178;»>relative</span>;</div>
    <div>        }</div>
    <div></div>
    <div>        <span style=»color: #d7ba7d;»>nav</span>><span style=»color: #d7ba7d;»>ul</span>><span style=»color: #d7ba7d;»>li</span>><span style=»color: #d7ba7d;»>a</span> {</div>
    <div>            <span style=»color: #9cdcfe;»>position</span>: <span style=»color: #ce9178;»>relative</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>display</span>: <span style=»color: #ce9178;»>flex</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>align-items</span>: <span style=»color: #ce9178;»>center</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>line-height</span>: <span style=»color: #b5cea8;»>40px</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>height</span>: <span style=»color: #b5cea8;»>40px</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>width</span>: <span style=»color: #b5cea8;»>100%</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>display</span>: <span style=»color: #ce9178;»>inline-block</span>;</div>
    <div>        }</div>
    <div></div>
    <div>        <span style=»color: #d7ba7d;»>nav</span>><span style=»color: #d7ba7d;»>ul</span>><span style=»color: #d7ba7d;»>li</span>><span style=»color: #d7ba7d;»>a</span>><span style=»color: #d7ba7d;»>i</span> {</div>
    <div>            <span style=»color: #9cdcfe;»>line-height</span>: <span style=»color: #b5cea8;»>40px</span> <span style=»color: #569cd6;»>!important</span>;</div>
    <div>        }</div>
    <div></div>
    <div>        <span style=»color: #d7ba7d;»>nav</span>><span style=»color: #d7ba7d;»>ul</span>><span style=»color: #d7ba7d;»>li.seleccionado</span>><span style=»color: #d7ba7d;»>a</span> {</div>
    <div>            <span style=»color: #9cdcfe;»>background</span>: <span style=»color: #ce9178;»>#209E91</span>;</div>
    <div>        }</div>
    <div></div>
    <div>        <span style=»color: #d7ba7d;»>nav</span>><span style=»color: #d7ba7d;»>ul</span>><span style=»color: #d7ba7d;»>li</span>><span style=»color: #d7ba7d;»>a</span>><span style=»color: #d7ba7d;»>span</span> {</div>
    <div>            <span style=»color: #9cdcfe;»>width</span>: <span style=»color: #b5cea8;»>137px</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>display</span>: <span style=»color: #ce9178;»>inline-block</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>position</span>: <span style=»color: #ce9178;»>absolute</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>top</span>: <span style=»color: #b5cea8;»>0px</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>left</span>: <span style=»color: #b5cea8;»>45px</span>;</div>
    <div>        }</div>
    <div></div>
    <div>        <span style=»color: #d7ba7d;»>nav</span>><span style=»color: #d7ba7d;»>ul</span>><span style=»color: #d7ba7d;»>li</span>><span style=»color: #d7ba7d;»>a</span>><span style=»color: #d7ba7d;»>span</span>><span style=»color: #d7ba7d;»>i.flechita</span> {</div>
    <div>            <span style=»color: #9cdcfe;»>position</span>: <span style=»color: #ce9178;»>absolute</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>top</span>: <span style=»color: #b5cea8;»>0px</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>right</span>: <span style=»color: #b5cea8;»>0px</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>margin-left</span>: <span style=»color: #b5cea8;»>10px</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>margin-right</span>: <span style=»color: #b5cea8;»>10px</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>line-height</span>: <span style=»color: #b5cea8;»>40px</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>font-size</span>: <span style=»color: #b5cea8;»>15px</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>transition</span>: <span style=»color: #b5cea8;»>0.8s</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>-moz-transition</span>: <span style=»color: #b5cea8;»>0.8s</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>-webkit-transition</span>: <span style=»color: #b5cea8;»>0.8s</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>-o-transition</span>: <span style=»color: #b5cea8;»>0.8s</span>;</div>
    <div>        }</div>
    <div></div>
    <div>        <span style=»color: #d7ba7d;»>nav</span>><span style=»color: #d7ba7d;»>ul</span>><span style=»color: #d7ba7d;»>li</span>><span style=»color: #d7ba7d;»>a</span>><span style=»color: #d7ba7d;»>i</span> {</div>
    <div>            <span style=»color: #9cdcfe;»>margin-left</span>: <span style=»color: #b5cea8;»>15px</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>margin-right</span>: <span style=»color: #b5cea8;»>15px</span>;</div>
    <div>        }</div>
    <div>        <span style=»color: #6a9955;»>/*Nivel 2*/</span></div>
    <div></div>
    <div>        <span style=»color: #d7ba7d;»>nav</span>><span style=»color: #d7ba7d;»>ul</span>><span style=»color: #d7ba7d;»>li</span>><span style=»color: #d7ba7d;»>ul</span> {</div>
    <div>            <span style=»color: #9cdcfe;»>display</span>: <span style=»color: #ce9178;»>none</span>;</div>
    <div>        }</div>
    <div></div>
    <div>        <span style=»color: #d7ba7d;»>nav</span>><span style=»color: #d7ba7d;»>ul</span>><span style=»color: #d7ba7d;»>li</span>><span style=»color: #d7ba7d;»>ul</span>><span style=»color: #d7ba7d;»>li</span> {</div>
    <div>            <span style=»color: #9cdcfe;»>position</span>: <span style=»color: #ce9178;»>relative</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>height</span>: <span style=»color: #b5cea8;»>30px</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>border</span>: <span style=»color: #b5cea8;»>1px</span> <span style=»color: #ce9178;»>solid</span> <span style=»color: #ce9178;»>yellow</span>;</div>
    <div>        }</div>
    <div></div>
    <div>        <span style=»color: #d7ba7d;»>nav</span>><span style=»color: #d7ba7d;»>ul</span>><span style=»color: #d7ba7d;»>li</span>><span style=»color: #d7ba7d;»>ul</span>><span style=»color: #d7ba7d;»>li.seleccionado</span> <span style=»color: #d7ba7d;»>a</span> {</div>
    <div>            <span style=»color: #9cdcfe;»>background</span>: <span style=»color: #ce9178;»>#209E91</span>;</div>
    <div>        }</div>
    <div></div>
    <div>        <span style=»color: #d7ba7d;»>nav</span>><span style=»color: #d7ba7d;»>ul</span>><span style=»color: #d7ba7d;»>li</span>><span style=»color: #d7ba7d;»>ul</span>><span style=»color: #d7ba7d;»>li</span>><span style=»color: #d7ba7d;»>a</span> {</div>
    <div>            <span style=»color: #9cdcfe;»>padding-left</span>: <span style=»color: #b5cea8;»>45px</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>width</span>: <span style=»color: #b5cea8;»>100%</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>height</span>: <span style=»color: #b5cea8;»>100%</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>display</span>: <span style=»color: #ce9178;»>inline-block</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>display</span>: <span style=»color: #ce9178;»>flex</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>align-items</span>: <span style=»color: #ce9178;»>center</span>;</div>
    <div>        }</div>
    <div></div>
    <div>        <span style=»color: #d7ba7d;»>nav</span>><span style=»color: #d7ba7d;»>ul</span>><span style=»color: #d7ba7d;»>li</span>><span style=»color: #d7ba7d;»>a:hover</span>,</div>
    <div>        <span style=»color: #d7ba7d;»>nav</span>><span style=»color: #d7ba7d;»>ul</span>><span style=»color: #d7ba7d;»>li</span>><span style=»color: #d7ba7d;»>ul</span>><span style=»color: #d7ba7d;»>li</span>><span style=»color: #d7ba7d;»>a:hover</span> {</div>
    <div>            <span style=»color: #9cdcfe;»>color</span>: <span style=»color: #ce9178;»>#209E91</span>;</div>
    <div>        }</div>
    <div></div>
    <div>        <span style=»color: #d7ba7d;»>nav</span>><span style=»color: #d7ba7d;»>ul</span>><span style=»color: #d7ba7d;»>li.seleccionado</span>><span style=»color: #d7ba7d;»>a:hover</span>,</div>
    <div>        <span style=»color: #d7ba7d;»>nav</span>><span style=»color: #d7ba7d;»>ul</span>><span style=»color: #d7ba7d;»>li</span>><span style=»color: #d7ba7d;»>ul</span>><span style=»color: #d7ba7d;»>li.seleccionado</span>><span style=»color: #d7ba7d;»>a:hover</span> {</div>
    <div>            <span style=»color: #9cdcfe;»>color</span>: <span style=»color: #ce9178;»>white</span>;</div>
    <div>        }</div>
    <div>        <span style=»color: #6a9955;»>/*Nivel 3*/</span></div>
    <div></div>
    <div>        <span style=»color: #d7ba7d;»>nav</span>><span style=»color: #d7ba7d;»>ul</span>><span style=»color: #d7ba7d;»>li</span>><span style=»color: #d7ba7d;»>ul</span>><span style=»color: #d7ba7d;»>li</span>><span style=»color: #d7ba7d;»>ul</span> {</div>
    <div>            <span style=»color: #9cdcfe;»>position</span>: <span style=»color: #ce9178;»>relative</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>display</span>: <span style=»color: #ce9178;»>block</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>height</span>: <span style=»color: #b5cea8;»>90px</span> <span style=»color: #569cd6;»>!important</span>;</div>
    <div>        }</div>
    <div></div>
    <div>        <span style=»color: #d7ba7d;»>nav</span>><span style=»color: #d7ba7d;»>ul</span>><span style=»color: #d7ba7d;»>li</span>><span style=»color: #d7ba7d;»>ul</span>><span style=»color: #d7ba7d;»>li</span>><span style=»color: #d7ba7d;»>ul</span>><span style=»color: #d7ba7d;»>li</span> {</div>
    <div>            <span style=»color: #9cdcfe;»>position</span>: <span style=»color: #ce9178;»>relative</span>;</div>
    <div>            <span style=»color: #9cdcfe;»>height</span>: <span style=»color: #b5cea8;»>30px</span>;</div>
    <div>        }</div>
    <div>    <span style=»color: #808080;»><</span><span style=»color: #808080;»>/</span><span style=»color: #569cd6;»>style</span><span style=»color: #808080;»>></span></div>
    <div><span style=»color: #808080;»></</span><span style=»color: #569cd6;»>head</span><span style=»color: #808080;»>></span></div>
    <div><span style=»color: #808080;»><</span><span style=»color: #569cd6;»>body</span><span style=»color: #808080;»>></span></div>
    <div>    <span style=»color: #808080;»><</span><span style=»color: #569cd6;»>nav</span><span style=»color: #808080;»>></span></div>
    <div>        <span style=»color: #808080;»><</span><span style=»color: #569cd6;»>ul</span><span style=»color: #808080;»>></span></div>
    <div>            <span style=»color: #808080;»><</span><span style=»color: #569cd6;»>li</span><span style=»color: #808080;»>><</span><span style=»color: #569cd6;»>a</span><span style=»color: #808080;»>><</span><span style=»color: #569cd6;»>span</span><span style=»color: #808080;»>></span>Sección 1 <span style=»color: #808080;»><</span><span style=»color: #569cd6;»>i</span> <span style=»color: #9cdcfe;»>class</span>=<span style=»color: #ce9178;»>»icofont-curved-down flechita»</span><span style=»color: #808080;»>></</span><span style=»color: #569cd6;»>i</span><span style=»color: #808080;»>></</span><span style=»color: #569cd6;»>span</span><span style=»color: #808080;»>></</span><span style=»color: #569cd6;»>a</span><span style=»color: #808080;»>></span></div>
    <div>                <span style=»color: #808080;»><</span><span style=»color: #569cd6;»>ul</span><span style=»color: #808080;»>></span></div>
    <div>                    <span style=»color: #808080;»><</span><span style=»color: #569cd6;»>li</span><span style=»color: #808080;»>><</span><span style=»color: #569cd6;»>a</span><span style=»color: #808080;»>></span>Sección 1.1<span style=»color: #808080;»></</span><span style=»color: #569cd6;»>a</span><span style=»color: #808080;»>></</span><span style=»color: #569cd6;»>li</span><span style=»color: #808080;»>></span></div>
    <div>                    <span style=»color: #808080;»><</span><span style=»color: #569cd6;»>li</span><span style=»color: #808080;»>><</span><span style=»color: #569cd6;»>a</span><span style=»color: #808080;»>></span>Sección 1.2<span style=»color: #808080;»></</span><span style=»color: #569cd6;»>a</span><span style=»color: #808080;»>></</span><span style=»color: #569cd6;»>li</span><span style=»color: #808080;»>></span></div>
    <div>                    <span style=»color: #808080;»><</span><span style=»color: #569cd6;»>li</span><span style=»color: #808080;»>><</span><span style=»color: #569cd6;»>a</span><span style=»color: #808080;»>></span>Sección 1.3<span style=»color: #808080;»></</span><span style=»color: #569cd6;»>a</span><span style=»color: #808080;»>></</span><span style=»color: #569cd6;»>li</span><span style=»color: #808080;»>></span></div>
    <div>                <span style=»color: #808080;»></</span><span style=»color: #569cd6;»>ul</span><span style=»color: #808080;»>></span></div>
    <div>            <span style=»color: #808080;»></</span><span style=»color: #569cd6;»>li</span><span style=»color: #808080;»>></span></div>
    <div>            <span style=»color: #808080;»><</span><span style=»color: #569cd6;»>li</span><span style=»color: #808080;»>><</span><span style=»color: #569cd6;»>a</span><span style=»color: #808080;»>><</span><span style=»color: #569cd6;»>span</span><span style=»color: #808080;»>></span>Sección 2 <span style=»color: #808080;»><</span><span style=»color: #569cd6;»>i</span> <span style=»color: #9cdcfe;»>class</span>=<span style=»color: #ce9178;»>»icofont-curved-down flechita»</span><span style=»color: #808080;»>></</span><span style=»color: #569cd6;»>i</span><span style=»color: #808080;»>></</span><span style=»color: #569cd6;»>span</span><span style=»color: #808080;»>></</span><span style=»color: #569cd6;»>a</span><span style=»color: #808080;»>></span></div>
    <div>                <span style=»color: #808080;»><</span><span style=»color: #569cd6;»>ul</span><span style=»color: #808080;»>></span></div>
    <div>                    <span style=»color: #808080;»><</span><span style=»color: #569cd6;»>li</span><span style=»color: #808080;»>><</span><span style=»color: #569cd6;»>a</span><span style=»color: #808080;»>><</span><span style=»color: #569cd6;»>span</span><span style=»color: #808080;»>></span>Sección 2.1 <span style=»color: #808080;»><</span><span style=»color: #569cd6;»>i</span> <span style=»color: #9cdcfe;»>class</span>=<span style=»color: #ce9178;»>»icofont-curved-down flechita»</span><span style=»color: #808080;»>></</span><span style=»color: #569cd6;»>i</span><span style=»color: #808080;»>></</span><span style=»color: #569cd6;»>span</span><span style=»color: #808080;»>></</span><span style=»color: #569cd6;»>a</span><span style=»color: #808080;»>></span></div>
    <div>                        <span style=»color: #808080;»><</span><span style=»color: #569cd6;»>ul</span><span style=»color: #808080;»>></span></div>
    <div>                            <span style=»color: #808080;»><</span><span style=»color: #569cd6;»>li</span><span style=»color: #808080;»>><</span><span style=»color: #569cd6;»>a</span><span style=»color: #808080;»>></span>Sección 2.1.1<span style=»color: #808080;»></</span><span style=»color: #569cd6;»>a</span><span style=»color: #808080;»>></</span><span style=»color: #569cd6;»>li</span><span style=»color: #808080;»>></span></div>
    <div>                            <span style=»color: #808080;»><</span><span style=»color: #569cd6;»>li</span><span style=»color: #808080;»>><</span><span style=»color: #569cd6;»>a</span><span style=»color: #808080;»>></span>Sección 2.1.2<span style=»color: #808080;»></</span><span style=»color: #569cd6;»>a</span><span style=»color: #808080;»>></</span><span style=»color: #569cd6;»>li</span><span style=»color: #808080;»>></span></div>
    <div>                            <span style=»color: #808080;»><</span><span style=»color: #569cd6;»>li</span><span style=»color: #808080;»>><</span><span style=»color: #569cd6;»>a</span><span style=»color: #808080;»>></span>Sección 2.1.3<span style=»color: #808080;»></</span><span style=»color: #569cd6;»>a</span><span style=»color: #808080;»>></</span><span style=»color: #569cd6;»>li</span><span style=»color: #808080;»>></span></div>
    <div>                        <span style=»color: #808080;»></</span><span style=»color: #569cd6;»>ul</span><span style=»color: #808080;»>></span></div>
    <div>                    <span style=»color: #808080;»></</span><span style=»color: #569cd6;»>li</span><span style=»color: #808080;»>></span></div>
    <div>                    <span style=»color: #808080;»><</span><span style=»color: #569cd6;»>li</span><span style=»color: #808080;»>><</span><span style=»color: #569cd6;»>a</span><span style=»color: #808080;»>></span>Sección 2.2<span style=»color: #808080;»></</span><span style=»color: #569cd6;»>a</span><span style=»color: #808080;»>></</span><span style=»color: #569cd6;»>li</span><span style=»color: #808080;»>></span></div>
    <div>                <span style=»color: #808080;»></</span><span style=»color: #569cd6;»>ul</span><span style=»color: #808080;»>></span></div>
    <div>            <span style=»color: #808080;»></</span><span style=»color: #569cd6;»>li</span><span style=»color: #808080;»>></span></div>
    <div>        <span style=»color: #808080;»></</span><span style=»color: #569cd6;»>ul</span><span style=»color: #808080;»>></span></div>
    <div>    <span style=»color: #808080;»></</span><span style=»color: #569cd6;»>nav</span><span style=»color: #808080;»>></span></div>
    <div>    <span style=»color: #808080;»><</span><span style=»color: #569cd6;»>script</span> <span style=»color: #9cdcfe;»>src</span>=<span style=»color: #ce9178;»>»https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js»</span><span style=»color: #808080;»>></span><span style=»color: #808080;»><</span><span style=»color: #808080;»>/</span><span style=»color: #569cd6;»>script</span><span style=»color: #808080;»>></span></div>
    <div>    <span style=»color: #808080;»><</span><span style=»color: #569cd6;»>script</span> <span style=»color: #9cdcfe;»>src</span>=<span style=»color: #ce9178;»>»https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js»</span> <span style=»color: #9cdcfe;»>integrity</span>=<span style=»color: #ce9178;»>»sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM»</span> <span style=»color: #9cdcfe;»>crossorigin</span>=<span style=»color: #ce9178;»>»anonymous»</span><span style=»color: #808080;»>></span><span style=»color: #808080;»><</span><span style=»color: #808080;»>/</span><span style=»color: #569cd6;»>script</span><span style=»color: #808080;»>></span></div>
    <div>    <span style=»color: #808080;»><</span><span style=»color: #569cd6;»>script</span> <span style=»color: #9cdcfe;»>src</span>=<span style=»color: #ce9178;»>»https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js»</span><span style=»color: #808080;»>></span><span style=»color: #808080;»><</span><span style=»color: #808080;»>/</span><span style=»color: #569cd6;»>script</span><span style=»color: #808080;»>></span></div>
    <div>    <span style=»color: #808080;»><</span><span style=»color: #569cd6;»>script</span><span style=»color: #808080;»>></span></div>
    <div>        <span style=»color: #569cd6;»>var</span> <span style=»color: #9cdcfe;»>i</span> = <span style=»color: #b5cea8;»>0</span>;</div>
    <div>        <span style=»color: #569cd6;»>var</span> <span style=»color: #9cdcfe;»>rotation</span> = <span style=»color: #b5cea8;»>0</span>;</div>
    <div>        <span style=»color: #dcdcaa;»>$</span>(<span style=»color: #9cdcfe;»>document</span>).<span style=»color: #dcdcaa;»>ready</span>(<span style=»color: #569cd6;»>function</span>() {</div>
    <div>            <span style=»color: #dcdcaa;»>$</span>(<span style=»color: #ce9178;»>»nav ul li a»</span>).<span style=»color: #dcdcaa;»>click</span>(<span style=»color: #569cd6;»>function</span>() {</div>
    <div>                <span style=»color: #6a9955;»>//if ($(«nav>ul>li>a>span»).css(«display») === «none») {</span></div>
    <div>                <span style=»color: #dcdcaa;»>$</span>(<span style=»color: #ce9178;»>»nav»</span>).<span style=»color: #dcdcaa;»>css</span>(<span style=»color: #ce9178;»>»width»</span>, <span style=»color: #ce9178;»>»180px»</span>);</div>
    <div>                <span style=»color: #dcdcaa;»>$</span>(<span style=»color: #ce9178;»>»nav>ul>li>a>span»</span>).<span style=»color: #dcdcaa;»>css</span>(<span style=»color: #ce9178;»>»display»</span>, <span style=»color: #ce9178;»>»inline»</span>);</div>
    <div>                <span style=»color: #6a9955;»>//}</span></div>
    <div>                <span style=»color: #c586c0;»>if</span> (<span style=»color: #9cdcfe;»>i</span> % <span style=»color: #b5cea8;»>2</span> === <span style=»color: #b5cea8;»>0</span>) {</div>
    <div>                    <span style=»color: #9cdcfe;»>rotation</span> += <span style=»color: #b5cea8;»>180</span>;</div>
    <div>                    <span style=»color: #9cdcfe;»>i</span>++;</div>
    <div>                } <span style=»color: #c586c0;»>else</span> {</div>
    <div>                    <span style=»color: #9cdcfe;»>rotation</span> -= <span style=»color: #b5cea8;»>180</span>;</div>
    <div>                    <span style=»color: #9cdcfe;»>i</span>++;</div>
    <div>                }</div>
    <div>                <span style=»color: #dcdcaa;»>$</span>(<span style=»color: #569cd6;»>this</span>).<span style=»color: #dcdcaa;»>parent</span>().<span style=»color: #dcdcaa;»>children</span>(<span style=»color: #ce9178;»>»ul»</span>).<span style=»color: #dcdcaa;»>slideToggle</span>();</div>
    <div>                <span style=»color: #dcdcaa;»>$</span>(<span style=»color: #569cd6;»>this</span>).<span style=»color: #dcdcaa;»>children</span>(<span style=»color: #ce9178;»>»span»</span>).<span style=»color: #dcdcaa;»>children</span>(<span style=»color: #ce9178;»>»i»</span>).<span style=»color: #dcdcaa;»>css</span>(<span style=»color: #ce9178;»>»transform»</span>, <span style=»color: #ce9178;»>»rotate(«</span> + <span style=»color: #9cdcfe;»>rotation</span> + <span style=»color: #ce9178;»>»deg)»</span>);</div>
    <div>                <span style=»color: #9cdcfe;»>bandera</span> = <span style=»color: #569cd6;»>true</span>;</div>
    <div>            });</div>
    <div>        });</div>
    <div>    <span style=»color: #808080;»><</span><span style=»color: #808080;»>/</span><span style=»color: #569cd6;»>script</span><span style=»color: #808080;»>></span></div>
    <div><span style=»color: #808080;»></</span><span style=»color: #569cd6;»>body</span><span style=»color: #808080;»>></span></div>
    <div><span style=»color: #808080;»></</span><span style=»color: #569cd6;»>html</span><span style=»color: #808080;»>></span></div>
    </div>

    #10604

    Gaston Pappaterra
    Participante

    Hola selma, me gustaría ayudarte Pero me resulta muy complicado por la forma en la que se muestra el código. Te recomiendo que uses visual studio code ,que lo pongas con espacios,  desde ahí lo pases a codepen y luego publiques un enlace.

     

    Saludos

Viendo 2 entradas - de la 1 a la 2 (de un total de 2)
  • Debes estar registrado para responder a este debate.

Píldoras Informáticas

Comencé esta aventura para dar soporte a mis alumnos presenciales. Con el apoyo de todos los que me seguís mi canal de YouTube y esta web han crecido mucho más de lo que yo esperaba. Gracias a todos por estar ahí.

Quién está aquí ahora

Foto del perfil de Joan Marin Domingo
Foto del perfil de Demian
Foto del perfil de Adria
Foto del perfil de MARIA JESUS CASADO DIEZ
Foto del perfil de Álvaro
Foto del perfil de Paloma Abia
Foto del perfil de JOAQUIN HIDALGO PEREZ
Foto del perfil de Miriam Sinisterra Pérez
Foto del perfil de JOSE GARCIA DE LA FUENTE