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

Поделиться1Пт, 27 Ноя 2009 03:12:55

Автор: rps
Стремясь к новому...
Зарегистрирован: Вс, 12 Окт 2008
Сообщений: 22652
Уважение: +4738
Позитив: +3431
Пол: Мужской
Предупреждения: ‡ 1. 2. 3. ... 10!
Последний визит:
Вс, 14 Мар 2021 21:42:57

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

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

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"> 
  $(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; - выравнивание текста в выпадающих блоках (по-умолчанию: центр).

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

Отредактировано rps (Пн, 28 Мар 2011 20:44:34)

+11

Поделиться2Вс, 29 Ноя 2009 17:22:30

Автор: mkusher
Не rocket science
Зарегистрирован: Ср, 19 Мар 2008
Сообщений: 821
Уважение: +1000
Позитив: +706
Пол: Мужской
Последний визит:
Вт, 7 Янв 2020 15:14:17

Вариант выпадающего меня при наведении мышки

Код:

<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: 0px; border: 2px solid #FFD700; font-size: 12px; font-family: Microsoft Sans Serif; text-align: center;}
</style>
<script type="text/javascript" src="http://szenprogs.ru/scripts/jquery-1.3.2.js"></script>

в хтмл-низ

Код:

<script type="text/javascript"> 
$(document).ready(function(){
	$('.splLink').parent().hover(function(){
$(this).children('div.splCont').toggle('normal');
	},
	function(){
$(this).children('div.splCont').toggle('normal');
	});
});
</script>

а это в любое удобное место на форуме

Код:

<center>
<table style="width: 90%">
<tr>
<td>
	<div class="spll">
<div class="splLink">Первый контейнер</div>
<div style="DISPLAY: none; position: absolute;" class="splCont" >
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

	</div>
</td>
<td>
	<div class="spll">
<div class="splLink">Второй контейнер</div>
<div style="DISPLAY: none; position: absolute;" class="splCont" >
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

	</div>
</td>
<td>
	<div class="spll">
<div class="splLink">Третий контейнер</div>
<div style="DISPLAY: none; position: absolute;" class="splCont" >
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

	</div>
</td>
<td>
	<div class="spll">
<div class="splLink">Четвертый контейнер</div>
<div style="DISPLAY: none; position: absolute;" class="splCont" >
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

	</div>
</td>
</tr>
</table>
</center>

пример http://tests.bestff.ru/

+1

Поделиться3Вс, 27 Дек 2009 19:38:29

Автор: Deon
Заслуженный
Зарегистрирован: Сб, 5 Дек 2009
Сообщений: 44
Уважение: -1
Позитив: +6
Последний визит:
Вс, 21 Июн 2015 21:52:03

Контейнеры строятся только друг под другом, можно их как-нибудь рядом разместить?)

0

Поделиться4Вс, 27 Дек 2009 19:53:42

Автор: rps
Стремясь к новому...
Зарегистрирован: Вс, 12 Окт 2008
Сообщений: 22652
Уважение: +4738
Позитив: +3431
Пол: Мужской
Предупреждения: ‡ 1. 2. 3. ... 10!
Последний визит:
Вс, 14 Мар 2021 21:42:57

Deon
Как бы они и должны рядом быть... Дайте ссылку на форум.

0

Поделиться5Вс, 27 Дек 2009 19:54:38

Автор: Deon
Заслуженный
Зарегистрирован: Сб, 5 Дек 2009
Сообщений: 44
Уважение: -1
Позитив: +6
Последний визит:
Вс, 21 Июн 2015 21:52:03

Вот)) http://testforumoo.mybb.ru/

0

Поделиться6Вс, 27 Дек 2009 20:36:51

Автор: rps
Стремясь к новому...
Зарегистрирован: Вс, 12 Окт 2008
Сообщений: 22652
Уважение: +4738
Позитив: +3431
Пол: Мужской
Предупреждения: ‡ 1. 2. 3. ... 10!
Последний визит:
Вс, 14 Мар 2021 21:42:57

