Juguemos a Diagramar 3

[Rafael]

Concentrémonos en el menú y discutamos algunos puntos.

Tenemos un Menú "Drop Down" de la siguiente manera.




1) ¿Debe tener contenido la sección negra? o solamente debe desplegar la sección drop down.




2) Si la sección "GHI" fuera una sección sin subdivisiones, digamos "Contacto" ¿Modifica mi decisión anterior?


3) En el caso de una tablet, donde la función OnMouseOver es cuestionable; ¿Modifica mi primer decisión?

Contesta la encuesta y discute y diagrama tu decisión.

[pzin]

En realidad la respuesta es depende.

Semánticamente, si es un menú de los que se suelen hacer, que toda cosa es una enlace, si, debe de tener contenido (contenido = enlace). Ahora, si no va a tener ningún enlace, entonces no lo hagas con un enlace; pon un span dentro de li. Existe la fea costumbre de usar un enlace para cualquier cosa; por ejemplo para acciones de JavaScript, todo son enlaces.

En casos así, yo prefiero poner un span o cualquier otra cosa, se puede usar cursor para simular el enlace —ya que los usuarios están acostumbrados a la manita— y luego aplicar el :hover o la acción JavaScript a ese elemento.

La segunda pregunta, la solucionas mezclando enlaces con "espanes" en selectores:

Código CSS:

ul li a,
ul li span {
}
 

Así te quedan iguales aunque unos sean funcionales y otros no. Es decir, al final todo pasa por usar cada cosa para lo que es.

* Supongo que es malo que JKL me suene al surfero de un capítulo de Bob Esponja.

[emprear]

Un poco lo de @Bonez, con lo cual presentar como "encuesta" el caso, no me parece correcto.
Yo en particular haría lo siguiente,


No pondría links en la sección negra y crearía un submenu (ficticio si que quiere) para el tercer menu, si es que este no tiene subdivisiones
Ejemplo
si fuese "contacto" desplegaría --> "enviar consulta"
si fuese "acerca de" desplegaría --> "conózcanos"

Luego si, que el hover muestre la mano y desplegar los 3 submenues

Saludos

[memoadian]

en mi caso yo si pondria enlaces.

salvo si no quisiera que la gente de click sin ver el dropdown

[ryugen]

A mi manera de entender, yo maquetaría el diagrama de la siguiente manera:

Código HTML:

<nav role="navigation">
    <ul>
        <li>
            <a href="#ABC">ABC</a>
            <ul id="ABC">
                <li><a href="#JKL">JKL</a></li>
                <li><a href="#RST">RST</a></li>
                <li><a href="#XYZ">XYZ</a></li>
            </ul>
        </li>
        <li>
            <a href="#DEF">DEF</a>
            <ul id="DEF">
                <li><a href="#MNÑ">MNÑ</a></li>
                <li><a href="#UVW">UVW</a></li>
            </ul>
        </li>
        <li>
             <a href="#GHI">GHI</a>
        </li>
    </ul>
</nav>
 

Me parece que esa manera desde mi punto de vista es la manera más semántica y accesible para maquetarlo.

Semántico: porque estamos frente a la navegación del contenido en forma de listas desordenadas

Accesible, porque el elemento padre enlaza a la sublista.

Visualmente dejaría claro, que links generan dropdown y cuales no.

A nivel interración permitiría tanto la posibilidad de despegar los menu "hover" o "clickeando"

[memoadian]

Iniciado por ryugen

A mi manera de entender, yo maquetaría el diagrama de la siguiente manera:

Me parece que esa manera desde mi punto de vista es la manera más semántica y accesible para maquetarlo.

Semántico: porque estamos frente a la navegación del contenido en forma de listas desordenadas

Accesible, porque el elemento padre enlaza a la sublista.

Visualmente dejaría claro, que links generan dropdown y cuales no.

A nivel interración permitiría tanto la posibilidad de despegar los menu "hover" o "clickeando"

Excelente, salvo por la "interracion" estoy completamente de acuerdo

[ryugen]

Iniciado por memoadian

Excelente, salvo por la "interracion" estoy completamente de acuerdo

memoadian tu como llevarías adelante la interacción?

saludos, y gracias

[memoadian]

igual que tú solo era una pequeña jocosidad de tu error de dedo

[Rafael]

Y entonces para una tablet, ¿el evento desplegar menú sería al hacer click?

Algunos sistemas como Wordpress ponen un tema en la parte negra. ¿Se debería de corregir?

[ryugen]

Iniciado por Rafael

Y entonces para una tablet, ¿el evento desplegar menú sería al hacer click?

