Меню для мобильной версии сайта. Как "повесить" меню на кнопку

https://extensions.joomla.org/extensions/extension/?searchall=mobile&filter%5Btags%5D%5B%5D=&filter%5Bcore_catid%5D=65&filter%5Bincludes%5D=&filter%5Bversions%5D=&filter%5Btype%5D=free&filter%5Bhasdemo%5D=&order=&filter%5Bnewupdated%5D=&filter%5Bscore%5D=&filter%5Bfavourites%5D=&dir=DESC&limitstart=0&controller=filter&view=extension&layout=list&Itemid=145&clearorders=0&clearfilters=1

http://www.designchemical.com/lab/jquery-slick-plugin/getting-started/

Samail, спасибо конечно, за попытку помочь.

Но тут есть 2 момента:

1. Плагины не хотим применять. При нагрузке 40 К посетителей, лишний плагин подключать не хочется.

2. Во 2-ой ссылке рассматривается то же плагин. Да и список у нас уже готовый, точнее модуль меню (не как в примере).

Яваскрипту какая разница сколько посетителей ...тем более что судя по счётчику метрики на вашем сайте, посетителей у вас 100-200 в день, а не 40 тысяч.

например

js + css

если < 520

@media all and (max-width: 520px) {

- скрыть меню

- показать кнопку

}

- по клику на кнопку выезжает или всплывает мобильное меню, как угодно

если >520

- скрыть кнопку

- скрыть моб. меню

- показать обычное меню

меню может быть одно - сверстанное в 2 вариантах - обычное и моб.

CSS + jQuery

1 - Скрываем меню в мобильной и планшетной версии с помощью медиа запросов

2 - Делаем видимой плавающую кнопку в мобильной и планшетной версии с помощью медиа запросов

3 - С помощью jQuery добавляем классы по клику на плавающую кнопку, чтобы меню стало видимым.

$(function(){ // Функция для меню

	$('.ИМЯ-КЛАССА-КНОПКИ').click(function(){ // Выбираем классы для кнопок вкл/выкл меню

		$('КЛАСС-НЕВИДЕМОГО-МЕНЮ').toggleClass('КЛАСС-ВИДИМОГО-МЕНЮ'); // Делаем блок меню видимым/невидимым по клику присваивая класс

		$('body').toggleClass('no-hidden'); // Блокируем прокрутку основного сайта при открытом меню

	});

});

4- Стилизуем менюху в мобильной и планшетной версии

А вот не скажите, Page Speed Insight ещё как ругается на лишние скрипты. Да и Яндекс Маркет очень часто 404 ошибку дает, хотя счетчик Яндекс Метрика молчит как рыба. Поэтому к быстродействию требования строгие.

Точно такой же прием (метод решения) будет стоять на https://mathematics-tests.com, а на нем в октябре (пора контрольных работ), счетчик и поболее будет.

На внешние - да (в том случае когда там добротно кэш не установлен).

На лишние - нет (на разве кто-то будет что-то лишнее добавлять? 😂).

Пруф с личного сайта где JS кода вдоволь ☝. Слабонервным не смотреть.

Так вы дубли скриптов уберите, оставшееся скрипты и CSS в один файл объедините и сократите, сразу меньше ругаться будет, а тот несчастный скриптик который меню выводит погоды вам не сделает.

Всё это (почти) можно сделать опять-же плагином https://www.jch-optimize.net/downloads.html

если < 520

@media all and (max-width: 520px) {

- скрыть меню

- показать кнопку

Это уже реализовано, осталось на кнопку "повесть" меню.

---------- Добавлено 18.08.2017 в 21:05 ----------

Спасибо, конечно,но ещё раз повторяю, плагин не будем устанавливать, нагружает сильно. Хостер и так жалуется, когда под 40 К пользователей.

Вот это сделано:

если < 520 @media all and (max-width: 520px) {

- скрыть меню

- показать кнопку }

- по клику на кнопку выезжает или всплывает мобильное меню, как угодно

если >520

- скрыть кнопку

- скрыть моб. меню

- показать обычное меню"

Не получается "повесить" на кнопку модуль с меню.

Хостер - не гуглоспид, ему по барабану жабаскрипт, потому как тот на клиентской стороне работает.

Что значит "не получается"? Функцию onclick не можете прицепить?