Знаете ли вы веб-сайт, который реализует menubar под углом от 0 до 90 градусов?

Question

Меня попросили реализовать строку меню, которая не является ни горизонтальной, ни вертикальной. Вот две примеры кнопок:

Строка меню http://img130.imageshack.us/img130/4820/dropdownf.jpg

Это что-то новое для меня, поэтому, чтобы узнать, как заставить это работать, я ищу сайт (или, еще лучше, учебник), который использует похожую строку меню. Есть идеи?

Answer 1

Вы должны посмотреть здесь

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

* Pure CSS based - No Flash required! 
* Fully cross browser compatible - The Universal CSS Transforms: Rotate

основывается на jQuery, сборка только с HTML & CSS - нет Flash, что так всегда! Это даже поддерживает IE6 рядом с другим основные браузеры. * Удобный для поисковых систем - Универсальные CSS-преобразования: поворот чистый HTML и CSS на основе и генерирует HTML-код, дружественный для поисковых систем может быть хорошо проиндексирован по всем поискам двигатели и пауки сети.

обновление 3

или используйте это http://code.google.com/p/jquery-rotate/

Две обработки изображений JavaScript Поддерживаются реализации:

1. с использованием фильтра DXImageTransform для Microsoft Internet Explorer
2. использование объекта Canvas для других браузеров

Библиотека была протестирована с:

* Mozilla FireFox 2.0.0.2
* Internet Explorer 7.0
* Opera 9.1 (note Opera 8 is not supported)

Answer 2

То, что изображение находится под углом, не означает, что область попадания (ссылка) должна быть под углом ...

Answer 3

Подобные вещи обычно выполняются с использованием изображений и, если вы хотите, чтобы область щелчка была непрямоугольной, с использованием карт изображений. Это не очень сложно сделать, но гораздо больше работы, чем просто ul.

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

Answer 4

Преобразования CSS в настоящее время поддерживаются только через атрибуты CSS, зависящие от поставщика. См. Этот блог для кросс-браузерной поддержки .