Кнопки-закладки с информацией

автор Sanjana Singh Июль 20th 2012, 20:57

Доброго времени суток.
Хочу вместо бокового виджета на форуме поставить под шапку кнопки-закладки, при нажатии на которые отображается указанная информация.
Вот как здесь:

Спойлер:

Как этого добиться? Заранее спасибо)

автор Sanjana Singh Июль 22nd 2012, 09:40

Помощь все еще нужна)

автор **Dana Domirani** Июль 22nd 2012, 11:31

См. тут: https://help.forum2x2.ru/t25928-topic

автор Домовой Июль 22nd 2012, 11:42

или можно такой вариант

Представляет из себя кнопки, при клике на которые открывается окно с содержимым

ПА - Модули - Управление кодами Javascript
Активируйте модуль если он не активипован.
Создайте новый Javascript
Название * : на ваше усмотрение
Расположение: В оглавлении
Код Javascript * :

Код:: jQuery(document).ready(function(){ jQuery('.splLink').click(function(){ jQuery(this).parent().children('div.splCont').toggle('normal'); return false; }); });

ОК.

В CSS вставьте

div.splLink {
width: 130px;
height: 20px;
border: 2px solid #A0522D;
background: #FFFACD;
text-align: center;
font-family: Times New Roman;
font-size: 15px; padding: 3px;
}
.spll {
width: 130px;
height: 70px;
}
.spll div.splCont {
height: auto;
width: auto;
background: url(http://tps.bbmy.ru/uploads/0003/83/96/1556-1.png);
padding: 5px;
z-index: 1000;
margin-top: 5px;
border: 1px dotted #CD853F;
font-size: 14px;
font-family: Times New Roman;
text-align: center;
}

ширина кнопки
высота кнопки
фон кнопки
фон выплывающего окна

Далее в Приветствие на главной вставьте само меню

<center>
<table style="width: 80%">
<tr>
<td>
<div class="spll">
<div class="splLink">Контейнер 1</div>
<div style="DISPLAY: none; position: absolute;" class="splCont" >
Содержимое 1
</div>

</div>
</td>
<td>
<div class="spll">
<div class="splLink">Контейнер 2</div>
<div style="DISPLAY: none; position: absolute;" class="splCont" >
Содержимое 2
</div>

</div>
</td>
<td>
<div class="spll">
<div class="splLink">Контейнер 3</div>
<div style="DISPLAY: none; position: absolute;" class="splCont" >
Содержимое 3
</div>

</div>
</td>
<td>
<div class="spll">
<div class="splLink">Контейнер 4</div>
<div style="DISPLAY: none; position: absolute;" class="splCont" >
Содержимое 4
</div>

</div>
</td>
<td>
<div class="spll">
<div class="splLink">Контейнер 5</div>
<div style="DISPLAY: none; position: absolute;" class="splCont" >
Содержимое 5
</div>

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