Техническая поддержка SpyBB

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

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


Вы здесь » Техническая поддержка SpyBB » Оформление форума » Выпадающее меню для форума


Выпадающее меню для форума

Сообщений 1 страница 20 из 52

1

Выпадающее меню для форума
(с)rps

Суть проста: в объявлении или ещё где-то стоит несколько блоков, при нажатии на которые открывается меню.

1. Установка.
В HTML-верх ставите код:

Код:
<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(http://tps.bbmy.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;}
</style>

В HTML-низ ставите скрипт:

Код:
<script type="text/javascript" src="http://szenprogs.ru/scripts/jquery-1.3.2.js"></script>
<script type="text/javascript"> 
  $(document).ready(function(){
    $('.splLink').click(function(){
      $(this).parent().children('div.splCont').toggle('normal');
      return false;
    });
  });
</script>

А это ставите туда, где хотите увидеть само меню:

Код:
<center><table style="width: 90%">
<tr>

<td><div class="spll">
<DIV jQuery1259073801391="4"><div class=splLink href="javscript://" jQuery1259073801391="2">Первый контейнер</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont jQuery1259073801391="5">
Тут будет что-то</DIV></DIV>
</div></td>
<td><div class="spll">
<DIV jQuery1259073801391="4"><div class=splLink href="javscript://" jQuery1259073801391="2">Второй контейнер</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont jQuery1259073801391="5">
Тут будет что-то</DIV></DIV>
</div></td>
<td><div class="spll">
<DIV jQuery1259073801391="4"><div class=splLink href="javscript://" jQuery1259073801391="2">Третий контейнер</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont jQuery1259073801391="5">
Тут будет что-то</DIV></DIV>
</div></td>
<td><div class="spll">
<DIV jQuery1259073801391="4"><div class=splLink href="javscript://" jQuery1259073801391="2">Четвёртый контейнер</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont jQuery1259073801391="5">
Тут будет что-то</DIV></DIV>
</div></td>
<td><div class="spll">
<DIV jQuery1259073801391="4"><div class=splLink href="javscript://" jQuery1259073801391="2">Пятый контейнер</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont jQuery1259073801391="5">
Тут будет что-то</DIV></DIV>
</div></td>
<td><div class="spll">
<DIV jQuery1259073801391="4"><div class=splLink href="javscript://" jQuery1259073801391="2">Шестой контейнер</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont jQuery1259073801391="5">
Тут будет что-то</DIV></DIV>
</div></td>

</tr>
</table></center>

2. Заполнение меню.

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

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

Код:
<td><div class="spll">
<DIV jQuery1259073801391="4"><div class=splLink href="javscript://" jQuery1259073801391="2">Шестой контейнер</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont jQuery1259073801391="5">
Тут будет что-то</DIV></DIV>
</div></td>

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

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

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

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

а).

Код:
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;}

Отвечает за дизайн основных блоков.
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; }

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

в).

