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

Объявление

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

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

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

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

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

Подробнее

Мийрон

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

Подробнее

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

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

Подробнее

Дизайн «Warlords of Draenor»

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

Подробнее

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

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

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

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

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



Выпадающие по клику блоки с информацией

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

1

Выпадающие по клику блоки с информацией
https://forumupload.ru/uploads/0007/e3/f7/60044-3-f.jpg

Демо:

[html]<iframe src="http://sadhaka.moy.su/ForumDesign/rps_menu-spoiler.html" frameborder="0" scrolling="no"  height="150" width="700"></iframe>[/html]

Автор: rps
Платформа: любая

1. Установка.

Стиль:

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

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

Скрипт:

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

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

Вставляем туда, где должно быть само меню (например, в объявление):

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

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

2. Заполнение меню.
Чтобы заполнить меню своим содержимым, надо обратиться к третьей части кода.

а). По-умолчанию в коде содержится 6 блоков. По своему усмотрению Вы можете изменить это число, добавив новые или удалив какие-либо. Чтобы осуществить это, достаточно размножить (в случае увеличения числа блоков) или удалить (для уменьшения их числа) такой фрагмент:

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

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

Внимание! Не меняйте НИКАКИЕ числовые значения в этой части кода! В противном случае меню перестанет работать!

б). Чтобы заменить информацию в основных блоках, найдите в коде слова "Первый блок". Замените их на нужное Вам. Это может быть как текстовая информация, так и графическая (картинки). Можно использовать любой HTML.

в). Чтобы заменить информацию в выпадающих блоках, найдите в коде слова "Тут будет что-то" и замените на нужную Вам информацию. Это может быть как текстовая информация, так и графическая (картинки). Можно использовать любой HTML.

3. Оформление меню.

Оформление выпадающего меню необходимо менять в первой части кода.
Ниже приведены доступные для пользователей изменения в дизайне:

а).

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

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

Отвечает за дизайн основных блоков.
width: 130px; - ширина основных блоков, в пикселах.
height: 40px; - высота основных блоков, в пикселах.
border: 2px solid #FFD700; - толщина, метод начертаний и цвет границ основных блоков.
background: #FFFFCC; - цвет фона основных блоков.
text-align: center; - выравнивание текста в основных блоках (по-умолчанию: центр).
font-family: Comic Sans Ms; - шрифт в основных блоках меню.
font-size: 15px; - размер текста в основных блоках меню.
padding: 5px; - отступ от краёв основных блокв (поля).

б).

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

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

Не рекомендовано для изменения неопытным пользователям!
Замечание: width: 130px; менять одновременно с предыдущим значением ширины (ширина основных блоков).

в).

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

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

Отвечает за дизайн выпадающих блоков.
height: auto; - высота выпадающих блоков. По-умолчанию осуществляется автоподгон по ширине. При необходимости можно заменить auto на любое числовое значение с указанием единиц измерения.
width: 300px; - ширина выпадающих блоков.
background:  url(https://forumupload.ru/uploads/0003/83/96/1556-1.png); - фоновое изображение выпадающих блоков. При необходимости можно установить непрозрачный цвет, путём замены на background: #FFFFCC; с указанием нужного цвета.
padding: 5px; - отступ от краёв выпадающих блокв (поля).
z-index: 1000; не рекомендовано к изменению. Данный параметр отвечает за наложение выпадающих блоков на форум. При уменьшении этого значения меню будет открывыться под таблицу форума. Если какой-либо элемент форума закрывает собой выпадающии меню, это значение необходимо увеличить.
margin-top: 5px; - отступ, между основными и выпадающими блоками. При значении 0 - без отступа.
border: 2px solid #FFD700; - толщина, метод начертаний и цвет границ выпадающих блоков.
font-size: 12px; - размер текста в выпадающих блоках меню.
font-family: Microsoft Sans Serif; - шрифт в выпадающих блоках меню.
text-align: center; - выравнивание текста в выпадающих блоках (по-умолчанию: центр).

Отредактировано Герда (20.05.13 03:39)

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

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

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

0

2

Спасибо, я когда HTML верх чистил случайно выпадающее меню стёр. Спасибо тебе ещё раз и спасибо поиску =)

0

3

А как изменить цвет шрифта в выпадающих блоках?

0

4

Шайлер

Герда написал(а):

background:  url(https://forumupload.ru/uploads/0003/83/96/1556-1.png); - фоновое изображение выпадающих блоков. При необходимости можно установить непрозрачный цвет, путём замены на background: #FFFFCC; с указанием нужного цвета.

0

5

Шайлер написал(а):

А как изменить цвет шрифта в выпадающих блоках?

<style>
div .splLink {width: 130px; height: 40px; border: 2px solid #FFD700; background: #FFFFCC; text-align: center; font-family: Comic Sans Ms; font-size: 15px; padding: 5px;}
.spll {width: 130px; height: 70px; }
.spll div .splCont {height: auto; width: 300px; background:  url(https://forumupload.ru/uploads/0003/83/96/1556-1.png); padding: 5px; z-index: 1000; margin-top: 5px; border: 2px solid #FFD700; font-size: 12px; font-family: Microsoft Sans Serif; text-align: center; color: #цвет;}
</style>

Выделенное добавить в код

0

6

Можно ли сделать меню по такой примерно схеме:

Ячейка1 - Ячейка2 - Ячейка3

Ячейка4 - Ячейка5 - Ячейка 6

?

0

7

А у меня меню "прыгают" http://warriorsdreams.spybb.ru/

0

8

L Micaelis написал(а):

Можно ли сделать меню по такой примерно схеме:

да, наверное, можно. Просто ставишь между ними тег <br>, чтобы перейти на новую строчку.

0

9

Нота,
я попробую)

0

10

Можно в этом скрипте как-то увеличить количество выпадающих менюшек? Или это надо искать где-то в другом месте?

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

Когда я погибну, ветер порвет паруса,
И потеряет в тумане путник следы,
И кто-то в страхе проклянет небеса.

0