html - sensibles - ¿Cuáles son algunas alternativas razonables a un mapa de imagen<area>?

html map area

Question

¿ <area> sigue siendo la mejor manera de manejar menús de navegación irregulares, o hay una mejor manera?

Mi menú de navegación se ve así:

Answer 1

Puede usar el marcado de navegación estándar:

<div id="nav">
    <ul>
        <li><a class="active" href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>

y luego hacer una transformación CSS 2D (sesgar el elemento alrededor del eje Y):

#nav {
    -webkit-transform: skewY(-10deg);
    -moz-transform: skewY(-10deg);
    -ms-transform: skewY(-10deg);
    -o-transform: skewY(-10deg);
    filter: progid:DXImageTransform.Microsoft.Matrix(
        M11=1, M12=0,
        M21=-0.174532925, M22=1);
    transform: skewY(-10deg);    
}

Vea este violín para un ejemplo en vivo. Consulte esto para obtener información de soporte del navegador.

Cómo escribir el filtro IE

Convierta -10 grados a radian tecleando esto en google:

-10 grados a radianes

Conseguirás:

-10 grados = -0.174532925 radianes

Luego, conecte el valor en M21 .

¿Por qué usarías este método?

1. Le preocupa el tiempo de carga de la página y no desea otra solicitud HTTP para la imagen.
2. El marcado de navegación estándar tiene una semántica mejor, especialmente si cambia a HTML5 y utiliza el elemento de nav que utilizan los lectores de pantalla para descubrir dónde está la navegación.

Answer 2

Sin ver ningún código ni nada de lo que realmente estás tratando de lograr, puedo decir vagamente, sí. Puede usar listas con ítems de lista idd y colocarlos manualmente en su página.

Pero nuevamente, sin ver lo que intentas lograr es muy difícil de decir.