Боковая выпадающая панель

Поделиться122-03-2012 01:11:55

Автор: супернатурал.
Blood Like Lemonade
Зарегистрирован: 13-04-2011
Приглашений: 0
Сообщений: 8181
Уважение: +3233
Позитив: +482
Пол: Мужской
Провел на форуме:
1 месяц 24 дня
Последний визит:
25-05-2020 00:36:15

Короче, все очень просто. Принцип, как в обычном выпадающем. При наведение на кусочр, который остается видным выпадает таблица. Очень удобно, так как занимает совсем мало места.
Настройка таблицы через css, то бишь свойства. Настройка свойств:

Код:

<style type="text/css" media="screen">
#slideout {
          z-index: 200;
          position: fixed;
          top: 22px;
          right: 0;
          width: 35px;
          padding: 12px 0;
          text-align: center;
          background: #F0F0F0;
          -webkit-transition-duration: 0.3s;
          -moz-transition-duration: 0.3s;
          -o-transition-duration: 0.3s;
          transition-duration: 0.3s;
          -webkit-border-radius: 5px 0 0 5px;
          -moz-border-radius: 5px 0 0 5px;
          border-radius: 5px 0 0 5px;
          }
#slideout_inner {
          z-index: 200;
          color: #555050;
          position: fixed;
          top: 22px;
          right: -250px;
          background: #F0F0F0;
          width: 200px;
          padding: 25px;
          max-height: 430px;
          -webkit-transition-duration: 0.3s;
          -moz-transition-duration: 0.3s;
          -o-transition-duration: 0.3s;
          transition-duration: 0.3s;
          text-align: left;
          -webkit-border-radius: 0 0 05px;
          -moz-border-radius: 0 0 0 5px;
          border-radius: 0 0 0 5px;
          }
#slideout_inner textarea {
          width: 190px;
          height: 100px;
          margin-bottom: 6px;
          }
#slideout:hover {
          right: 250px;
          }
#slideout:hover #slideout_inner {
          right: 0;
          }
</style>

Ставим в XTML-верх, настроить, думаю, все смогут
Далее, сама таблица:

<div id="slideout">
<img src="картинка">
<div id="slideout_inner">
Наполнение

</div>
</div>

<img src="картинка"> - картинка, которая будет на видном "кусочке".
Ну дальше там все понятно..

+5

Поделиться218-06-2012 20:10:42

Автор: faiko
Откуда: Оренбург
Зарегистрирован: 29-03-2011
Приглашений: 0
Сообщений: 71
Уважение: +11
Позитив: +21
Пол: Женский
Провел на форуме:
18 часов 48 минут
Последний визит:
25-04-2015 18:34:27

Как панель настроить таким образом, чтобы она выпадала сверху?

0

Поделиться318-06-2012 20:51:31

Автор: супернатурал.
Blood Like Lemonade
Зарегистрирован: 13-04-2011
Приглашений: 0
Сообщений: 8181
Уважение: +3233
Позитив: +482
Пол: Мужской
Провел на форуме:
1 месяц 24 дня
Последний визит:
25-05-2020 00:36:15

faiko
Обратитесь на тех поддержку

0

Поделиться421-06-2012 18:35:01

Автор: maasikas
я есмь клевер
Зарегистрирован: 19-03-2012
Приглашений: 0
Сообщений: 94
Уважение: +25
Позитив: +72
Провел на форуме:
5 дней 6 часов
Последний визит:
27-11-2013 00:32:11

саму ширину "наполнения" увеличить можно?

0

Поделиться522-06-2012 11:41:11

Автор: супернатурал.
Blood Like Lemonade
Зарегистрирован: 13-04-2011
Приглашений: 0
Сообщений: 8181
Уважение: +3233
Позитив: +482
Пол: Мужской
Провел на форуме:
1 месяц 24 дня
Последний визит:
25-05-2020 00:36:15

maasikas

супернатурал. написал(а):

#slideout_inner {
z-index: 200;
color: #555050;
position: fixed;
top: 22px;
right: -250px;
background: #F0F0F0;
width: 200px;
padding: 25px;
max-height: 430px;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
text-align: left;
-webkit-border-radius: 0 0 05px;
-moz-border-radius: 0 0 0 5px;
border-radius: 0 0 0 5px;
}

Меняете на свое.
width: 200px; - сама ширина.
right: -250px; - смещение вправо

+1

Поделиться604-09-2012 19:46:05

Автор: Tella
я есмь клевер
Зарегистрирован: 04-01-2012
Приглашений: 0
Сообщений: 83
Уважение: +14
Позитив: +5
Провел на форуме:
3 дня 19 часов
Последний визит:
04-06-2016 05:11:43

А как можно изменить цвет фона на картинку?

+1

Поделиться711-09-2012 20:43:22

Автор: moral rat
бытовой сатанист
Зарегистрирован: 28-10-2011
Приглашений: 0
Сообщений: 1675
Уважение: +781
Позитив: +531
Пол: Мужской
Возраст: 33 [1991-05-28]
Провел на форуме:
18 дней 3 часа
Последний визит:
03-10-2020 05:11:08

а длину как регулировать?

0

Поделиться828-09-2012 02:05:27

Автор: morgan
главный по горшкам
Зарегистрирован: 27-07-2012
Приглашений: 0
Сообщений: 4222
Уважение: +1775
Позитив: +1413
Пол: Мужской
Провел на форуме:
2 месяца 25 дней
Последний визит:
12-03-2019 02:02:54

Neal Caffrey написал(а):

А как можно изменить цвет фона на картинку?

Вместе background-color ставите background-image: url('')

moral rat написал(а):

а длину как регулировать?

Высоту?

#slideout_inner {
z-index: 200;
color: #555050;
position: fixed;
top: 22px;
right: -250px;
background: #F0F0F0;
width: 200px;
padding: 25px;
max-height: 430px;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
text-align: left;
-webkit-border-radius: 0 0 05px;
-moz-border-radius: 0 0 0 5px;
border-radius: 0 0 0 5px;
}