Home Foros FOROS PARA AYUDAROS ENTRE VOSOTROS. EL PROFESOR AQUÍ NO RESPONDE Foro de CSS Menú desplegable vertical de 3 niveles

Menú desplegable vertical de 3 niveles

Viendo 3 entradas - de la 1 a la 3 (de un total de 3)
  • 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

    #16213

    Juan Hernandez
    Participante

    Te recomiendo que lo realices en javascript.
    <p style=»box-sizing: border-box; margin: 10px 0px; -webkit-font-smoothing: antialiased; font-size: 14px; font-family: Lato; color: #444444;»>_____________</p>
    <p style=»box-sizing: border-box; margin: 10px 0px; -webkit-font-smoothing: antialiased; font-size: 14px; font-family: Lato; color: #444444;»>trabajo en una AGENCIA DE MARKETING DIGITAL</p>

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