D.iK.iJ / JavaScript примеры / Адаптивное меню на Джаваскрипт и CSS - из любого блока или ячейки таблицы [скачать]


Так как я много занимаюсь адаптацией старых табличных сайтов под телефоны и планшеты (мобильные устройства), часто возникают вполне штатные ситуации. Например, адаптация табличного сайта с тремя колонками. И часто бывает, что одно из условий - работать только CSS стилями и не трогать основной дизайн.

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

Обычная таблица:
Левая колонка Контент Правая колонка

Адаптивная таблица:
Левая колонка Контент Правая колонка

Таблица, у которой есть меню:
Левая колонка Контент Правая колонка

Открыть меню можно по кнопке в левом верхнем углу экрана. И свайпом - если провести пальцем на мобильном слева направо.
Сам скрипт легко найти в исходном коде этой страницы.

Единственные настройки - указать нужному элементу меню id="leftmenu". Ну и показывать или скрывать нужные элементы через медиа-запросы: @media screen and (max-width: 775px) { //стили, если экран меньше 775px }