Выскальзывающая (выдвижная) информационная панель jQuery
Панель для вашего контента сверху сайта, выдвигающаяся/задвигающаяся по клику пользователя.
Автор: Источник
Платформа: любая
JS код (разместить следует над панелью):
HTML код
CSS код
Настройка HTML кода и заполнение
По умолчанию в панель встроено три колонки для вашей информации:
<div class="left">
<h1>Большой заголовок</h1>
<h2>Второстепенный заголовок</h2>
<p>текст первой колонки</p>
</div><div class="left">
<h1>Большой заголовок</h1>
<h2>Второстепенный заголовок</h2>
<p>текст второй колонки</p>
</div><div class="left right">
<h1>Большой заголовок</h1>
<h2>Второстепенный заголовок</h2>
<p>текст третьей колонки</p>
</div>
При удалении колонок следует прописать в стиле новую ширину или другие настройки.
Заголовки типа <h1>, <h2> и текст в тегах <p> также стилизован в CSS коде палели.
Вкладыш справа представляет собой код:
Красное жирное - текст приветствия. Его можно заменить на свое. Если приветствие не нужно, удалите все красное.
Синее и зеленое - текст закрытия/открытия панели. Его можно редактировать. Удалять эти строчки нельзя.
Панель в закрытом состоянии:
Зеленое - фоновая картинка низа
Красное - высота закрытой панелиНастройки блока с текстом "Здравствуйте! закрыть/открыть":
Красное - высота
Синее - отступ вкладки от правого края
Зеленое - цвет текста приветствия "Здравствуйте!"
Розовое - размер шрифтаЛевый край блока с текстом "Здравствуйте! закрыть/открыть":
Красное - картинка для левого края
Синее - высота картинки
Зеленое - ширина картинкиПравый край блока с текстом "Здравствуйте! закрыть/открыть":
Красное - картинка для правого края
Синее - высота картинки
Зеленое - ширина картинкиСередина блока с текстом "Здравствуйте! закрыть/открыть":
Красное - картинка для середины
Синее - высота картинкиТекст кнопки "закрыть/открыть":
Красное - цвет текста "закрыть/открыть"
Синее - цвет текста "закрыть/открыть" при наведении курсора
Зеленое - цвет разделителя между приветствием "здравствуйте!" и кнопкой закрытия/открытияБлок для кнопки и текста закрытия/открытия:
Красное - высота
Синее - отступ слева
Зеленое - ширина
Розовое - отступ сверхуКнопки закрытия/открытия:
Красное - картинка кнопки "открыть"
Синее - картинка кнопки "закрыть"
Зеленое - картинка кнопки "открыть" при наведении курсора
Розовое - картинка кнопки "закрыть" при наведении курсораПозиция панели:
Красное - позиционирование
absolute - панель с перекрывающимся контентом
fixed - панель которая всегда прикреплена к верху окна браузера
relative - панель которая "выдавливает" контент вниз
Синее - ширинаКонтент панели:
Красное - ширина
Синее - высота
Зеленое - цвет текста
Розовое - фонЗаголовки h1:
Красное - размер текста
Синее - отступы
Зеленое - цвет текстаЗаголовки h2:
Красное - размер текста
Синее - отступы
Зеленое - цвет текстаСтиль ссылок:
Красное - цвет ссылок
Синее - цвет ссылок при наведении курсораОбщие настройки колонок:
Красное - общая ширина всех колонок
Синее - отступ колонок сверху
Зеленое - размер текста <p>Настройки колонок:
Красное - ширина колонки
Синее - отступ колонок друг от друга
Зеленое - левая граница
Розовое - правая граница
- Подпись автора
Герду как-то спросили:
— Вот вы писали, что "Среди разработчиков - я разработчица, среди дизайнеров - я веб-дизайнер." А кто вы среди ролевиков?
Герда не растерялась и ответила:
— Иди на**й.