Мобильное меню, строка поиска, кнопка вверх / обычный JS, без JQuery

Цена договорная

29 октября 2020, 11:35 • 2 отклика • 27 просмотров

Добрый день.
Имеется HTML шаблон страницы сайта.

Задачи
1) Выпадающее меню на мобильных устройствах
2) Строка поиска: появление на десктопах и мобильных устройствах
3) Кнопка прокрутки страницы "вверх"

Реализация нужна без использования JS-библиотек, типа jquery. Просто на JS+CSS

Подробнее по каждой из задач
*** Выпадающее меню на мобильных устройствах
1) Сделать выпадающее меню на мобильных устройствах
- кнопки при отображении на мобильных уже подготовлены
- меню должно функционировать точно также, как и на версии сайта https://allfinancelinks.com/
- при клике на кнопку меню она меняется на кнопку закрытия меню
- заголовки в меню являются кнопками, которые открывают или закрывают скрытые блоки
- отдельно нужна возможность, чтобы какой-то из блоков был открыт постоянно
- иконка рядом с закрытым блоком - "+", если блок открыт "-" (могу дать SVG или PNG)
- соотв. нужно разработать стили для мобильного меню
2) Разобраться в css для меню сайта
- как организовать выпадающее меню на Десктопе, чтобы списки, которые идут вторые по вложенности отображались "рядом" (скриншот 1)
- реализовать такую возможность

*** Строка поиска: появление на десктопах и мобильных устройствах
Кнопка поиска видна на десктопах и мобильных.
При клике на кнопку должна показываться форма поиска. Форма поиска находится внутри

, код размещен в конце страницы, она скрыта.

Десктоп
При клике форма должна появляться в верхнем блоке, иметь фокус ввода, кнопку закрыть. Пример взял с сайта habr.com

Скриншот как это должно выглядеть во вложении (№2)

Мобильная версия
При клике по кнопке "поиск", кнопка "исчезает", кнопка меню превращается в кнопку "закрыть", форма всплывает под блоком header. должна работать точно также, как и на сайте https://allfinancelinks.com

При этом оставшаяся часть страницы "затемняется"

*** Кнопка прокрутки страницы "вверх"
Добавить на сайт, десктоп + мобильный кнопку прокрутки вверх.
Обычный функционал такой кнопки, если пользователь прокрутил какую-то часть страницы, кнопка появляется внизу-справа. Если прокрутили обратно наверх - исчезает.

Внешний вид, как на главной Яндекса https://yandex.ru/

------
Файлы

В приложении HTML шаблон страницы, с вложенными стилями CSS ----> ПРИКРЕПИТЬ нельзя, могу отправить через мессенджеры или иным способом.
Для каждого из блоков необходимо создать отдельный файл Java Script, весь код CSS, который будет добавлен необходимо разместить в соответствующих файлах и обозначить комментариями.

Результат работы

Результат работы должен быть в виде шаблона, куда добавлены необходимые строки кода, css в соответствующих файлах, java script в отдельных файлах. Т.е. если открыть файл в браузере - весь функционал должен работать) Или закачать на хостинг для теста

Файлы