Выскальзывающая панель на чистом 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
Новые статьи и публикации
- 2025-03-14 » SPF-запись
- 2025-03-07 » SEO на маркетплейсах: как оптимизировать карточку товара для поисковой выдачи
- 2025-02-18 » Топ-10 бесплатных нейросетей для генерации изображений: лучшие ии генераторы 2024 года
- 2025-02-11 » Критическая уязвимость в 1С-Битрикс
- 2025-02-11 » Google Search Console: руководство для начинающих вебмастеров
- 2025-02-11 » Методы измерения результативности рекламных кампаний: плюсы и минусы
- 2025-02-11 » Тренды SEO в 2025 году
- 2025-02-10 » Свой Google в локалке. Ищем иголку в стоге сена
- 2025-01-29 » SEO — это комплексная работа. Шесть главных факторов ранжирования сайтов
- 2025-01-29 » Гайд для главной страницы e-commerce сайта: как оформить, чтобы повысить конверсию
- 2025-01-20 » Krea AI выпустила бесплатную функцию преобразования изображений в 3D-объекты — их можно вращать и вписывать в фотографии
- 2025-01-19 » Отзывы на Яндекс Картах: как пройти модерацию
- 2025-01-15 » Топ-6 лучших российских нейросетей, в которых можно генерировать тексты и изображения бесплатно и без VPN
- 2025-01-14 » 15 бесплатных способов узнать, чем интересуется ваша аудитория
- 2025-01-11 » Бездепозитные бонусы в казино за регистрацию с выводом: особенности и возможности получения
- 2025-01-09 » Новая модель LAM способна выполнять задачи в Word
- 2024-12-26 » Универсальный промпт для нейросети: как выжать максимум из ChatGPT, YandexGPT, Gemini, Claude в 2025
- 2024-11-26 » Капитан грузового судна, или Как начать использовать Docker в своих проектах
- 2024-11-26 » Обеспечение безопасности ваших веб-приложений с помощью PHP OOP и PDO
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-15 » Перенос сайта на WordPress с одного домена на другой
- 2024-11-08 » OSPanel 6: быстрый старт
- 2024-11-08 » Как установить PhpMyAdmin в Open Server Panel
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
"Я придерживаюсь простого правила: все дела этого дня должны быть сделаны в этот день". |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.
Или напишите нам в WhatsApp
Или напишите нам в WhatsApp