ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка

Объявление

Проект от команды FD

☑ Поиск роли, партнёра, игрока.
☑ Легко. Удобно. Современно.
☑ Мы в процессе разработки.

Читать спойлеры

Загадочный Дом «Кузнечик»

Форумные игры, кино, позитивное отношение и душевное общение!
Есть в мире место, где душе тепло...
Заходи, мы будем тебе рады!

Подробнее

Мийрон

Качественный пиар быстро и недорого.
Красивейшие дизайны по низким ценам.
Каталог ролевых игр.

Подробнее

FD Chat - Чат на вашем форуме

Чат на отдельной странице на форуме. Без регистрации, используются форумные аккаунты.
Стоимость: 1500р
Первым 10 покупателям скидка 20%.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайтеПредложения
Стать модераторомОтзывы

Подробнее
Начался второй тур лотереи для форумов "Новогодний кот". Подаём заявки на участие до 8.12. Не пропустите!
Ищешь чем бы украсить свой форум или сайт к Новому году? 🎄 Мы поможем нарядиться! 🎄

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

Привет, Гость! Войдите или зарегистрируйтесь.



Плавающий контейнер с вкладками

Сообщений 1 страница 10 из 49

1

"Плавающая" табличка в Объявление
Контейнер с плавной сменой слайдов при переключении вкладок.

[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 выше

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Подпись автора

ForumD.ru очень нужны подписчики и социальных сетях и на YouTube!

https://forumstatic.ru/files/0007/e3/f7/42799.png   https://forumstatic.ru/files/0007/e3/f7/10336.png   https://forumstatic.ru/files/0007/e3/f7/85578.png

С увеличением количество подписчиков, нам откроются новые возможности и функционал.
Если хочешь поддержать наш проект - просто подпишись! :)

+3

2

Кажется мне, проще разбить код на три части: цсс, скрипт и само меню

0

3

L Micaelis, смысла особого нет, где скрипт, там и сss действует, и удобно удалять его из единого места -(* ксать со скриптовой установкой - завсегда (имхо): сss скрипты и HTML ставить совместно, поскольку css действует на текущий HTML и скрипт,
и друг - без друга они смысла не имеют, в отличие от сss кодов действующих на многие элементы и на многих страницах

Отредактировано Deff (11.11.11 17:02)

Подпись автора

Скрипт мгновенных уведомлений new
(для замены от rusff), Платно! писать в Лс на РЕНО

0

4

Deff,
зато начинающим пользователям ориентироваться куда проще, да и мне лично как дизайнеру много проще расставить все "по своим местам", нежели потом перерывать весь хтмл-низ в поисках скрипта, который вообще в Объявлении находится)

0

5

L Micaelis Вот и я про тоже - ставить всё в объявление и скрипт и HTML и сss

Подпись автора

Скрипт мгновенных уведомлений new
(для замены от rusff), Платно! писать в Лс на РЕНО

0

6

:D  Есть ыщо такой Вариант: http://hostjs-mybb2011.narod.ru/KofemanVertical.htm

или такой => http://hostjs-mybb2011.narod.ru/TASHUNKO2.htm

Отредактировано Deff (11.11.11 19:28)

Подпись автора

Скрипт мгновенных уведомлений new
(для замены от rusff), Платно! писать в Лс на РЕНО

0

7

Deff,
а я про другое, ставить все по своим местам: стиль - в верх, скрипт - в низ, таблицу - в Объявление)

0

8

Deff написал(а):

Есть ыщо такой Вариант: http://hostjs-mybb2011.narod.ru/KofemanVertical.htm
или такой => http://hostjs-mybb2011.narod.ru

воу! выглядит круто же

0

9

Deff
можно своровать еще варианты? http://i.smiles2k.net/lol_smiles/1_009.gif

Подпись автора

ForumD.ru очень нужны подписчики и социальных сетях и на YouTube!

https://forumstatic.ru/files/0007/e3/f7/42799.png   https://forumstatic.ru/files/0007/e3/f7/10336.png   https://forumstatic.ru/files/0007/e3/f7/85578.png

С увеличением количество подписчиков, нам откроются новые возможности и функционал.
Если хочешь поддержать наш проект - просто подпишись! :)

0

10

Герда написал(а):

можно своровать еще варианты?

Та не жалко. Эт Вобщем все подталкивания Кофемана( зимние еще

Подпись автора

Скрипт мгновенных уведомлений new
(для замены от rusff), Платно! писать в Лс на РЕНО

0