"Click" o "tap".

Generalmente cuando hablo de click, también me estoy refiriendo al "tap" en interfaces móviles a menos que aclare lo contrario.

Es mi error no haberlo aclarado

[pzin]

¿Y si el menú negro no tiene sección a enlazar? Era una de las cuestiones. Aquello de meter enlaces donde no van no es semántico. Reminiscencias de un pasado IEnmortal.

Para el asunto de los tablets y demás touchscreens hubiera que meter un onFingerClose en la especificación. O que en Samsung le den más caña a lo del eye-tracking o como lo llamen y metemos un onPupilFocus.

[ryugen]

Iniciado por Bonez

¿Y si el menú negro no tiene sección a enlazar? Era una de las cuestiones. Aquello de meter enlaces donde no van no es semántico. Reminiscencias de un pasado IEnmortal.

El enlace es hacia la sub lista, lo cual lo hace más semántico y accesible al mismo tiempo, porque al navegarlo te lleva directamente a su contenido.

[pzin]

Iniciado por ryugen

El enlace es hacia la sub lista, lo cual lo hace más semántico y accesible al mismo tiempo, porque al navegarlo te lleva directamente a su contenido.

No me había fijado.

Aunque sigo pensando que no es adecuado poner un enlace donde no va un enlace. Que forme parte de la lista no significa que forme parte de la lista de enlaces. Es un elemento más que no es, o no debería, ser un enlace.

La cuestión es que con CSS se le puede dar la forma que se quiera a la cosa negra, poner un cursor, :hover, etc. Por eso, habiendo posibilidades de no poner un enlace no necesario no veo razón para ponerlo.

Quedándose la cosa en algo así:

Código HTML:

<nav>
    <ul>
        <li>
            <span>ABC</span>
            <ul id="abc">
                <li><a href="#jkl">JKL</a></li>
                <li><a href="#rst">RST</a></li>
                <li><a href="#xyz">XYZ</a></li>
            </ul>
        </li>
        <li>
            <span>DEF</span>
            <ul id="def">
                <li><a href="#mnñ">MNÑ</a></li>
                <li><a href="#uvw">UVW</a></li>
            </ul>
        </li>
        <li>
             <a href="#ghi">GHI</a>
        </li>
    </ul>
</nav>
 

Sea el dispositivo que sea, actuará igual con span que con a.

[ryugen]

Iniciado por Bonez

No me había fijado.

Aunque sigo pensando que no es adecuado poner un enlace donde no va un enlace. Que forme parte de la lista no significa que forme parte de la lista de enlaces. Es un elemento más que no es, o no debería, ser un enlace.

La cuestión es que con CSS se le puede dar la forma que se quiera a la cosa negra, poner un cursor, :hover, etc. Por eso, habiendo posibilidades de no poner un enlace no necesario no veo razón para ponerlo.

Quedándose la cosa en algo así:

Código HTML:

<nav>
    <ul>
        <li>
            <span>ABC</span>
            <ul id="abc">
                <li><a href="#jkl">JKL</a></li>
                <li><a href="#rst">RST</a></li>
                <li><a href="#xyz">XYZ</a></li>
            </ul>
        </li>
        <li>
            <span>DEF</span>
            <ul id="def">
                <li><a href="#mnñ">MNÑ</a></li>
                <li><a href="#uvw">UVW</a></li>
            </ul>
        </li>
        <li>
             <a href="#ghi">GHI</a>
        </li>
    </ul>
</nav>
 

Sea el dispositivo que sea, actuará igual con span que con a.

Sí, pero ... de esa forma ABC carece de significado y si es así por que se encuentra ahí? El significado que yo le veo a ABC es titular o tipificar la lista.

A lo que voy es que ABC representa la agrupación de una cantidad de enlaces, si lo marcas como un span perderá completamente su sigficado. Una persona en un lector de pantalla no podrá notarlo.

Y porque motivo digo esto, porque supongamos

que ABC = Sucursal Uno y
DEF = Sucursal Dos

y sus subitems fueran "Ubicación" y "Contáctenos", como se diferenciarian si no se le están dando sigficado

Creando un link en ABC y en DEF que apunte a la sublista se está creando una relación entre ellos. En este caso puntual porque la sublista no amerita crear toda una nueva página, pero es de pensar que podría serlo tranquilamente, el link estaría apuntadola (en este caso al contenido dentro del documento)

[eazyduiz]

Que post tan bueno! solo falto algo, el código css!!!
seria muy útil poder ver diferentes códigos para nosotros los novatos!