Интерактивная диаграмма на CSS и HTML

:hover


В очередной раз просматривая плагины для реализации всплывающих подсказок, наткнулся на замечательный пост.
Ничего сверхсложного и сверхсекретного в реализации не было, но она мне понравилась своей простотой и отсутствием javascript'a.
Обмозговав возможное применение, решил что на самой подсказке тоже могут быть подсказки, на подсказках второго уровня, могут быть подсказки 3его уровня и т.д. Можно сделать интерактивную блок-схему!
image

Реализация


Взяв за основу блок-схему для универсального решения проблем (прошу прощения, где попалась мне эта картинка, я уже не помню):
image
решил сделать ее интерактивной. Результат труда можно посмотреть по этой ссылке.
Скриншот для тех, кому лень кликать:
image

Теперь немного о коде


HTML

image

Структурная единица представляет собою span с текстом внутри. Внутри один или два блока a после каждого из которых новый span, и, следовательно, новая структурная единица.

CSS

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

Заключение


Я не претендую на то, что кто-то будет использовать мои наработки в своем проекте, но думаю что сие небольшое творение натолкнет кого-то на еще более экстравагантные идеи.

Еще раз моя блок-схема
О всплывающих подсказках на CSS
Поделиться публикацией
Похожие публикации
Ммм, длинные выходные!
Самое время просмотреть заказы на Фрилансим.
Мне повезёт!
Реклама
Комментарии 31
  • +1
    Спасибо. Отличная вещь возьму на заметку.
    • –1
      Улыбнуло не только исполнение, но и подписи в вариантах ответов
    • +2
      Не знаю зачем она, но прикольненько
    • 0
      Подобная идея тоже приходила в голову. И даже реализована была. Но без вложений, не нашел для нее тогда применения.
      Как вариант, можно использовать для реализации многоуровневого меню, например.
      • +14
        Лучше сделать появление по клику. А то плохо, что схема пропадает, если с нее убрать курсор.
        • +1
          Тут фишка в том что это на CSS (just for fun). По клику вроде надо будет Javascript
        • 0
          можно заюзать transition и плавное появление… без яваскриптов и прочего) хотя на вкус и цвет
        • 0
          Отлично. Мои пожелания: если мышь случайно уходит в сторону (например когда к самым краям рулишь быстро) — приходится заново начинать. Если это подлежит исправлению — было бы неплохо :)
          • +3
            Чего только не придумают, лишь бы не использовать Javascript :)
            Я так выпадающие вложенные меню делал, только вместо span брал ul и li.
            Проблема в том, что стоит отвести курсор мышки хоть на полпикселя в сторону, как вся многоярусная структура схлопывается, и нужно начинать всё с начала.
            Как вариант, можно сделать (полу)прозрачные рамки-тени потолще, чтобы мышка пореже убегала.
            • 0
              CSS3 Cookbook прям какой-то
              • +5
                Поздравляю, вы только что изобрели выпадающее меню на ксс
                • +1
                  В ИЕ7 пипец, а ведь можно было бы сделать, все эти селекторы он понимает.
                  • +1
                    Да и еще совет — подсветите всю цепочку выбранных да/нет, а не только наведенные. Это можно сделать, если немного перестроить верстку.
                    • +3
                      Вся схема очень уязвима при скроллинге. Если разрешение около 1000, то при 3-4 наведении придется скроллить и все пропадет.
                    • +3
                      Навеяно топиком, нужен совет: как вы думаете, имеет ли смысл делать аналог MS Visio на HTML5?
                      Есть идея сделать такой проект, чтобы UML диаграммы можно было делать в браузере, ну и даже совместно их редактировать. Пользоваться будут?
                      • 0
                        Ну как студент говорю, что при защите диплома это очень хороший сервис будет.
                        Да и на предприятиях тоже полезный, конечно далеко не все будут пользоваться, но думаю будут.
                        ИМХО конечно.
                        • 0
                          Я бы с удовольствием стал пользоваться! Это ж так удобно! Главное, чтоб в картинки потом всё можно было перевести :)
                          Вообщем, жду от вас это чудо)
                          • 0
                            А лучше не только в картинки, но и в формат MS Visio, что бы потом в самой программе можно было открыть файл и подправить уже без доступа к сети.
                          • 0
                            Ну в целом хорошая идея, но в Google Docs можно нарисовать, пусть не по нотации но можно, к тому же еще и пользователи будут видеть онлайн рисование
                            • 0
                              Если сделаете конкуретноспособным с www.lucidchart.com/ то пользоваться будут:)
                              • +1
                                мне кажется, что тут есть небольшая разница в несколько человеко-лет :)
                              • 0
                                Не думаю, что для таких вещей нужен плагин. Интерактивная схема реализуется на jquery двумя строчками. Ну и немного css, все равно придется менять дизайн плагина под свой.
                                • 0
                                  там вообще не нужен ни jquery, ни плагин. Весь смысл в псевдоклассе :hover, слоях и позиционировании.
                                • 0
                                  Прикольно. )
                                  Но если случайно курсор сдвигается с блока, все варианты пропадают. Особенно это печалит, когда дошел почти до конца — ломает заново отвечать на вопросы. )
                                  • +3
                                    <sarcasm>
                                    Как, в этом посте ещё ничего не написали про IE6?
                                    </sarcasm>
                                    • 0
                                      Эх… беда, беда с вашим сервером…
                                      А так хотелось по-наводить на эти симпатичные плашки ))
                                      • –1
                                        Спасибо! Вот как раз такое нужно верстать. Как нельзя кстате!
                                        • 0
                                          Всё хорошо, если бы не исчезало дерево при потере ховера и не приходилось бы из-за этого всё с начала проходить

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