Популярное сейчас на многих форумах меню. Суть проста: в объявлении или ещё где-то стоит несколько блоков, при нажати на которые открывается меню.
Документация:
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; }
.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;}
</style>В HTML-низ тавите скрипт:
<!--Спойлер - контейнер-->
<script type="text/javascript">
$(document).ready(function(){
$('.splLink').click(function(){
var aaa=$(this).siblings("div.splCont");
$('.spll').find('div.splCont.Active').each(function(){
if($(this).html()!=aaa.html()){$(this).removeClass('Active').hide('normal');}
});
$(this).parent().children("div.splCont").addClass('Active').toggle('normal');
return false;
});
});
</script>А это ставите туда, где хотите увидеть само меню:
<table style="width: 90%">
<tr>
<td><div class="spll">
<div class=splLink href="">Первый контейнер</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont>
Тут будет что-то1</DIV>
</div></td>
<td><div class="spll">
<div class=splLink href="">Второй контейнер</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont>
Тут будет что-то2</DIV>
</div></td>
<td><div class="spll">
<div class=splLink href="">Третий контейнер</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont>
Тут будет что-то3</DIV>
</div></td>
<td><div class="spll">
<div class=splLink href="">Четвёртый контейнер</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont>
Тут будет что-то4</DIV>
</div></td>
<td><div class="spll">
<div class=splLink href="">Пятый контейнер</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont>
Тут будет что-то5</DIV>
</div></td>
<td><div class="spll">
<div class=splLink href="">Шестой контейнер</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont>
Тут будет что-то6</DIV>
</div></td>
</tr>
</table>2. Заполнение меню.
Чтобы заполнить меню своим содержимым, надо обратиться к третьей части кода.
а). По-умолчанию в коде содержится 6 блоков. По своему усмотрению Вы можете изменить это число, добавив новые или удалив какие-либо. Чтобы осуществить это, достаточно размножить (в случае увеличения числа блоков) или удалить (для уменьшения их числа) такой фрагмент:
<td><div class="spll">
<div class=splLink href="">Первый контейнер</div>
<DIV style="DISPLAY: none; position: absolute;" class=splCont>
Тут будет что-то1</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; менять одновременно с предыдущим значением ширины (ширина основных блоков).
в).
.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;}Отвечает за дизайн выпадающих блоков.
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; - выравнивание текста в выпадающих блоках (по-умолчанию: центр).
Теги: Скрипты и дополнения, Меню,Выпадающее меню
