Всплывающая инструментальная панель на CSS и без JavaScript

Все привет!

Все веб-программисты сталкиваются с табличным представлением данных — это частый элемент панелей администрирования, всевозможных списков и т.п.

Очень часто необходимо, помимо данных, вывести сервисные ссылки — удаление, редактирование, статистика. И тут начинается — вывод слева, вывод справа… Кто на что горазд. Сам я использовал как тот, так и другой способы. Все бы ничего — но в условиях жесткого ограничения на размер блока, куда выводится таблица, хочется видеть чем больше информации, тем лучше. Вот тут и встал вопрос — а куда девать панель сервисных кнопок?

Ответ родился такой — можно снизу, в другую строку.

Реализация

Под строкой с данными, скажем, в 4 ячейки, идет новая строка с одной, объединенной ячейкой. В этой ячейке находится элемент DIV, у которого свойство position установлено в relative. Внутри него, находится еще один DIV, но с position:absolute. Последний DIV — это и есть наша панель, которая находится в зависимости от позиционирования либо слева, либо справа.

Сам стиль:

Как это работает.

Когда мы наводим указатель на строку, срабатывает правило tr:hover + tr td .with-toolbar > div.row-toolbar и нижняя строка становится видна. Когда мы наводим указатель на сервисную панель, тогда срабатывает правило div.row-toolbar:hover. Остальныя правила — просто украшательства.

Рабочий пример использует Bootstrap CSS для оформления, и в элементах ссылок. Я не великой знаток CSS, так что возможно можно сделать проще. Но я сделал пока что так. Смотреть — тут.