Код:
.spll div .splCont {height: auto; width: 300px; background:  url(http://tps.bbmy.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;}

Отвечает за дизайн выпадающих блоков.

height: auto; - высота выпадающих блоков. По-умолчанию осуществляется автоподгон по ширине. При необходимости можно заменить auto на любое числовое значение с указанием единиц измерения.
width: 300px; - ширина выпадающих блоков.
background:  url(http://tps.bbmy.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; - выравнивание текста в выпадающих блоках (по-умолчанию: центр).

Внимание! Производить какие-либо изменения во второй части кода ЗАПРЕЩЕНО!

+3

2

Извините пожалуйста, если я не там написала. Я облазила форум в поисках ответа на мой вопрос, но поиск ничего, в общем-то, не дал и у меня возник вопрос:
Как можно сделать так, чтобы выпадающее меню выпадало не по клику, а просто при наведении. И, соответственно, скрывалось, когда мышку с окошка убираешь...
Ещё раз извиняюсь, если тут нельзя спрашивать.

0

3

Hayase
Добавил новую тему, смотрите
Создаем выплывающее меню

0

4

Good
Спасибо.

0

5

Можно как-то блоки сдвинуть вниз?

0

6

Эка написал(а):

Можно как-то блоки сдвинуть вниз?

поставьте в объявление. Если в верх ставите то только ккнопками можно сместить. То есть нарисовать кнопти высокими. Вот пример с того форума
[*spoiler]http://i47.tinypic.com/bgv14x.jpg[/spoiler]

0

7

Good
спасибо.)

0

8

извините, а как сделать так, чтобы цвет кнопки (на которой находятся надписи: Пятый контейнер, первы и т.п.) был другим? или как поставить туда картинку?

0

9

Уже не нужно. я разобралась

0

10

Простите, а как сделать так, чтобы информация в выпадающем блоке разделялась на абзацы? Потому что через хтмл простое нажатие клавиши Enter этого не делает.

0

11

Как поставить контейнеры вертикально? код:

Код:
<P>

не помогает

0

12

Jager написал(а):

Простите, а как сделать так, чтобы информация в выпадающем блоке разделялась на абзацы? Потому что через хтмл простое нажатие клавиши Enter этого не делает.

Используйте для переноса текста тег <br/>

0

13

Wolf Artist написал(а):

Как поставить контейнеры вертикально?
код: <P>не помогает

и не поможет, это же своего рода таблица ячейками в один ряд
Пробуйте само меню прописать так

Код:
<table style="width: 30%">
<tr>
<td>
<div class="spll">
<DIV jQuery1259073801391="4"><div class=splLink href="javscript://" jQuery1259073801391="2">Первый контейнер</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont jQuery1259073801391="5">
Тут будет что-то</DIV></DIV>
</div>
</td>
</tr>
<tr>
<td>
 <div class="spll">
<DIV jQuery1259073801391="4"><div class=splLink href="javscript://" jQuery1259073801391="2">Второй контейнер</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont jQuery1259073801391="5">
Тут будет что-то</DIV></DIV>
</div>
</td>
</tr>
<tr>
<td>
<div class="spll">
<DIV jQuery1259073801391="4"><div class=splLink href="javscript://" jQuery1259073801391="2">Третий контейнер</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont jQuery1259073801391="5">
Тут будет что-то</DIV></DIV>
</div>
</td>
</tr>
<tr>
<td>
<div class="spll">
<DIV jQuery1259073801391="4"><div class=splLink href="javscript://" jQuery1259073801391="2">Четвёртый контейнер</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont jQuery1259073801391="5">
Тут будет что-то</DIV></DIV>
</div>
</td>
</tr>
<tr>
<td>
<div class="spll">
<DIV jQuery1259073801391="4"><div class=splLink href="javscript://" jQuery1259073801391="2">Пятый контейнер</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont jQuery1259073801391="5">
Тут будет что-то</DIV></DIV>
</div> 
</td>
</tr>
</table>

0

14

Good
сработало, спасибо

0

15

Good
а моно изменить размер менюшки?

0

16

Тьма написал(а):

а моно изменить размер менюшки?

Что именно надо изменить, Кнопку, выпадающее окно или общий вид?
Если общий вид то в начале смотрите
<center><table style="width: 90%">

0

17

А можно в меню сделать ссылки?

0

18

Eternity написал(а):

А можно в меню сделать ссылки?

Где именно? Если в всплывающем окно то туда можно что угодно.
Для ссылки ставите код

<a href=ссылка" target="_blank">Название ссылки</a>

0

19

Good
Пасябки!

0

20

У меня что-то не то с меню получается! У меня ссылки друг на друга лезут и лежат вне меню. Есть еще какие-нибудь варианты многоуровнего меню?

0


Вы здесь » Техническая поддержка SpyBB » Оформление форума » Выпадающее меню для форума