Menú desplegable vertical de 3 niveles

Viendo 3 entradas - de la 1 a la 3 (de un total de 3)

Autor

Entradas
25 septiembre, 2019 a las 2:37 pm #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>

22 octubre, 2019 a las 4:49 am #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

23 febrero, 2021 a las 11:12 pm #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>
Autor

Entradas

Viendo 3 entradas - de la 1 a la 3 (de un total de 3)

Debes estar registrado para responder a este debate.