Выскальзывающая панель на чистом CSS

В данном уроке мы сделаем выскальзывающий элемент интерфейса полностью только на CSS без JavaScript. Такой элемент может быть полезен для организации фиксированных элементов навигации или форм для обмена информацией, которые будут разворачиваться только тогда, когда в них есть необходимость.

demosourse

Сделаем форму обратной связи для примера, которая будет поддерживаться в 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. Если браузер не поддерживает трансформации, панель будет полностью функциональна, только без анимации.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://usabilitypost.com/2011/04/19/pure-css-slideout-interface/
Перевел: Сергей Фастунов
Урок создан: 2 Мая 2011
Просмотров: 89672
Правила перепечатки


5 последних уроков рубрики "CSS"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 2 Мая 2011 21:35
    sancco
    Оригинально
  • 2 Мая 2011 22:01
    will_smeet
     -webkit-transition-duration: 0.3s;
    15 -moz-transition-duration: 0.3s;
    16 -o-transition-duration: 0.3s;
    17 transition-duration: 0.3s;
    
    у меня не работает, что делать?
    • 2 Мая 2011 23:34
      notbot
      Ставить правильный браузер.
    • 3 Мая 2011 00:35
      mikael1018
      Горе ты наше, номера строк удали (15, 16 и 17) если не работает - на пенсию твоему браузеру пора! Новый ставь
      • 3 Мая 2011 10:39
        will_smeet
        Я что совсем тупой 15,16,17 это я для вас скопировал! Так самое главное если я скопирую всё, то у меня идёт, а если я в своё вставляю, то не идёт!
        • 3 Мая 2011 11:21
          Timochelly
          вы же не указали куда и как вставляете... и что вставляете свое...
          • 5 Мая 2011 20:32
            Sanches
            Это точно! Долго тупил.
        • 3 Мая 2011 14:25
          ushim
          код пожалуйста. мы не экстрасенсы )
          • 4 Мая 2011 17:35
            will_smeet
            Спасибо, но я уже разобрался!
  • 2 Мая 2011 22:24
    qwerty1007482
    Классно!
  • 2 Мая 2011 22:41
    da_lamber
    Классная штука. Надо тоже использовать на своем сайте. :)
  • 2 Мая 2011 23:17
    artmart
    хорошее решение, но будет работать только в правильных браузерах :) но в таких каличных как ослики, вплоть до ie8 работать не будет, так лучше gjrf использовать для этого js
  • 3 Мая 2011 00:16
    СиротА
    Да вещичка нужная и главное простая, но соглашусь с artmart, что рановато ее использовать из-за присутствия еще IE-(6-8)... На мой взгляд проще в данной ситуации использовать именно JavaScript & jQuery, но в закладочки к себе положу по любому)))
    • 3 Мая 2011 11:17
      rubyx
      на тех браузерах многое чего не работает, думаю что уже работает красиво на других и более популярных браузерах, не знаю такого слова "рано" тогда я:))
    • 3 Мая 2011 11:19
      Timochelly
      IE-6 уже давно не используется более одного процента по всему миру... Так что пора двигать новые технологии вперед! а строки
      #slideout:hover { left: -250px;
      } #slideout:hover #slideout_inner { left: 0;
      }
      
      будут работать везде!
      • 3 Мая 2011 21:03
        MopuC
        Единичку потеряли :) http://ie6countdown.com/
      • 5 Мая 2011 10:17
        neko89
        ничего подобного по данным с 3х моих сайтов осликами пользуются более 40% посетителей из этих 40% больше половины сидят на 6 а некоторые мамонты до сих пор юзают пятьипять!
        • 9 Мая 2011 20:05
          Timochelly
          это ж какие сайты если не секрет?
  • 3 Мая 2011 09:39
    Xamle
    Хорошая вещь забираем!!!
  • 3 Мая 2011 11:12
    rubyx
    плавности бы ещё добавить, а то слишком резко выскакивает :)
  • 3 Мая 2011 11:31
    Ygreec
    Я вот не могу проверить, как себя поведет если браузер не поддерживает CSS3... разве не будет выскакивать див? там же есть div:hover по-моему просто не будет плавности выезжания... Еще ответьте пожалуйста на вопрос: если я прописываю в одной строке свойства, половину из которых старые браузерв не поддерживают, то выполнится ли остальная половина? или может лучше для одного и того же элемента прописывать два раза - сначала свойства, которые выполняются всеми, а на след. строке - новые, пусть игнорируются осликами... То есть как вы поняли, я пишу для ссылки: цвет, размер и добавляю тень размытия - будут ли выполняться первые два?
  • 3 Мая 2011 13:49
    berows
    а куда отправляються отзывы?
  • 3 Мая 2011 14:59
    Руслан Димитриев
    классно!
  • 3 Мая 2011 20:40
    krlmisha
    Респект и уважуха авторам. Жалко, что это только в браузерах WebKit
  • 4 Мая 2011 00:46
    Hed1n
    да, меня тоже интересует. Куда отправляются отзывы?
    • 4 Мая 2011 20:07
      СиротА
      Отзывы будут отправляться туда куда Вы им скажете методом POST, в обработчик отзывов.
    • 5 Мая 2011 10:26
      banzaj
      Там написано [Код формы вставляется здесь] <form method=POST...
  • 5 Мая 2011 11:38
    kalisto
    Спасибо огромное!!!
  • 5 Мая 2011 18:29
    berows
    <form method="post></form> не понятно где прописывать? куда отправлять?
    • 20 Июня 2011 08:57
      MimoJanra
      повторю вопрос
      • 11 Ноября 2011 11:00
        shabda
        присоединюсь Подскажите пожалуйста куда вставить адрес доставки сообщения Спасибо
  • 6 Мая 2011 15:27
    eklim
    Евгений, спасибо! Но... ну и добавили бы сам PHP-скрипт для отправки сообщений с сайта... А то урок недоделанный получился...
  • 11 Мая 2011 17:48
    imprint
    есть вопрос...уже день мучаюсь не могу поставить закладки с правой стороны, снизу и сверху....только с лева нормально работает.... Заранее спасибо...
  • 7 Июня 2011 22:32
    sonk
    Ну как же без багов в IE?)) Эх... Если бы был такой код:
    <!--[if IE]>
    Установите нормальный браузер
    <[else]>
    Код скрипта
    <![endif]-->
  • 1 Августа 2011 16:17
    Тимур Маруфходжаев
    Хорошая вещь, спасибо. а для критиков хочу сказать, эта панель не только для отправки... с ней можно делать что угодно и как угодно! смотрите у меня на сайте - http://sat.uzeb.net -
  • 28 Октября 2011 19:42
    secondsism
    Люди! очень надо... как зделать чтоб он сверхувниз в низ ездил или снизу вверх?????
  • 27 Ноября 2011 01:00
    Lorens
    Спасибо:) Очень помогло)))
  • 6 Апреля 2012 21:45
    Feleks
    народ помогите мне воющем у меня шаблон стоит от центра 500 вправо и 500 в лева не как не могу подогнать ползунок чтобы он с права выезжал под шаблон получается загнать а вот чтобы ползунок справа торчал не как не могу сделать ели кому нетрудно будет сделайте очень прошу. И еще шаблон ширина шаблона заданна не в процентах, а в пикселях может кому нужна будет такая информация
  • 12 Июня 2013 22:22
    Alexander_Muromtsev
    Всем привет. Обобщу многие коменты: У меня под DOS не работает - урок не правильный. DOS 6.22 надстройка windows 3.11 Internet Explorer второго поколения 2.0 И зачем нужны такие уроки? --- Технологии, прогресс, у меня мотоцикл УРАЛ 1937 г. а запчастей не найти. Половина уже переделанных. Это разве технологии, это разве прогресс человечества. --- Что за розетки стали делать, зачем такие широкие гнезда. У меня бритва только со спичками втыкается в розетку, иначе болтается вилка и замыкает. А еще говорят Евро Стандарт. --- А теперь серьезно. Не всегда бывают кривые руки, иногда проблемный орган выше. Все работает, внес исправления для своего сайта, вставил форму, обработчик .php. Спасибо Огромное Вам Евгений и Людям, которые делают для Нас такие уроки.
  • 8 Декабря 2013 11:42
    black_hugo
    Всем привет, ребят, а как его разместить с правой стороны в нижнем углу ? поможет кто нить ?
  • 17 Августа 2014 18:59
    IRBIS_26RUS
    Уважаемые Доброго времени суток, подскажите, а как после нажатия на кнопку "отправить отзыв", написанный текст отражался в другой форме?
  • 19 Сентября 2014 17:22
    aleksey61rus
    Ребята подскажите где этот самый код взять для вставки?
    Да, и что, и где нужно прописать куда отправить?
  • 20 Марта 2015 14:30
    Palec
    А как сделать что б форма оставалась при клике мыши?
^ Наверх ^