Мне нужно адаптировать свой шаблон к мобильным версиям, не создавая разные файлы страниц для каждого случая или дочерние сайты Я думаю, что самый простой способ сделать это - изменить CSS-файлы, чтобы «переставить» некоторые элементы.
Итак, вот что я сделал до сих пор:
Я работаю с php.
Я использовал запросы @media, добавив внутрь <head> this: <link rel="stylesheet" type="text/css" media="only screen and (max-width: 700px)" href="/css/smartphones.css" />, поэтому он будет вызывать файл smartphones.css каждый раз, когда пользователи получают доступ к сайту с небольшого устройства.
Все идет довольно гладко, до тех пор, пока я не решил адаптировать выпадающее меню.
У меня есть выпадающее меню в чистом CSS, которое активируется при наведении мыши. Я использую: hover, чтобы меню выпало.
Я хочу заменить это большое выпадающее меню множеством пунктов (по горизонтали и вертикали) на одну кнопку, при этом onclick выпадет и покажет только пару вещей.
Для этого мне нужно адаптировать файл php-страницы, чтобы скрыть все раскрывающееся меню, и вместо этого показать выпадающее меню "mini-onclick". И вот что я не знаю, как это сделать.
Мне нужен некоторый -javascript, я думаю, - внутри моего тега body (поскольку меню появляется внутри тела), чтобы сказать что-то вроде:
Если экран меньше 700 пикселей, покажите этот код XXXX. Иначе продолжайте с остальной частью страницы.
Я планирую скрыть обычное выпадающее меню с помощью css внутри файла smartphones.css, но не знаю, как отобразить специальное выпадающее меню.
Любая помощь будет принята с благодарностью! СПАСИБО!
Rosamunda