Мобильное меню, строка поиска, кнопка вверх / обычный JS, без JQuery — Заказы — Хабр Фриланс
Заказ в архиве, недоступен для поиска и на него нельзя откликнуться.
Цена договорная
29 октября 2020, 11:35 • 2 отклика • 27 просмотров
Добрый день.Имеется HTML шаблон страницы сайта.
Задачи
1) Выпадающее меню на мобильных устройствах
2) Строка поиска: появление на десктопах и мобильных устройствах
3) Кнопка прокрутки страницы «вверх»
Реализация нужна без использования JS-библиотек, типа jquery. Просто на JS+CSS
Подробнее по каждой из задач
*** Выпадающее меню на мобильных устройствах
1) Сделать выпадающее меню на мобильных устройствах
— кнопки при отображении на мобильных уже подготовлены
— меню должно функционировать точно также, как и на версии сайта https://allfinancelinks.com/
— при клике на кнопку меню она меняется на кнопку закрытия меню
— заголовки в меню являются кнопками, которые открывают или закрывают скрытые блоки
— отдельно нужна возможность, чтобы какой-то из блоков был открыт постоянно
— соотв.
нужно разработать стили для мобильного меню 2) Разобраться в css для меню сайта
— как организовать выпадающее меню на Десктопе, чтобы списки, которые идут вторые по вложенности отображались «рядом» (скриншот 1)
— реализовать такую возможность
*** Строка поиска: появление на десктопах и мобильных устройствах
Кнопка поиска видна на десктопах и мобильных.
При клике на кнопку должна показываться форма поиска. Форма поиска находится внутри
Десктоп
При клике форма должна появляться в верхнем блоке, иметь фокус ввода, кнопку закрыть. Пример взял с сайта habr.com
Скриншот как это должно выглядеть во вложении (№2)
Мобильная версия
При клике по кнопке «поиск», кнопка «исчезает», кнопка меню превращается в кнопку «закрыть», форма всплывает под блоком header. должна работать точно также, как и на сайте https://allfinancelinks.com
При этом оставшаяся часть страницы «затемняется»
*** Кнопка прокрутки страницы «вверх»
Добавить на сайт, десктоп + мобильный кнопку прокрутки вверх.
Обычный функционал такой кнопки, если пользователь прокрутил какую-то часть страницы, кнопка появляется внизу-справа. Если прокрутили обратно наверх — исчезает.
Внешний вид, как на главной Яндекса https://yandex.ru/
——
Файлы
В приложении HTML шаблон страницы, с вложенными стилями CSS —-> ПРИКРЕПИТЬ нельзя, могу отправить через мессенджеры или иным способом.
Для каждого из блоков необходимо создать отдельный файл Java Script, весь код CSS, который будет добавлен необходимо разместить в соответствующих файлах и обозначить комментариями.
Результат работы
Результат работы должен быть в виде шаблона, куда добавлены необходимые строки кода, css в соответствующих файлах, java script в отдельных файлах. Т.е. если открыть файл в браузере — весь функционал должен работать) Или закачать на хостинг для теста
- Файлы
- 01-Menyu_stolbets…
- 02—Stroka-poisk…
Поделиться
2 года назад
2 года назад
Войдите или зарегистрируйтесь, чтобы откликаться на заказы
При переводе заказа из архивного в актуальный, текущий исполнитель будет снят с задачи.
Выберите тип сделки
С безопасной сделкой вы всегда сможете вернуть средства, если что-то пойдет не так. С простой сделкой вы самостоятельно договариваетесь с исполнителем об оплате и берете на себя решение конфликтов.
Безопасная сделка
Как создать кнопку «Вверх» на сайте
Здравствуйте, уважаемые читатели. Сегодня я расскажу Вам о том, как я реализовал кнопку «Вверх» на своём блоге. Прежде всего, я решил сделать кнопку «Вверх», по тому, что эта кнопка в один клик позволяет подняться в начало статьи. Да и честно говоря, параметры юзабилити (удобство пользования) учитываются поисковыми системами. То есть при наличии кнопку «Вверх» отпадает необходимость мучать колесо прокрутки на мышке. И вот это удобство для пользователя положительно учитывается поисковыми системами.
Прежде чем установить кнопку на своём блоге, я занялся поиском оптимального решения. Самым простым способом оказалось, как вы наверное догадались, установка плагинов.
Содержание
- Установки кнопки «Вверх» с помощью плагина для WordPress
- Установки кнопки «Вверх» на основе jQuery
- Установки кнопки «Вверх» на чистом JavaScript
Установки кнопки «Вверх» с помощью плагина для WordPress
Я попробовал два: Scroll to Top и Dynamic To Top.
Оба достойные плагины, легко устанавливаются и настраиваются. Есть возможность указать путь к своей картинке. В Dynamic To Top есть ещё возможность настроить, будет ли кнопка «Вверх» отображаться на мобильных устройствах.
Но, как и любой другой плагин эти так же создают дополнительную нагрузку на сервер. Я считаю, что ради одной кнопки дополнительная нагрузка на сервер, — не оправдана.
Такой способ реализации кнопки «Вверх» подойдёт лишь тем, кто абсолютно не желает хоть на сколько то ускорить работу своего сайта. И не желает разбираться в тонкостях его работы.
И я решил не использовать плагин и продолжить поиск идеального решения.
Установки кнопки «Вверх» на основе jQuery
jQuery — библиотека JavaScript, обеспечивающая взаимодействие JavaScript и HTML.
Данный способ подойдёт для реализации кнопки «Вверх» с плавной прокруткой на многих сайтах, в том числе и сделанных на WordPress.
Этот способ хорош, но он на один шаг длиннее следующего способа.
О котором мы как раз и поговорим подробно.
Установки кнопки «Вверх» на чистом JavaScript
Итак, именно этот способ я выбрал для своего блога созданного на WordPress. Для этого способа вам потребуется всего лишь два файла (картинка и скрипт). И сделать вставку кода в файл footer.php и добавить несколько стилей в style.css.
Этот способ хорош тем, что не надо подключать ни каких дополнительных библиотек или устанавливать плагины. А результат получается отличный, без лишней нагрузки на ваш сайт.
Приступаем.
Шаг 1. Создание изображения кнопки «Вверх»
Итак, для начала вам потребуется изображение для кнопки «Вверх». Таких изображений в Интернете огромное множество. Скачав такое изображение, его нужно будет ещё доработать. А точнее сделать спрайт. Спрайты позволяю на основе CSS сделать объединение фоновых картинок, которое выглядит как эффект анимации.
Для работы с графикой, я использую Photoshop. Но так как не у всех есть фотошоп, мы воспользуемся онлайн сервисом PIXLR EDITION, который идеально подходит для выполнения подобного рода задач.
После того, как вы скачали нужное изображение, переходим в онлайн редактор Pixlr Edition и выбираем «Загрузить изображение с компьютера».
И открываем ваше изображение кнопки «Вверх». В моём случае, — это ракета.
Если ваше изображение большего размера, чем вам нужно, как у меня. Такое изображение нужно уменьшить до нужных размеров. Воспользуемся способом трансформации, так как нужно изображение повернуть. Выбираем пункт меню «Редактирование» — «Free transform».
Вокруг изображения появляются маркеры, за которые Вы можете изменить размер изображения или повернуть вокруг своей оси.
Для пропорционального изменения ширины и высоты изображения предлагаю использовать диагональные маркеры с удержанием клавиши Shift для исключения искажения.
Должно получится вот так.
Теперь нужно сделать копию полученного изображения, точнее копию этого слоя. Для этого в окне 
Следующим действием нужно выстроить изображения строго вертикально друг над другом. Для этого выбираем инструмент «Перемещение» и клавишами управления курсором поднимаем одно изображение над другим.
Теперь нужно верхнее изображение обесцветить, для получения эффекта, когда цвет проявляется после наведения на объект указателя мышки. Выбираем пункт меню
Теперь нужно отсечь всё лишнее. Для этого выбираем инструмент «Обрезка» и выделяем область вокруг нашего изображения. Ничего лишнего, только два изображения. После выделения области, нажимаем клавишу «Enter».
Всё готово для сохранения изображения, но для начала запомните размер изображения. Он пригодятся в дальнейшем.
Вот теперь всё готово и нужно сохранить изображение. Для этого переходим в пункт меню
Выбираем сохранить на «Мой компьютер», вводим имя (только латинские буквы) и выбираем тип файла PNG (этот формат поддерживает прозрачность). Жмём кнопку «ДА».Шаг 2. Создание файла скрипта кнопки «Вверх»
Разумеется, мы не будем изобретать колесо. А воспользуемся готовым решением, которое я нашёл вот здесь. Из всего что я пересмотрел, этот вариант понравился больше всего. Хотя, конечно для новичков, написано сложновато для понимания. На самом деле всё просто. Нужно создать новый файл и вставить в него специальный код. А это файл далее использовать в работе.
Для создания файла, да и вообще работы с кодом, рекомендую использовать бесплатный редактор кода NotePad++.
Открываем редактор, создаём новый файл и вставляем предложенный код. Скачать весь код можно здесь.
Теперь сохраняем файл в формате js.
Готово, изображение и файл со скриптом для кнопки «Вверх» с плавной прокруткой у нас есть. Остаётся внести небольшой фрагмент кода в файл подвала (footer.
php) вашей темы WordPress. И в таблицу стилей (style.css) добавить необходимые стили для кнопки «Вверх». А также скопировать наши файлы на сайт.
Шаг 3. Копирование файлов на сайт WordPress
Лучше всего для выполнения таких задач подойдёт FTP-соединение через TotalCommander или FileZilla. О том, как настроить такое соединение читайте здесь.
Файл с изображением кнопки «Вверх» нужно скопировать в папку images Вашей темы.
Пример: http://Ваш сайт/wp-content/themes/Ваша тема/images/up.png
Файл скрипта нужно скопировать в папку js Вашей темы.
Пример: http:// Ваш сайт /wp-content/themes/ Ваша тема /js/totop.js
Если таких папок у вас нет, вы можете их создать или скопировать файлы в другие папки. Только непременно запомните к ним путь. Это важно.
Шаг 4. Доработка файла footer.php
Совет: перед любыми экспериментами с кодом, делайте резервные копии. Если не всего сайта, то хотя бы файлов с которыми собираетесь работать.
Итак, в административной панели WordPress выбираем раздел «Внешний вид» — «Редактор» — открываем файл «Подвал (footer.php)».
И перед закрытием тега </body> вставляем такой код:
<!— Кнопка Вверх —>
<script type="text/javascript" src="https://Ваш сайт/wp-content/themes/Ваша тема/js/totop.js"></script>
Важно! Помните, что вам необходимо вставить вашу ссылку к файлу скрипта.
И теперь остаётся последний штрих, — настроить стиль для кнопки.
Шаг 5. Создание стиля для кнопки «Вверх»
Для этого в файл стиля Вашей темы (style.css), добавляем вот такие стили:
Помните, наше изображение было 39х191 пиксель. Отсюда и стиль: ширина (width) 39px; высота (height) половина от основной высоты 96px; смещение фона при наведении мышки scrollTop:hover{ background-position:0 -108px; }.
Разумеется, у вас будет своё изображение и размеры будут отличатся. Поэтому надо будет поэкспериментировать с этими значениями.
На этом создание кнопки «Вверх» с плавной прокруткой на основе JavaScript закончено. Можно перезагружать страницу Вашего блога в браузере и любоваться работой этой кнопки.
Для облегчения задачи, я приготовил для Вас файл архив в котором собрал все необходимые исходные файлы. Файл расположен на Яндекс-Диске, скачать можно здесь.
Желаю вам удачного применения кнопки «Вверх» на ваших сайтах и блогах. Если будут вопросы пишите в комментариях, постараюсь помочь.
С уважением, Максим Зайцев.
Демонстрация основных функций виджета jQuery Button
Загрузка демо…index.html
Также доступно для:
СПРАВКА по APIОсновная кнопка
Неактивные кнопки
Отключенная основная кнопка Отключенная кнопка
Кнопки со значками
Фильтр Очистить фильтр
Компонент Button является частью пользовательского интерфейса Kendo для jQuery, библиотеки пользовательского интерфейса профессионального уровня с более чем 110 компонентами для создания современных и многофункциональных приложений.
Чтобы попробовать его, подпишитесь на бесплатную 30-дневную пробную версию.
Скачать бесплатную пробную версию
Описание
Элемент управления jQuery Button позволяет активировать и раскрашивать кнопку, а также добавлять к ней значки и значки.
В этой демонстрации вы можете увидеть кнопку во включенном и выключенном состоянии, в основном и неосновном цвете, а также с добавленными значками.
Элемент управления jQuery Button является частью пользовательского интерфейса Kendo для jQuery, всеобъемлющей библиотеки пользовательского интерфейса профессионального уровня для создания современных и многофункциональных приложений. Коллекция Kendo UI for jQuery содержит более 110 компонентов пользовательского интерфейса, множество гаджетов для визуализации данных, источник данных на стороне клиента и встроенную библиотеку MVVM (Model-View-ViewModel).
Этот пример кнопки является частью уникальной коллекции из сотен демонстраций jQuery, с помощью которых вы можете увидеть все компоненты пользовательского интерфейса Kendo для jQuery и их функции в действии.
Просматривайте исходный код демонстраций из библиотеки или напрямую адаптируйте и редактируйте их и внешний вид их темы в пользовательском интерфейсе Kendo для jQuery Dojo или ThemeBuilder.
Функциональность и особенности
- Кнопка «Отключено» — кнопка позволяет временно отключить или включить ее.
- Кнопка со значком. Вы также можете добавить различные значки к элементам пользовательского интерфейса кнопки на странице, чтобы улучшить их визуальное представление.
- Глобализация. Кнопка поддерживает глобализацию, чтобы гарантировать, что она может хорошо вписаться в любое приложение, независимо от того, какие языки и локали должны поддерживаться. Кроме того, Button поддерживает отрисовку в направлении справа налево (RTL).
- Специальные возможности. Кнопка доступна для программ чтения с экрана, поддерживает атрибуты WAI-ARIA и предоставляет сочетания клавиш для более быстрой навигации.
Ресурсы поддержки и обучения
- Обзор документации по кнопкам jQuery
- API кнопок jQuery
- Форумы кнопок jQuery
- Пользовательский интерфейс Kendo для кнопки jQuery Домашняя страница продукта
- Пользовательский интерфейс кендо для базы знаний jQuery
Дополнительные ресурсы
- Пользовательский интерфейс Kendo для jQuery Обзор продукта
- Интерфейс кендо для блога jQuery
- Интерфейс кендо для видео jQuery
- Пользовательский интерфейс кендо для дорожной карты jQuery
- Пользовательский интерфейс Kendo для jQuery Цены
- Интерфейс кендо для обучения jQuery
Кнопки jQuery для мобильных устройств
« Предыдущая
Следующая глава »
Мобильные приложения основаны на простоте нажатия элементов, которые вы хотите отобразить.
Создание кнопки в jQuery Mobile
Кнопку в jQuery Mobile можно создать тремя способами:
- Используя элемент
- Использование элемента
- Использование элемента с
Попробуйте сами »
Попробуйте сами »
| Кнопки в jQuery Mobile автоматически стилизуются, что делает их привлекательными
и может использоваться как на мобильных устройствах, так и на настольных компьютерах. Мы рекомендуем использовать элемент с
class=»ui-btn» для связи между страницами и элементами или Примечание: До версии 1.4 мы использовали data-role=»button» для создания кнопки в jQuery Mobile.  Как
версии 1.4 фреймворк использует классы CSS для оформления кнопок (кроме кнопки). |
Кнопки навигации
Чтобы связать страницы с помощью кнопок, используйте элемент с:
Пример
Попробуйте сами »Сгруппированные кнопки
jQuery Mobile предоставляет простой способ группировки кнопок.
Используйте атрибут data-role=»controlgroup» вместе с data-type=»horizontal|vertical» в элементе контейнера, чтобы указать группировать ли кнопки по горизонтали или по вертикали:
Пример
Попробуйте сами »
По умолчанию сгруппированные кнопки сгруппированы по вертикали без полей и пробелов. между ними. И только первая и последняя кнопки имеют закругленные углы,
что создает приятный вид, когда они сгруппированы вместе. |
Кнопки «Назад»
Чтобы создать кнопку «Назад», используйте атрибут data-rel=»назад» ( Примечание: игнорирует значение href привязки):
Пример
Попробуйте сами »Встроенные кнопки
По умолчанию кнопки занимают всю ширину экрана. Если вы хотите кнопка, ширина которой равна ее содержимому, или если вам нужны две или более кнопок чтобы они отображались рядом, добавьте класс «ui-btn-inline»:
Пример
Попробуйте сами »Дополнительные классы CSS для кнопок ссылок
| Класс | Описание | Пример |
|---|---|---|
| уи-бтн-б | Изменяет цвет кнопки на черный фон с белым текстом
(по умолчанию серый фон с черным текстом). |