Каковы некоторые разумные альтернативы карте <area>изображения? - PullRequest
Новая
       35

Каковы некоторые разумные альтернативы карте <area>изображения?

4 голосов
/ 16 июня 2011

Является ли <area> по-прежнему лучшим способом работы с нерегулярными навигационными меню или есть лучший способ?

Мое навигационное меню выглядит следующим образом:

enter image description here

Ответы [ 2 ]

4 голосов
/ 16 июня 2011

Вы можете использовать стандартную навигационную разметку: 

<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>

, а затем выполнить 2D-преобразование CSS (наклонить элемент вокруг оси 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);    
}

enter image description here

См. fiddle для живого примера.См. this для информации о поддержке браузера.

Как написать фильтр IE

Преобразовать -10 градусов в радиан, набрав это в google:

-10 градусов по радианам

Вы получите:

-10 градусов = -0.174532925 радиан

Затем введите значение M21 .

Почему вы используете этот метод

  1. Вы беспокоитесь о времени загрузки страницы ивам не нужен еще один HTTP-запрос для изображения.
  2. Стандартная разметка навигации имеет лучшую семантику, особенно если вы переключаетесь на HTML5 и используете элемент nav, который используется программами чтения с экрана, чтобы выяснить, где находится навигация.
1 голос
/ 16 июня 2011

Не видя никакого кода или чего-либо из того, что вы на самом деле пытаетесь выполнить, я могу смутно сказать, да.Вы можете использовать списки с идентифицированными элементами списка и вручную размещать их на своей странице.

Но, опять же, не видя того, что вы пытаетесь достичь, очень трудно сказать.

...