Deon
Потому, что Вы удалили часть моего кода.

Держите для трёх контейнеров:
Код:
<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> </tr> </table></center>

Отредактировано rps (Вс, 27 Дек 2009 20:37:06)

0

Поделиться7Вс, 27 Дек 2009 20:48:23

Автор: Deon
Заслуженный
Зарегистрирован: Сб, 5 Дек 2009
Сообщений: 44
Уважение: -1
Позитив: +6
Последний визит:
Вс, 21 Июн 2015 21:52:03

rps, упс) Огромное спасибо)

0

Поделиться8Пт, 29 Янв 2010 12:21:05

Автор: Kawaii Nyak
Заслуженный
Зарегистрирован: Чт, 25 Июн 2009
Сообщений: 196
Уважение: +45
Позитив: +52
Пол: Женский
Последний визит:
Вт, 21 Дек 2010 13:51:09

Возможно ли вставлять ссылки в это меню?
Если да, то как)?

0

Поделиться9Пт, 29 Янв 2010 13:19:47

Автор: Домовой
Cтарожил
Зарегистрирован: Пн, 22 Сен 2008
Сообщений: 5079
Уважение: +1498
Позитив: +854
Пол: Мужской
Последний визит:
Вс, 14 Апр 2024 09:05:01

Kawaii Nyak написал(а):

Возможно ли вставлять ссылки в это меню?Если да, то как)?

Обычным методом

<a href="Адрес темы">Название</a>

или так с открытием в новом окне

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

Отредактировано Good (Пт, 29 Янв 2010 13:20:40)

0

Поделиться10Сб, 30 Янв 2010 10:01:35

Автор: Kawaii Nyak
Заслуженный
Зарегистрирован: Чт, 25 Июн 2009
Сообщений: 196
Уважение: +45
Позитив: +52
Пол: Женский
Последний визит:
Вт, 21 Дек 2010 13:51:09

Good
Поняла)) Спасибо))

0

Поделиться11Пн, 1 Фев 2010 09:57:49

Автор: Kawaii Nyak
Заслуженный
Зарегистрирован: Чт, 25 Июн 2009
Сообщений: 196
Уважение: +45
Позитив: +52
Пол: Женский
Последний визит:
Вт, 21 Дек 2010 13:51:09

Возможно ли вставить картинку вместо цвета?
На место где "Первый контейнер" и.т.д...?

Отредактировано Kawaii Nyak (Пн, 1 Фев 2010 10:06:06)

0

Поделиться12Вт, 2 Фев 2010 17:47:09

Автор: Катарина
Заслуженный
Зарегистрирован: Ср, 5 Дек 2007
Сообщений: 585
Уважение: +8
Позитив: +174
Пол: Женский
Последний визит:
Вт, 31 Дек 2019 11:25:11

У меня вопрос как сделать чтобы картинки меню были соеденены между собой?
http://nothingelse.mybb.ru/ смотрите форум и я думаю сами поймёте
расстояние между одной картиной от другой
я хочу чтобы это всё выглядело как одна картинка

0

Поделиться13Вт, 2 Фев 2010 20:49:14

Автор: Катарина
Заслуженный
Зарегистрирован: Ср, 5 Дек 2007
Сообщений: 585
Уважение: +8
Позитив: +174
Пол: Женский
Последний визит:
Вт, 31 Дек 2019 11:25:11

обновляю*

0

Поделиться14Вт, 2 Фев 2010 20:59:09

Автор: rps
Стремясь к новому...
Зарегистрирован: Вс, 12 Окт 2008
Сообщений: 22652
Уважение: +4738
Позитив: +3431
Пол: Мужской
Предупреждения: ‡ 1. 2. 3. ... 10!
Последний визит:
Вс, 14 Мар 2021 21:42:57

Катарина
Размеры пробовали менять в том коде, что ставится в ХТМЛ-верх?

+1

