18 комментариев

  1. gearmobile
    1 марта 2016

    Дергается некрасиво из-за скролла бокового (

    Ответить

    • driver
      1 марта 2016

      Да, на небольших экранах есть такое, пожалуй уберу))

      Ответить

    • Максим
      14 июля 2016

      Добавь в тело

      html { overflow: hidden; }

      div { height: 2000px; }

      ...и не будет скрола

      Ответить

  2. Елена
    10 мая 2016

    давайте её в бок переместим

    Ответить

  3. Вадим
    12 июля 2016

    То, что надо. Давно искал такую информацию, спасибо. А то не особо хочется видеть сообщения вида «удалите код JS блокирующий отображение верхней части экрана» при проверке скорости сайта.

    Ответить

  4. W
    22 июля 2016

    Пытаюсь адаптировать идею под нужды своего форума, пока ничего не получается.

    Уроки интересные, самобытные, красивые. Только у меня знаний не хватает для адаптации. Если еще были бы примеры всплывающих панелей с разной логикой работы, это могло обрадовать многих.

    Сейчас пытаюсь все адаптировать к выводу соц.кнопок в правой боковой плавающей всплывающей панеле. По клику по div должен изчезнуть этот div и выплыть панелька с кнопками. / Идеально бы еще один этап вставить, div по hover слегка выплывает и только после этого возникает cursor: pointer /. Пока же не получается даже вывести панельку по клику. Беда.

    Есть еще всплывающая панелька симметрично слева для кнопок вверх, вниз. Так что оформление привязано к единому стилю.

    HTML

    <input class="open" id="soc-box" type="checkbox" hidden> <label class="soc_panel" for="soc-box"></label> <div id="soc_call" class="sc_viz"></div> <div id="soc_panel" class="sp_run"></div>

    CSS

    /* Social icon */ #soc_call { position: fixed; cursor: pointer; display: block; top: 50%; right: 0px; height: 118px; width: 9px; margin-top: -60px; padding: 0; background-color: rgba(192, 200, 202, 0.7); border: 1px solid #666; border-right: none; -moz-border-radius: 5px 0 0 5px; -webkit-border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px ; } #soc_panel { position: fixed; display: none; top: 50%; right: -36px; height: 188px; width: 36px; margin-top: -95px; background-color: rgba(192, 200, 202, 0.7); border: 1px solid #666; border-right: none; -moz-border-radius: 5px 0 0 5px; -webkit-border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; } #open:checked #soc_panel { right: 0; display: block; } #open:checked #soc_call { display: none; } /* Social icon */

    Ответить

    • driver
      22 июля 2016

      Можете написать мне через контактную форму, которая находится на странице «Контакты», представляете, и такая есть у меня в блоге))),

      и я обязательно постараюсь вам помочь. Весь фарш в коммет кидать не нуна

      Ответить

  5. DS
    19 августа 2016

    Спасибо! Долго искал подобное! переделал под левую панель и теперь радуюсь не нарадуюсь ))))

    Ответить

    • driver
      19 августа 2016

      В ближайшие дни планирую выложить развёрнутый урок по боковым панелям на чистом css.

      Ответить

  6. Виктор
    3 ноября 2016

    Беда такая, ставлю на форум но у меня тогда кнопка выезжает на всю высоту + налаживается цвет на другие кнопки что уже есть на форуме

    Ответить

  7. Виктор
    3 ноября 2016

    уже решил проблему

    Ответить

  8. Петр
    2 января 2017

    Очень красиво.

    Супер.

    Ответить

  9. Максим
    26 января 2017

    подскажите новичку, как реализовать, куда css вставлять я понял а остальное? в хедер ?

    Ответить

    • driver
      26 января 2017

      Можете прописать всё сразу после тега <body>

      Ответить

  10. kwakin
    19 февраля 2017

    Здравствуйте

    как использовать текст в место шрифт-иконок FontAwesome

    какой код и заместо чего вставлять

    Спасибо

    Ответить

    • driver
      19 февраля 2017

      Здравствуйте.

      Давайте рассмотрим на примере использования слов Открыть/Закрыть

      Для того чтобы изменить контент кнопки «открыть», в css панели находите селектор label.btn:after и в свойстве content: в кавычках прописываете нужное вам слово, например то же «Открыть», соответственно параметры font: меняете, либо исключаете, получаете примерно следующее:

      label.btn:after { content: 'Открыть'; /* любой другой текст */ font: inherit; /* шрифт, наследует значения родителя */ text-decoration: inherit; /*оформление текста, наследует значения родителя */ }

      Далее, если вам нужна смена текста кнопки закрытия активной панели, находите .open:checked ~ .top-panel > label.btn:after изменяете значение content: на своё, для примера пропишем слово «Закрыть»

      .open:checked ~ .top-panel > label.btn:after { content: 'Закрыть'; /* любой другой текст */ font: inherit; /* шрифт, наследует значения родителя */ }

      Всё!

      Ответить

  11. КОМИССАР ЖЮВ
    21 февраля 2017

    Здравствуйте

    Панель супер

    но

    мне нужна панель

    чтоб кнопка вызова/закрытие панели была в теле сайта

    куда вставить код кнопки на сайте я сам определю

    если не трудно подскажите

    наверное вас замучили вопросами

    Извините

    Спасибо

    Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Наверх
мобильн. компьютерная