Форум поддержки пользователей ZeroParking

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

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


Вы здесь » Форум поддержки пользователей ZeroParking » Галерея скриптов » Выпадающее меню для форума


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

Сообщений 1 страница 30 из 107

1

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

Документация:

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://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;}
</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://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;}

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

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

+2

2

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

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

не очень поняла это...
хочу что бы под оно был под Пользовательскими ссылками было...подскажите...

0

3

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

Пользовательскими ссылками было...подскажите...

В объявление ставьте тогда

0

4

окей...
но что бы это не смотрелось как объявление...как сделать? у меня ничего не получается(

0

5

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

но что бы это не смотрелось как объявление...как сделать? у меня ничего не получается(

В смысле что бы не смотрелось? а как вы хотите?

+1

6

Toshiro-kun
смотри   http://girlzzzaboutme.0pk.ru/  вот как я хочу сделать :flirt:

0

7

Swetynasty
Ну и в чем проблема? О,О
Вставляете заполняете, ни чего сверхъестественного код дан четкий если я не ошибаюсь

+1

8

вставлять в объявление? (но слово "объявление" как убрать?)+прозрачность

0

9

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

(но слово "объявление" как убрать?)+прозрачность

#pun-announcement h2 {display: none}

#pun-announcement .container { background-color: transparent;}

0

10

Toshiro-kun
спасибо огромное.

0

11

а как сделать ссылку в выпадающем блоке? заранее спасибо

0

12

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

0

13

спасибо!

0

14

а между чем и чем вставлять?

0

15

naich
где хочешь видеть, туда и вставляй)

0

16

все, разобралась, извиняюсь

0

17

еще вопрос) а как сделать чтобы каждая ссылка в всплывающем окне была с новой строки?

0

18

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

была с новой строки?

<br> -после каждого кода

0

19

очень благодарна!

0

20

Timon
Все отлично работает, спасибо.

0

21

можно ли убрать разделение между картинкой в объявлении и этим меню?

http://s48.radikal.ru/i120/1009/fa/97544558ed40.jpg

0

22

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

0

23

На картинке внизу кусок картинки в объявлении, когда я поставила код меню в объявление у меня получилось то что видно на скрине. Можно ли убрать  светло голубую полоску между картинкой и желтыми прямоугольниками меню?

0

24

клиричка
Это не полоска - а фон обычный окна Объявления, ото этого отступа вы не избавитесь.

0

25

Toshiro-kun написал(а):

Это не полоска - а фон обычный окна Объявления

но ведь и картинка и скрипт меню ставятся в одно поле и бе пробелов, от куда берется эта полоска? она портит все, придется в окна делать прозрачные картинки только с надписями или без границ и фона идентичного основному  :disappointed:

0

26

клиричка
А вы думаете слитно будет красиво - могу вам сказать точно - нет. Если не верите в паите подрисуйте и увидите что получиться

0

27

Toshiro-kun написал(а):

Если не верите в паите подрисуйте и увидите что получиться

попробую, спасибо за совет.

0

28

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

в скрипте эта часть

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

border: 2px solid #FFD700; - толщина, метод начертаний и цвет границ основных блоков.

http://s07.radikal.ru/i180/1009/f5/59f9734d679c.jpg

как сделать это прозрачным?

К стати, модераторы и администрация в теме каталог скриптов эта тема или не присутствует под текущим названием, или присутствует под другим.

0

29

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

background: #FFFFCC;

попробуй вот это в хтмл-верх на background: transparent; изменить

0

30

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

попробуй вот это в хтмл-верх на background: transparent; изменить

о нет весь код меня устраивает и все ложится на форум, мне только надо из безопасных цветов код , что заменит фон на прозрачный именно кодом цвета. Должно быть ведь такое или эта надпись и есть прозрачный цвет?

Отредактировано клиричка (2010-09-12 10:38:57)

0


Вы здесь » Форум поддержки пользователей ZeroParking » Галерея скриптов » Выпадающее меню для форума


Рейтинг форумов | Создать форум бесплатно