vyshkant
@vyshkant
developer

Как реализовать шестиугольные пункты меню на html+css: background, border, href-ы и hover-эффекты?

Здравствуйте!
Стала задач разработать меню сайта в виде т.н. "пчелиных сот" - 8-ми шестиугольников, соприкасающихся друг с другом. В самих шестиугольниках проблемы нет, однако для этого меню нужны также ховер-эффекты. С этим и сложности:
* если делать разметку шестиугольных областей через map+area, то ховеры сделать не получится;
* если каждый li делать с шестиугольным бэкграундом, и даже если, снова таки, для ли сделать map+area для зоны клика, то область активации ховера всё равно будет квадратной;
* про возможности css3 нарисовать такую фигуру молчу, потому как там та же проблема с прямоугольностью областей.

Итого, нашел JS-библиотеку рафаэль, которая генерирует svg-шку с заданными областями и дает возможность назначать им ховеры, но не могу разобраться с простановкой ссылок. Как вариант вижу наложение прозрачного изображения с map-area на данную svg-шку, но это уже будут даже не костыли, а протезы.

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

Спасибо.
  • Вопрос задан
  • 5597 просмотров
Решения вопроса 1
smilingcheater
@smilingcheater
Пример jsfiddle.net/5h3aF
Пока набивал, меня уже опередили :)
Воспользуйтесь псевдо-элементами after и brfore, поверните их на +/-60 градусов через transform: rotate(60deg);
Работает, естественно, только в тех браузерах, которые поддерживают трансформации (IE9+)
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы