"Плавающая" табличка в Объявление
Контейнер с плавной сменой слайдов при переключении вкладок.
[html]<style>
#menu span {
padding: 7px 15px 7px;
margin-right: 5px;
margin: 10px 0;
width: 100px;
text-decoration: none;
}
#menu .tabactive {
color: #2662DF;
background:#F9F1DD;
}#submenu {
padding: 5px;
height: 200px;
text-align: left;
font-size: 12px;
width: 720px;
}.submenutext {
text-align: center;
background:#F9F1DD;
/*position:absolute;*/
width:auto;
margin:0 2px;
max-width: 100%;
display: none;
height: 260px!important;
}
span.menuButton {
cursor:pointer;
cursor:hand;
}
</style><center><table style="width: 615px;">
<tbody>
<tr>
<td align="center">
<div id="menu"> <b>
<span alt=#sm1 class="menuButton">Кнопка 1</span>
<span alt=#sm2 class="menuButton">Кнопка 2</span>
<span alt=#sm3 class="menuButton">Кнопка 3</span>
<span alt=#sm4 class="menuButton">Кнопка 4</span>
<span alt=#sm5 class="menuButton">Кнопка 5</span>
</b>
</div>
</td>
</tr>
<tr align="left">
<td id="MenuTxT" valign="top" style="height: 260px;">
<div id="submenu" width="100%">
<table width=100%><tr>
<td id="sm1" class="submenutext">
<div>Контент 1-й кнопки</div>
</td>
<td id="sm2" class="submenutext">
<div>Контент 2-й кнопки</div>
</td>
<td id="sm3" class="submenutext">
<div>Контент 3-й кнопки</div>
</td>
<td id="sm4" class="submenutext">
<div>Контент 4-й кнопки</div>
</div>
<td id="sm5" class="submenutext">
<div>Контент 5-й кнопки</div>
</td>
</tr></table>
</div>
</td>
</tr>
</tbody>
</table></center>
<script type="text/javascript">
$(document).ready(function() {
$("td.submenutext").hide();
$("td.submenutext:first").show();
$(".menuButton").click(function() {
$(".menuButton").removeClass("tabactive");
$(this).addClass("tabactive");
var activeDiv = $(this).attr("alt");$("td.submenutext *").hide(1600)
$("td.submenutext").hide(2200)
$("td."+activeDiv).show(2200)
$("td."+activeDiv+" *").show(600)
return false; });
});
</script>[/html]
Автор: Deff
Платформа: любая
Идея: rps
.submenutext {
text-align: center;
background:#F9F1DD;
/*position:absolute;*/
Фон в ячейке (красным) задан для наглядности, - можно убрать или поставить свой (в том числе и картинкой).
Фон под надписи кнопок (при активной кнопке) выделен в нижеследующем коде красным:
#menu .tabactive {
color: #2662DF;
background:#F9F1DD;
}
Поскольку кнопки находятся теперь на внешней табличке - можно располагать их как заблагорассудицо(главное не ошибицо во внешней таблице и оставить центральную ячейку под Экранную таблу контента заданного размера
Другие вариации плавающей таблички
1. Вариант с эффектом скольжения при смене содержимого
Демо
.submenutext {
background:#F9F1DD;
Красное - если фон не нужен, убираем, или меняем на свое
2. Вариант со скольжением и с картинкой
Демо
3. Эффект скольжения с фоновой картинкой в .submenutext
Демо
Смена фоновых картинок:
<div id="sm1" class="submenutext" style="background:url(Ccылка) no-repeat;">
4. Вертикальное скольжение с картинкой. Картинка выростает из левого верхнего угла.
Демо
Правка только стиля из п.2 выше
5. Вертикальное скольжение с растягиванием картинки. Картинка появляется по все ширине сверху вниз.
Демо
Правка только стиля из п.2 выше
