CSS vs javaScript

JustinKO · #1 (**permalink**) 07/02/2014, 03:25

Hola a todos, os voy a hacer una pregunta muy genérica pero que siempre me trae la duda.
Yo en su día aprendí (no sé si erróneamente) que todo lo que se pudiera con css no se haga en javaScript, el caso es que ahora estoy haciendo un menú con tres niveles de navegación en el que se van desplegando los diferentes submenus según estás en la sección seleccionada.

Lo estoy haciendo sin usar javaScript solo con css. Esto que muestro abajo es solo una porción de código de uno de los submenus:

Código CSS:

Ver original.page-taxonomy-term-212   #menu-cortacesped > ul,
        .page-taxonomy-term-204  #menu-cortacesped #menu-cortacesped-hombre-pie ul,
        .page-taxonomy-term-204 #menu-cortacesped > ul,
            .page-taxonomy-term-170  #menu-cortacesped > ul,
            .page-taxonomy-term-170  #menu-cortacesped #menu-cortacesped-hombre-pie ul,
            .page-taxonomy-term-172 #menu-cortacesped > ul,
            .page-taxonomy-term-172  #menu-cortacesped #menu-cortacesped-hombre-pie ul,
            .page-taxonomy-term-171  #menu-cortacesped > ul,
            .page-taxonomy-term-171  #menu-cortacesped #menu-cortacesped-hombre-pie ul, 
            .page-taxonomy-term-173  #menu-cortacesped > ul,
            .page-taxonomy-term-173  #menu-cortacesped #menu-cortacesped-hombre-pie ul,
        .page-taxonomy-term-205  #menu-cortacesped #menu-cortacesped-hombre-sentado ul,
        .page-taxonomy-term-205 #menu-cortacesped > ul,
            .page-taxonomy-term-175  #menu-cortacesped > ul,
            .page-taxonomy-term-175 #menu-cortacesped #menu-cortacesped-hombre-sentado ul,
            .page-taxonomy-term-174  #menu-cortacesped > ul,
            .page-taxonomy-term-174  #menu-cortacesped  #menu-cortacesped-hombre-sentado ul,
            .page-taxonomy-term-176  #menu-cortacesped > ul,
            .page-taxonomy-term-176 #menu-cortacesped #menu-cortacesped-hombre-sentado ul
            {
                display: block;
            }

Este código habría que multiplicarlo más o menos por 10 (de los otros 10 submenus) , más luego añadirle otros tantos para los li y las a cuando son activas y tal y tal.

No sé si hay manera de simplificar este css, pero la pregunta que os hago es otra:

En un caso como éste que se crea un código tan largo ¿no me merece la pena usar 4 lineas de javaScript cuando el resultado sería el mismo? y ¿cuáles son los inconvenientes de usar un método u otro?

Saludos y espero no haberme extendido demasiado con la pregunta.

Muchas gracias a todos.

pzin · #2 (**permalink**) 07/02/2014, 03:41

Dicen por ahí que si en tu nomenclatura de variables —o clases en este caso— usas algún tipo de numeración es que algo estás haciendo mal.

A mi se me hace que esos selectores no tienen ningún sentido. A menos que tengas algo así:

Código HTML:

Ver original<div class=".page-taxonomy-term-212 page-taxonomy-term-204 page-taxonomy-term-170 page-taxonomy-term-172 page-taxonomy-term-171 page-taxonomy-term-173 page-taxonomy-term-205 page-taxonomy-term-175 page-taxonomy-term-174 page-taxonomy-term-176
  <nav id="#menu-cortacesped">
    <ul></ul>
  </nav>
</div>

Cosa que dudo. Entonces ¿estás repitiendo identificadores en tu HTML? Eso es algo que no se puede hacer, ya que estos son únicos. Habría que ver el HTML a ver porqué eso es así.

Luego si usas identificadores, no haría falta anteponer clases. Es decir, algo así:

Código CSS:

Ver original.clase_chula div > ul.lista_guay li a.rojo#venta

Es lo mismo que hacer:

Código CSS:

Ver original#venta

Ya que el identificador es único y sólo aparecerá una vez.

Y sí, todo lo que puedas hacer con CSS, no lo hagas con JavaScript, porque CSS es más rápido y porque si se puede hacer con CSS seguramente esté pensado para hacerse con CSS.

JustinKO · #3 (**permalink**) 07/02/2014, 04:14

Uff, no me quería meter en este fregado, sobre todo por no liaros más de la cuenta, pero ya que preguntas lo expongo que seguro me va a servir de mucho:

Cuando ves algo como esto .page-taxonomy-term-170 es la clase que le añade Drupal al <body> y con la clase que me permite diferenciar la página (sección) en la que me encuentro.

publico un fragmento de html del menú simplificado:

Código HTML:

