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

Объявление

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

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

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

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

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

Подробнее

Мийрон

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

Подробнее

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

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

Подробнее

Дизайн «Warlords of Draenor»

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

Подробнее

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

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

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

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

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



Контейнер с боковыми вкладками для информации

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

1

Авторы: Deff
Тот же Контейнер с вкладками для информации, только вкладки находятся сбоку слева, а не наверху.

Скриншот
https://forumupload.ru/uploads/0007/e3/f7/2617/963575.png

Демо

[html]<center><table style="width: 800px">
<tbody>
  <tr>
   <td valign=top>
    <div id="menu"> <b>
<span alt="#sm1" style="cursor: pointer;">Добро пожаловать</span>
<span alt="#sm2" style="cursor: pointer;">Новости форума</span>
<span alt="#sm3" style="cursor: pointer;">Администрация</span>
<span alt="#sm4" style="cursor: pointer;">Баннеры партнеров</span>
           </b>
    </div>
   </td>
   <td id="MenuTxT"  align="center" valign="top">
    <div id="submenu" align="center">
     <div id="sm1" class="submenutext" style="display:block;">
<br/><br/>
текст добро пожаловать
</div>
     <div id="sm2" class="submenutext"><br /><br />
текст новости форума
</div>
     <div id="sm3" class="submenutext"><br /><br />
текст Администрация
</div>
     <div id="sm4" class="submenutext"><br /><br />
текст баннеры партнеров
</div>

</div>
   </td>
</tr>
</tbody>
</table></center>
<style>
#menu {
margin-top: -5px;
width: 180px;
height: 60px;
background-repeat : no-repeat;}

#menu span {
text-align:left;
display:block;
color:#000000;
margin: 7px 0;
padding: 11px;
}
#submenu, #menu span {
    border-radius:5px;
    -webkit-border-radius:5px;
    -khtml-border-radius:5px;
    -moz-border-radius:5px;
    -o-border-radius:5px;
background:#efeff0;
}

#menu .tabactive {
color: #000000;
    background:#777777;
}

#submenu {
padding: 3px;
height: 180px;
text-align: center;
font-size: 12px;
width: 540px;
}

.submenutext {
display: none;
height: 40px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("td.#MenuTxT div.submenutext").hide();
<!--$(".tabs span:first").addClass("active").show(); -->
$("td.#MenuTxT div.submenutext:first").show();
$("div.#menu span").click(function() {
    $("div.#menu span").removeClass("tabactive");
    $(this).addClass("tabactive");
    $("td.#MenuTxT div.submenutext").hide();
    var activeDiv = $(this).attr("alt");
    $("div."+activeDiv).fadeIn();
    return false; });
});
</script>[/html]

1. В хтмл-верх вставляем параметры стиля нашего контейнера:

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

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

В хтмл-низ вставляем скрипт, позволяющий переключаться между вкладками контейнера:

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

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

Туда, где хотите видеть контейнер (чаще всего объявление) ставим этот код:

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

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

Отредактировано Герда (20.05.13 06:27)

+2

2

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

Администрация разыскивает автора скрипта

rps Deff Кофеман
Начало положил rps, => http://forum.mybb.ru/viewtopic.php?id=2 … 13#p627068 , но при клике скроллировалась страница в начало, -я поменял скрипт на jQuery, потом тестировал Кофеман  меняли еще несколько раз

