Сен
5th

Сделано: Меню из шариков

round_menu_220x360

    Оригинальное 2-х уровневое меню из шариков


Требовалось:

  • Исходное состояние — левый столбик(главное меню) развёрнут, правый — подменю скрыт;

  • По наведению курсора мыши на шарик из левого столбика — шарик увеличивается в размере, показывается меню уровня 2, относящееся к этому шарику;

  • Конечное состояние: по нажатию левой кнопкой мыши на шарик-пункт меню или подменю — переход по ссылке на соответствующий раздел сайта.

  • После этого: в подменю шарик пункта меню в котором вы находитесь закрашивается;

  • Шарики должны быть прозрачные.


  Наиболее сложным оказалось плавно увеличивать размер кольца — шарика.

Это можно реализовать тремя способами:

  • Математически — рисовать окружности заданного радиуса;
  • на СSS3 — растягивать рисунок-фон блока при увеличении его размера;
  • Вставить картинку, поверх неё вставить текст и растягивать её по ширине растущего блока. Однако это решение противоречит спецификации CSS, требующей фиксированный размер картинок.


Первый способ не работает в IE, второй не работает в старых броузерах(не понимающих CSS3), поэтому был реализован третий вариант. Он работает во всех броузерах.

Ещё можно было бы комбинировать первые два, подставляя для IE другую таблицу стилей. Но Microsoft отменяет условные комментарии «if IE» начиная с IE 10. При этом заявляет о том, что теперь не будет способа идентифицировать новые версии IE.

Вы должны быть авторизованы чтобы добавить комментарий.