"Плавающая" табличка в Объявление
(Первоначальная идея от rps
http://hostjs-mybb2011.narod.ru/table_float.htm
Код:
<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>
.submenutext {
text-align: center;
background:#F9F1DD;
/*position:absolute;*/
(Фон в ячейке (красным) задан для наглядности, - можно убрать или поставить свой(в том числе и картинкой)
Фон под надписи кнопок(при активной кнопке) выделен в нижеследующем коде красным
#menu .tabactive {
color: #2662DF;
background:#F9F1DD;
}
ЗЫ: Поскольку кнопки находятся теперь на внешней табличке - можно располагать их как заблагорассудицо(главное не ошибицо во внешней таблице и оставить центральную ячейку под Экранную таблу контента заданного размера (в данном случае чуть более 720px*260px
Теги: Новые Скрипты
Отредактировано Deff (2011-03-22 15:26:27)
А картинку в размер - сделать - тяжело ?
сняли профилактику. Что самое удивительное, после этого магическим образом таблица оказалась в районе боковой панели, которая почему-то съехала вниз... но табличка, как ни странно, не наверху оказалась, а под ней... а надо бы над, чтобы мы могли боковушку убрать...