Вы знаете веб-сайт, который реализует строку меню под углом между 0 и 90 градусов?
Меня попросили реализовать строку меню, которая не является ни горизонтальной, ни вертикальной. Вот две кнопки в качестве примера:
Это - что-то плохо мне знакомое, так чтобы изучить, как сделать эту работу, я ищу сайт (или еще лучше, учебное руководство), который использует подобную строку меню. Какие-либо идеи?
4 ответа
Вы должны посмотреть здесь
http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/
или использовать вот так
Обновление:
/* for firefox, safari, chrome, etc. */
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
/* for ie */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
/* for opera */
-o-transform: rotate(-90deg);
см. Пример http://jsbin.com/ajoqe/4
Обновление: 2
или используйте это расширение
Универсальные преобразования CSS: Поворот (бесплатное расширение): http://www.dmxzone.com/go?17422#Overview
* На основе чистого CSS - Flash не требуется! * Полная кроссбраузерная совместимость - Универсальные преобразования CSS: поворотоснован на jQuery, строится только с HTML и CSS - ни Flash, ни чего! Он даже поддерживает IE6 наряду с другими основными браузерами. * Удобство для поисковых систем - универсальное преобразование CSS: поворот основан на чистом HTML и CSS и генерирует HTML-код, удобный для поисковых систем, который может быть хорошо проиндексирован всеми поисковыми системами и веб-пауками.
обновить 3
или использовать эту http://code.google.com/p/jquery-rotate/
Поддерживаются две реализации обработки изображений JavaScript:
- с использованием Фильтр DXImageTransform для Microsoft Internet Explorer
- с использованием объекта Canvas для других браузеров
Библиотека была протестирована с:
* Mozilla FireFox 2.0.0.2 * Internet Explorer 7.0 * Opera 9.1 (обратите внимание, что Opera 8 не поддерживается)
Преобразования CSS в настоящее время поддерживаются только через атрибуты CSS, зависящие от поставщика. См. Этот блог для кроссбраузерной поддержки .
То, что изображение расположено под углом, не означает, что область попадания (ссылка) должна быть под углом ...
{ {1}} Подобные вещи обычно выполняются с использованием изображений и - если вам нужна непрямоугольная область щелчка - с использованием карт изображений. Это не очень сложно сделать, но это намного больше, чем просто ul .
Возможности CSS поворота еще недостаточно широко распространены для достижения единообразного эффекта во всех браузерах, но это может быть вариант для создания кросс-браузерного меню, которое хорошо выглядит без вращения и отлично, когда повернутый.