ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка

Объявление

Проект от команды FD

☑ Поиск роли, партнёра, игрока.
☑ Легко. Удобно. Современно.
☑ Мы в процессе разработки.

Читать спойлеры

Загадочный Дом «Кузнечик»

Форумные игры, кино, позитивное отношение и душевное общение!
Есть в мире место, где душе тепло...
Заходи, мы будем тебе рады!

Подробнее

Мийрон

Качественный пиар быстро и недорого.
Красивейшие дизайны по низким ценам.
Каталог ролевых игр.

Подробнее

FD Chat - Чат на вашем форуме

Чат на отдельной странице на форуме. Без регистрации, используются форумные аккаунты.
Стоимость: 1500р
Первым 10 покупателям скидка 20%.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайтеПредложения
Стать модераторомОтзывы

Подробнее
Начался второй тур лотереи для форумов "Новогодний кот". Подаём заявки на участие до 8.12. Не пропустите!
Ищешь чем бы украсить свой форум или сайт к Новому году? 🎄 Мы поможем нарядиться! 🎄

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка » Каталог Javascript, Jquery и CSS решений » Выскальзывающая (выдвижная) информационная панель jQuery


Выскальзывающая (выдвижная) информационная панель jQuery

Сообщений 1 страница 10 из 11

1

Выскальзывающая (выдвижная) информационная панель 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>

Настройки колонок:

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Красное - ширина колонки
Синее - отступ колонок друг от друга
Зеленое - левая граница
Розовое - правая граница

Подпись автора

ForumD.ru очень нужны подписчики и социальных сетях и на YouTube!

https://forumstatic.ru/files/0007/e3/f7/42799.png   https://forumstatic.ru/files/0007/e3/f7/10336.png   https://forumstatic.ru/files/0007/e3/f7/85578.png

С увеличением количество подписчиков, нам откроются новые возможности и функционал.
Если хочешь поддержать наш проект - просто подпишись! :)

+2

2

у меня немного не получается =\
как сделать, что бы панель была именно в в объявлении?
а то она у меня крепится к самому верху страницы, да ещё и не могу ширину никак нормальную задать...

0

3

Fruit Shake
Уважаемые пользователи! Указывайте, пожалуйста, адрес форума при обращении!

Подпись автора

http://s3.uploads.ru/r9Miq.gif

0

4

mintemero

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

0

5

Fruit Shake
я ж не вижу скрытого текста =="

Подпись автора

http://s3.uploads.ru/r9Miq.gif

0

6

никто не поможет? =\

0

7

Я походу напортачила. Не работает панель :с
Ссылка

Подпись автора

Творю дизайны всем, кроме себя

0

8

Да,и из-за этой штуки сломалась боковая панель

Подпись автора

Творю дизайны всем, кроме себя

0

9

И чат 2 раза отображается

Подпись автора

Творю дизайны всем, кроме себя

0

10

А у меня такая проблема: панель едет в сторону и появляется прокрутка в ширину моего форума,в следствие чего весь дизайн плавает((( вот как на скриншотах:
http://s3.uploads.ru/t/g2aXL.jpg
http://s3.uploads.ru/t/yx2XE.jpg

0


Вы здесь » ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка » Каталог Javascript, Jquery и CSS решений » Выскальзывающая (выдвижная) информационная панель jQuery