Поделиться15Ср, 3 Фев 2010 10:16:42

Автор: Катарина
Заслуженный
Зарегистрирован: Ср, 5 Дек 2007
Сообщений: 585
Уважение: +8
Позитив: +174
Пол: Женский
Последний визит:
Вт, 31 Дек 2019 11:25:11

rps
Прошу прощения, не подумала об этом сразу, просто картинки вроде делала того же размера что ячейки, но теперь всё ок)

0

Поделиться16Пт, 12 Фев 2010 18:51:00

Автор: Тыква вредности
Заслуженный
Зарегистрирован: Пт, 12 Дек 2008
Сообщений: 220
Уважение: +22
Позитив: +45
Последний визит:
Пн, 30 Сен 2013 23:26:57

rps
Что сделать, что бы при наведении на ссылку в этом меню, её фон менял цвет?

0

Поделиться17Пт, 12 Фев 2010 21:40:02

Автор: rps
Стремясь к новому...
Зарегистрирован: Вс, 12 Окт 2008
Сообщений: 22652
Уважение: +4738
Позитив: +3431
Пол: Мужской
Предупреждения: ‡ 1. 2. 3. ... 10!
Последний визит:
Вс, 14 Мар 2021 21:42:57

Тыква вредности
Не совсем понял, где там ссылка...

0

Поделиться18Сб, 13 Фев 2010 01:33:38

Автор: Тыква вредности
Заслуженный
Зарегистрирован: Пт, 12 Дек 2008
Сообщений: 220
Уважение: +22
Позитив: +45
Последний визит:
Пн, 30 Сен 2013 23:26:57

rps
допустим, поставлю я это меню. И вставлю туда ссылки. Хочется, чтобы они выделялись как-то, что ли )

0

Поделиться19Вс, 14 Фев 2010 20:26:01

Автор: Ka_Si
Заслуженный
Зарегистрирован: Пн, 9 Июл 2007
Сообщений: 80
Уважение: +1
Позитив: +19
Пол: Женский
Последний визит:
Пт, 14 Июн 2013 23:29:47

Как заменить "Первый контейнер", "Второй контейнер" и т.д. картинками?

0

Поделиться20Вс, 14 Фев 2010 20:40:53

Автор: Reysler
LastMan
Зарегистрирован: Вт, 9 Дек 2008
Сообщений: 3415
Уважение: +2101
Позитив: +673
Пол: Мужской
Последний визит:
Сегодня 10:06:21

Ka_Si, меняете названия контейнеров на

Код:

<img src='путь до картинки'>

+1

Telegram @a_reysler

Единый форум поддержки

Меню навигации

Пользовательские ссылки

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

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

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

Поделиться1Пт, 27 Ноя 2009 03:12:55

Поделиться2Вс, 29 Ноя 2009 17:22:30

Поделиться3Вс, 27 Дек 2009 19:38:29

Поделиться4Вс, 27 Дек 2009 19:53:42

Поделиться5Вс, 27 Дек 2009 19:54:38

Поделиться6Вс, 27 Дек 2009 20:36:51

Поделиться7Вс, 27 Дек 2009 20:48:23

Поделиться8Пт, 29 Янв 2010 12:21:05

Поделиться9Пт, 29 Янв 2010 13:19:47

Поделиться10Сб, 30 Янв 2010 10:01:35

Поделиться11Пн, 1 Фев 2010 09:57:49

Поделиться12Вт, 2 Фев 2010 17:47:09

Поделиться13Вт, 2 Фев 2010 20:49:14

Поделиться14Вт, 2 Фев 2010 20:59:09

Поделиться15Ср, 3 Фев 2010 10:16:42

Поделиться16Пт, 12 Фев 2010 18:51:00

Поделиться17Пт, 12 Фев 2010 21:40:02

Поделиться18Сб, 13 Фев 2010 01:33:38

Поделиться19Вс, 14 Фев 2010 20:26:01

Поделиться20Вс, 14 Фев 2010 20:40:53