Ver original<body class="page-taxonomy-term-170">
 <ul class="menu nav"> 
 ....         
    <li id="menu-cortacesped">
      <a href="/mi-web/cortacesped" >cortacesped</a>
      <ul>
          <li id="menu-cortacesped-hombre-pie">
            <a href="/mi-web/cortacesped/cortacesped-hombre-pie">cortacesped hombre a pie</a>          
            <ul>
                <li id="menu-cortacesped-manuales"><a href="/mi-web/cortacesped/cortacesped-manuales">cortacesped manuales</a></li>
                <li id="menu-cortacesped-hombre-pie-baterias"><a href="/mi-web/cortacesped/cortacesped-hombre-pie-baterias" >Hombre a pie baterías</a></li>
                <li id="menu-cortacesped-hombre-pie-gasolina"><a href="/mi-web/cortacesped/cortacesped-hombre-pie-gasolina">Hombre a pie gasolina</a></li>
                <li id="menu-cortacesped-hombre-pie-por-aspiracion"><a href="/mi-web/cortacesped/cortacesped-hombre-pie-por-aspiracion">Hombre a pie por aspiración</a></li>
            </ul>
          </li>
          <li id="menu-cortacesped-hombre-sentado" >
            <a href="/mi-web/cortacesped/cortacesped-hombre-sentado" title="Sección maquinaria de cortacesped hombre sentado">cortacesped hombre sentado</a>
            <ul>
                <li id="menu-cortacesped-hombre-sentado-baterias" ><a  href="/mi-web/cortacesped/cortacesped-hombre-sentado-baterias">Hombre sentado baterías</a></li>
                <li id="menu-cortacesped-hombre-sentado-gasolina" ><a  href="/mi-web/cortacesped/cortacesped-hombre-sentado-gasolina">Hombre sentado gasolina</a></li>
                <li id="menu-cortacesped-hombre-sentado-diesel"><a  href="/mi-web/cortacesped/cortacesped-hombre-sentado-diesel">Hombre sentado diesel</a></li>
            </ul>
          </li>
      </ul>
    </li>
    
 ......
 
 </ul>

En este caso, me encuentro en la sección contadesped-manuales (.page-taxonomy-term-170), y lo que hago en el código CSS es que al estar en esta sección, me abra el submenu donde me encuentro "menu-cortacesped-hombre-pie" y su menú padre "menu-cortacesped" (para que se vean ambos).

Fragmento del css solo de estas dos lineas:

Código CSS:

Ver original.page-taxonomy-term-212   #menu-cortacesped > ul,
        .page-taxonomy-term-204 #menu-cortacesped > ul,
        .page-taxonomy-term-204  #menu-cortacesped #menu-cortacesped-hombre-pie ul,
            .page-taxonomy-term-170  #menu-cortacesped > ul,
            .page-taxonomy-term-170  #menu-cortacesped #menu-cortacesped-hombre-pie ul,
        
 
 
            {
                display: block;
            }

Como veis en el código, está tabulado por profundidad, si estoy en la sección 170 me debe de abrir la 204 y la 212 que son sus padres. Si estuviera en la 204 solo me debería de abrir la 212.

Lo mismo me estoy complicando demasiado (si algo me caracteriza es de complicarme siempre más de la cuenta), pero no se me ocurría de otra manera de hacerlo para que me funcionara.

Saludos y muchas gracias por tu atención

EDITO:

Para una mejor comprensión os reemplazo los términos de taxonomía por nombre reales( en este caso .page-taxonomy-term-170 por .pagina-cortacesped.

Código CSS:

Ver original.pagina-cortacesped   #menu-cortacesped > ul,
      .pagina-cortacesped-hombre-pie #menu-cortacesped > ul,
      .pagina-cortacesped-hombre-pie #menu-cortacesped #menu-cortacesped-hombre-pie ul,
        .pagina-cortacesped-manuales #menu-cortacesped > ul,
        .pagina-cortacesped-manuales #menu-cortacesped #menu-cortacesped-hombre-pie ul,

JustinKO · #4 (**permalink**) 07/02/2014, 04:40

Y para muestra un botón.

Aquí está el código funcionando, para ver el funcionamiento hay que cambiar el número de taxonomía del body por uno de las clases del css (no pulsar en la lista) y entonces se ve como se van cerrando y abriendo los menús en cuestión

http://jsfiddle.net/JustinScript/3CeUE/

Si hay una manera más simple de hacerlo sería perfecto porque ademas de la cantidad de código que necesita es que es un lío que me está dejando la vista.

Saludos y muchísimas gracias de nuevo

Editado:

Cita:

Cosa que dudo. Entonces ¿estás repitiendo identificadores en tu HTML? Eso es algo que no se puede hacer, ya que estos son únicos. Habría que ver el HTML a ver porqué eso es así.

PD: releyendo vi que no respondí a la pregunta : No es que se repitan los id en el html, solo hay uno de cada, lo que pasa es que el css están contemplados las diferentes combinaciones de los divs de ese menú en las diferentes páginas (page-taxonomy-term-212, .page-taxonomy-term-204, .page-taxonomy-term-170 etc)