Выскальзывающая панель на чистом CSS
В данном уроке мы сделаем выскальзывающий элемент интерфейса полностью только на CSS без JavaScript. Такой элемент может быть полезен для организации фиксированных элементов навигации или форм для обмена информацией, которые будут разворачиваться только тогда, когда в них есть необходимость.
Сделаем форму обратной связи для примера, которая будет поддерживаться в IE8+ (и даже в IE7, если элемент div
заменить на ссылку) и в каждом современном браузере. Состояние по умолчанию выглядит следующим образом - небольшая метка сбоку страницы:
При наведении курсора мыши на нее, раскрывается форма обратной связи:
Разметка
Сначала надо сделать разметку. Вот она, за исключением кода формы:
<div id="slideout"> <img src="/feedback.png" alt="Отправить отзыв" /> <div id="slideout_inner"> [Код формы вставляется здесь] </div> </div>
Здесь имеются два элемента div
. Внешний имеет id
“slideout”. Данный элемент div
будет иметь небольшую зеленую метку "Оставить отзыв", при наведении на которую выскальзывает панель с формой. Обратите внимание, что на внутренней стороне справа располагается изображение метки. Используется рисунок, а не поворот текста на 90 градусов. Вращение текста можно выполнить с помощью CSS3, но в данном случае использовать изображение проще и обеспечивает лучшую кросс браузерную поддержку.
Внутренний элемент div
имеет id
“slideout_inner”. Он содержит код формы. Элемент расположен внутри, чтобы код CSS работал, но размеры его выходят за пределы родительского контейнера.
CSS
Магия скрыта здесь. Мы используем псевдо-классы и свойство CSS3 pseudo-classes для организации выскальзывания панели. (В тексте урока опущен CSS код, который не касается функционирования панели, полную версию можно посмотреть в исходниках):
#slideout { position: fixed; top: 40px; left: 0; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; } #slideout_inner { position: fixed; top: 40px; left: -250px; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; } #slideout:hover { left: 250px; } #slideout:hover #slideout_inner { left: 0; }
Внутренний элемент div
имеет начальную координату по оси X отрицательную, что скрывает нашу панель, размещая ее за левой стороной страницы. Внешний элемент div
с меткой имеет стартовую позицию, выравненную по левому краю страницы. Когда курсор мыши оказывается над ним, он смещается вправо на ширину внутреннего контейнера. Внутренний контейнер при этом также смещается вправо, раскрывая свое содержание.
Свойство transition-duration устанавливает время перехода, что делает переход плавным в браузерах, которые поддерживают CSS3. Выполняется базовая трансформация со сдвигом, которая запускается наведением курсора мыши на внешний элемент div
. Если браузер не поддерживает трансформации, панель будет полностью функциональна, только без анимации.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/44tP7TOpwLw/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
- 2024-04-22 » Цифровой маркетинг: инструменты для продвижения и рекламы в 2024 году
- 2024-04-22 » Что такое CSS-модули и зачем они нам?
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
Полезнее знать несколько мудрых правил, которые всегда могли бы служить тебе, чем выучиться многим вещам, для тебя бесполезным Сенека Луций Анней - (1 до н. э. / 1 н. э.- 65 н. э.) - римский государственный деятель, писатель, философ |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.