(*Ващет они создавались как более простой Вариант вкладок, чем те на которые ссылаются в Первом посте, есть три или четыре Варианта оформления - сверху, с боку, и разный стиль движений появления исчезновения.

Отредактировано Deff (06.11.11 01:05)

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

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

+1

3

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

(*Ващет они создавались как более простой Вариант вкладок, чем те на которые ссылаются в Первом посте, есть три или четыре Варианта оформления - сверху, с боку, и разный стиль движений появления исчезновения.

Deff, ты забыл добавить про вставку фоновых картинок и вариации со сменой фонов в окне, где отображается информация.

0

4

Кофеман, Давно не Занимался ими - Если вспомнишь - Дабавь -?  faiko - откопирует в Первый Пост

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

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

0

5

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

Кофеман, Давно не Занимался ими - Если вспомнишь - Дабавь -?  faiko - откопирует в Первый Пост

Добро. Пока только изучаю местные края. Если что повторится и ты уже выкладывал - поправь.

1. Меню по клику с эффектом скольжения при смене содержимого меню
Ссылка на пост с хтмл, скриптом и стилем
Превью от Deff'a - http://hostjs-mybb2011.narod.ru/Table-scroll_V2.htm

2. Меню по клику с плавной сменой содержимого меню
Ссылка на пост с хтмл, скриптом и стилем
Превью от Deff'a - http://hostjs-mybb2011.narod.ru/table_float.htm

3. Еще один вариант со скольжением, но с фоновой картинкой
Ссылка на пост с хтмл, скриптом и стилем
Превью от Deff'a - http://hostjs-mybb2011.narod.ru/TASHUNKO.htm

4. Еще эффект с фоновой картинкой в .submenutext
Ссылка на пост с хтмл, скриптом и стилем
Превью от Deff'a - http://hostjs-mybb2011.narod.ru/TASHUNKO2.htm

5. Вертикальная смена содержимого. Картинка выростает из левого верхнего угла.
Превью от Deff'a -  http://hostjs-mybb2011.narod.ru/TASHUNKOVertical.htm
Правка только стиля из п.3 выше

Фрагмент правки в стиле|Закрыть

.submenutext {
text-align: center;
background:#F9F1DD;
position:absolute;
width:100%;
width: 720px!important;
display: none;
height: 260px;
}

6. Вертикальная смена содержимого. Картинка появляется по все ширине сверху вниз.
Превью от Deff'a -  http://hostjs-mybb2011.narod.ru/KofemanVertical.htm
Правка только стиля из п.3

Правка стиля|спрятать
Код:
<style>	
#menu span {
padding: 7px 15px 7px; 
margin-right: 5px;
margin: 4px -4px;

width: 100px;
text-decoration: none;
color:#641C22;
font-size:13px;
text-shadow:#9C706D 1px 1px 2px;
border
}
#menu .tabactive {
color: #2662DF;
background:#F9F1DD;
}

#submenu {
padding: 5px;
height: 300px;
text-align: left;
font-size: 12px;
width: 720px;
}

.submenutext {
text-align: center!i;
background:#F9F1DD;
position:absolute;
width:100%;
width: 720px!important;
display: none; 
height: 300px;
}
.submenutext img{
width: 720px!important;
}
.bgdiv {
background:url(http://savepic.net/744293.png) right top repeat-y;
position:relative;
text-align: left;
width:100%;
height:100%;
}
</style>

Может что-то и забыл. Вспомню, то дополню.

+2

6

Возник вопрос @_@
Вчера ставила скрипт на форум, прикрутила всякие плюшки, сижу, радуюсь. Сегодня подумала, что в одну из вкладок было бы неплохо запихнуть таблицу, чтобы разбить текст на 3 столбца. Вставила отдельно от скрипта - всё хорошо. Поставила в скрипт - таблица уехала куда-то в низ поля. Есть подозрения, что на него как-то влияет стиль форума (потому что, например, у таблиц в отдельном виде не отображаются границы внутри, но фиг с ними).
Если что, сама добавила только в padding:10px в параметры submenu, размера шрифта добивалась тегом <big> (не пришло в голову сначала, что можно просто его в параметрах изменить, но потом так и собираюсь сделать), меняла цвета текста и полей.
Посмотреть, что получилось, можно там ----> тык. Смотреть последнюю вкладку

0

7

Seth
там перед таблицей стоят два тега <br/>, уберите и все будет хорошо)

+1

8

L Micaelis
А я-то думаю, что не так х) Спасибо большое)

0

9

faiko
а можно узнать: как в этом контейнере изменить фоновую картинку?(вставить)

0

10

Подскажите пожалуйста, есть прокрутка в таблице в этой? как её можно вставить? Текста у меня шибко много:3

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

.

0