Reg.ru: домены и хостинг
Крупнейший регистратор и хостинг-провайдер в России.
Более 2 миллионов доменных имен на обслуживании.
Продвижение, почта для домена, решения для бизнеса.
Более 700 тыс. клиентов по всему миру уже сделали свой выбор.
Бесплатный Курс "Практика HTML5 и CSS3"
Освойте бесплатно пошаговый видеокурс
по основам адаптивной верстки
на HTML5 и CSS3 с полного нуля.
Фреймворк Bootstrap: быстрая адаптивная вёрстка
Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.
Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.
Верстайте на заказ и получайте деньги.
Бесплатный курс "Сайт на WordPress"
Хотите освоить CMS WordPress?
Получите уроки по дизайну и верстке сайта на WordPress.
Научитесь работать с темами и нарезать макет.
Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!
*Наведите курсор мыши для приостановки прокрутки.
Сворачивающаяся панель на jQuery
|
|
Размер: 38,7 Мб. Длительность: 12 мин. 48 сек. |
В этом видео я покажу вам, как работать с интересным скриптом на jQuery.
Он позволяет разместить в верхней части сайта небольшую область, при клике по которой открывается большая панель с контентом.
Вы можете добавлять в нее любое содержимое: текст, изображения, видео, формы и т.д.
Данный инструмент очень удобен, если вы хотите привлечь внимание посетителей сайта, но не хотите быть чрезмерно навязчивым.
Сам скрипт состоит из:
- основного файла с HTML-разметкой
- двух файлов стилей (основного, и для самой панели)
- двух файлов JavaScript (библиотеки jQuery и скрипта самой панели)
Все остальные компоненты не обязательны, включая изображения, однако их использование позволит вам сделать панель более привлекательной.
В уроке мы рассмотрим основные моменты, касающиеся настройки внешнего вида панели.
Мы пройдемся по файлу стилей и увидим, какой стиль за что отвечает, чтобы вы всегда могли подправить оформление в соответствии с дизайном вашего проекта.
Что касается настройки работы панели, то они ограничиваются скоростью анимационного эффекта (slow, normal и fast).
Это три основные скорости работы эффекта, однако вы можете указывать и произвольные значения в миллисекундах, чтобы контролировать скорость разворачивания и сворачивания панели.
Из важных особенностей я бы отметил возможность по-разному позиционировать панель.
Вы можете:
- сделать ее фиксированной (положение панели на экране не будет меняться при прокрутке страницы)
- позиционировать абсолютно (панель будет закрывать собой контент)
- задать относительное позиционирование (панель будет "вытеснять" контент вниз при раскрытии)
Резюмируя, скажу, что инструмент удобен в работе, и применять его можно для решения широкого круга задач, возникающих при разработке сайтов.
Вы можете просмотреть этот урок прямо сейчас, либо скачать его себе на компьютер по ссылке выше.
P.S. Присмотритесь к премиум-урокам по различным аспектам сайтостроения, включая JavaScript, jQuery и Ajax, а также к бесплатному курсу по созданию своей CMS-системы на PHP с нуля. Все это поможет вам быстрее и проще освоить практические навыки веб-программирования:
Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!
Смотрите также:
|
|
50 классных сервисов, программ и сайтов для веб-разработчиков |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
