Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

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


С нашей помощью вы можете создать форум,
похожий на этот!
Поделиться ссылкой

Мы в социальных сетях



- Правила форума -

для обязательного прочтения!


Внимание! Важная информация для РЕГИСТРАЦИИ на форуме:

Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
Интересные решения
Быстрый переход к сервисам: JPG-Net Видео фоторедактор Транслит
Видео-туториалы
Настройка шапки форума
Категории и подфорумы - 1
Создание портала
Модули
Виджеты
Как присваивать награды
Выброс кубиков
Pop-up для входа на форум
Настроение в профиле

Меню во вкладках с вертикальными кнопками

Предыдущая тема Следующая тема Перейти вниз

Решено Меню во вкладках с вертикальными кнопками

Сообщение автор Le-Vamp в Пт 1 Июн - 18:44

Здрасвствуйте!
Хотелось бы сделать для нашей ролевой меню-таблицу с вкладками и кнопкми. Поясню: слева кнопки "Старт", "Новости", "Навигация", "Доска почета", "Погода", и по клику справа открываются соответствующие разделы с текстом.
Подскажите пожалуйста, можно ли сделать такую таблицу? Очень уж хочется! smile

Le-Vamp
 
 

Пол : Женщина
Сообщения : 166
Возраст : 19
Карма : Без предупреждений
Благодарности : 28
Регистрация : 2012-05-02

Вернуться к началу Перейти вниз

Решено Re: Меню во вкладках с вертикальными кнопками

Сообщение автор Le-Vamp в Пт 1 Июн - 19:02

Вот, чтобы понятнее было, шаблончик:


Да,и еще объясните мне, как сделать в части содержимого две колонки d_daisy И как поставить? Я пока не знаю, либо хочу его только на главной, либо на всех страницах форума под меню навигации.

Le-Vamp
 
 

Пол : Женщина
Сообщения : 166
Возраст : 19
Карма : Без предупреждений
Благодарности : 28
Регистрация : 2012-05-02

Вернуться к началу Перейти вниз

Решено Re: Меню во вкладках с вертикальными кнопками

Сообщение автор Frank в Пт 1 Июн - 19:06

Да,и еще объясните мне, как сделать в части содержимого две колонки
Самый простой способ: создать таблицу на две колонки.

Код:
<table border="0" width="100%">
<tr>
<td width="50%">Левая колонка</td>
<td>Правая колонка</td>
</tr>
</table>
Ну а дальше наполнить ее чем хочется smile

Frank
 
 

Пол : Мужчина
Сообщения : 365
Возраст : 19
Место обитания : Украина, Херсон.
Настроение : Отличное!
Карма : Без предупреждений
Благодарности : 100
Регистрация : 2012-01-08

http://magic.2x2forum.com/

Вернуться к началу Перейти вниз

Решено Re: Меню во вкладках с вертикальными кнопками

Сообщение автор Le-Vamp в Пт 1 Июн - 19:14

Спасибо за табличку, подошло! Осталось разобраться с меню ))

Le-Vamp
 
 

Пол : Женщина
Сообщения : 166
Возраст : 19
Карма : Без предупреждений
Благодарности : 28
Регистрация : 2012-05-02

Вернуться к началу Перейти вниз

Решено Re: Меню во вкладках с вертикальными кнопками

Сообщение автор Dana Domirani в Пт 1 Июн - 19:35

Предлагаю такой вариант.

1. Сам код меню с кнопками и вкладками будет выглядеть так:
Код:
<div id="page-but">

<div id="but-menu">
<div id="tb1-button" class="button">Старт</div>
<div id="tb2-button" class="button">Новости</div>
<div id="tb3-button" class="button">Навигация</div>
<div id="tb4-button" class="button">Доска почета</div>
<div id="tb5-button" class="button">Погода</div>
</div>

<div id="but-content">
<div id="tb1" class="but">Контент для кнопки Старт</div>
<div id="tb2" class="but">Контент для кнопки Новости</div>
<div id="tb3" class="but">Контент для кнопки Навигация</div>
<div id="tb4" class="but">Контент для кнопки Доска почета</div>
<div id="tb5" class="but">Контент для кнопки Погода</div>
</div>

</div>
При желании, количество кнопок / вкладок можно уменьшить или увеличить.



2. Куда это ставить.
1) или в шаблон overall_header (Верхняя часть страницы) после фрагмента
Код:
<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
<tr>
<td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
</tr>
</table>
<div style="clear: both;"></div>
где сохраняете и публикуете (!)
— это вариант для BB2, меню будет отображаться на всех страницах.
2) или в ПА > Оформление > Главная - Общая информация > Приветствие на главной странице
— это вариант для любого движка, меню будет отображаться только на главной.



3. В ПА > Модули > Управление кодами JS укажите Активировать управление кодами JS : да
Создайте новый файл и заполните следующим образом:
Название: любое, например, доп-меню
Расположение: на всех страницах или только на главной, в зависимости от того, куда поставите код меню (см. предыдущий пункт)
Код:
Код:
$(function(){
               $("#tb2-button, #tb3-button, #tb4-button, #tb5-button").css({
            opacity: 0.9
         });
                  $("#page-but div.button").click(function(){
                              $clicked = $(this);
                                        if ($clicked.css("opacity") != "1" && $clicked.is(":not(animated)")) {
                                    $clicked.animate({
                     opacity: 1,
                  }, 60 );
                  var idToLoad = $clicked.attr("id").split('-');
                  $("#but-content").find("div.but:visible").fadeOut("fast", function(){
                     $(this).parent().find("#"+idToLoad[0]).fadeIn();
                  })
               }
               $clicked.siblings(".button").animate({
                  opacity: 0.9,
               }, 60 );
            });
      });
Сохраните.


4. Добавьте настройки в Па > Оформление > Цвета > Каскадная таблица стилей CSS (базовые, при желании все это можно разукрасить как угодно)

Код:
/* весь блок меню */
#page-but {
width: 900px; /* ширина */
height: 400px; /* высота */
background: #dee3e7 url(http://illiweb.com/fa/empty.gif) center repeat; /* цвет фона и фоновая картинка */
margin: 0 auto;
}

/* блок с кнопками */
#but-menu {
float:left;
width: 150px; /* ширина */
}

/* блок с контентом для вкладок */
#but-content {
float:right;
margin-left: 150px; /* отступ слева на ширину блока с кнопками */
height: 400px; /* высота */
width: 750px; /* ширина */
background: #D5C6C6 url(http://illiweb.com/fa/empty.gif) center repeat; /* цвет фона и фоновая картинка */
margin: 0;
}

/* все скрытые блоки с контентом после первого */
#tb2, #tb3, #tb4, #tb5 {
display: none;
}

/* кнопки слева */
#but-menu .button {
cursor: pointer;
width: 120px; /* ширина */
height: 50px; /* высота */
line-height: 50px; /* равно высоте (!) кнопки */
background-color: #C0C0C0; /* цвет фона */
margin: 5px auto;
font-size: 11px; /* размер надписей */
text-align: center;
}

/* содержимое вкладок */
div.but {
max-height: 375px; /* максимальная высота */
overflow: hidden; /* все, что не влезает в блок будет скрыто */
padding: 5px;
margin: 5px;
font-size: 11px; /* размер текста */
text-align: left; /* выравнивание текста */
border: 1px dashed #fff; /* пунктирная обводка */
background: #dee3e7 url(http://illiweb.com/fa/empty.gif) center repeat; /* цвет фона и фоновая картинка */
}
Сохраните.


Результат должен выглядеть так:



Где находится CSS?
Па > Оформление > Цвета > Каскадная таблица стилей CSS


Где искать основные шаблоны?
ПА > Оформление > Шаблоны > Общие настройки


Где находится раздел для подключения скриптов
ПА > Модули > Управление кодами Javascript



Dana Domirani
Администратор
Администратор

Пол : Женщина
Сообщения : 21914
Возраст : 31
Место обитания : СПб
Карма : Без предупреждений
Благодарности : 8765
Регистрация : 2008-04-18

http://poltergeist-legacy.com/

Вернуться к началу Перейти вниз

Решено Re: Меню во вкладках с вертикальными кнопками

Сообщение автор Le-Vamp в Пт 1 Июн - 19:45

Дана, ВЫ СУПЕР!!!! вот именно, что хотелось)) 29 

А можно еще кнопочки сделать в виде картинок?

Le-Vamp
 
 

Пол : Женщина
Сообщения : 166
Возраст : 19
Карма : Без предупреждений
Благодарности : 28
Регистрация : 2012-05-02

Вернуться к началу Перейти вниз

Решено Re: Меню во вкладках с вертикальными кнопками

Сообщение автор Dana Domirani в Пт 1 Июн - 19:56

Можно. Для начала надо будет нарисовать соответствующие кнопки. Размер в примере — 120*50



Потом замените в CSS фрагмент

Код:
/* кнопки слева */
#but-menu .button {
cursor: pointer;
width: 120px; /* ширина */
height: 50px; /* высота */
line-height: 50px; /* равно высоте (!) кнопки */
background-color: #C0C0C0; /* цвет фона */
margin: 5px auto;
font-size: 11px; /* размер надписей */
text-align: center;
}
на

Код:
/* кнопки слева */
#but-menu .button {
cursor: pointer;
width: 120px; /* ширина */
height: 50px; /* высота */
line-height: 50px; /* равно высоте (!) кнопки */
margin: 5px auto;
font-size: 0;
text-align: center;
}

/* 1 кнопка */
#tb1-button {
background: transparent url("http://i56.servimg.com/u/f56/17/37/83/89/button14.png") no-repeat center;
}

/* 2 кнопка */
#tb2-button {
background: transparent url("http://i56.servimg.com/u/f56/17/37/83/89/button15.png") no-repeat center;
}

/* 3 кнопка */
#tb3-button {
background: transparent url("http://i56.servimg.com/u/f56/17/37/83/89/button16.png") no-repeat center;
}

/* 4 кнопка */
#tb4-button {
background: transparent url("http://i56.servimg.com/u/f56/17/37/83/89/button17.png") no-repeat center;
}

/* 5 кнопка */
#tb5-button {
background: transparent url("http://i56.servimg.com/u/f56/17/37/83/89/button18.png") no-repeat center;
}
и подставьте вместо изображений в примере изображения Ваших кнопок. Сохраните.



Где находится CSS?
Па > Оформление > Цвета > Каскадная таблица стилей CSS


Где искать основные шаблоны?
ПА > Оформление > Шаблоны > Общие настройки


Где находится раздел для подключения скриптов
ПА > Модули > Управление кодами Javascript



Dana Domirani
Администратор
Администратор

Пол : Женщина
Сообщения : 21914
Возраст : 31
Место обитания : СПб
Карма : Без предупреждений
Благодарности : 8765
Регистрация : 2008-04-18

http://poltergeist-legacy.com/

Вернуться к началу Перейти вниз

Решено Re: Меню во вкладках с вертикальными кнопками

Сообщение автор Le-Vamp в Пт 1 Июн - 20:08

Спасибо! Все отлично работает! 38 

Le-Vamp
 
 

Пол : Женщина
Сообщения : 166
Возраст : 19
Карма : Без предупреждений
Благодарности : 28
Регистрация : 2012-05-02

Вернуться к началу Перейти вниз

Решено Re: Меню во вкладках с вертикальными кнопками

Сообщение автор Dana Domirani в Вс 3 Июн - 10:12

Рада была подсказать!


Где находится CSS?
Па > Оформление > Цвета > Каскадная таблица стилей CSS


Где искать основные шаблоны?
ПА > Оформление > Шаблоны > Общие настройки


Где находится раздел для подключения скриптов
ПА > Модули > Управление кодами Javascript



Dana Domirani
Администратор
Администратор

Пол : Женщина
Сообщения : 21914
Возраст : 31
Место обитания : СПб
Карма : Без предупреждений
Благодарности : 8765
Регистрация : 2008-04-18

http://poltergeist-legacy.com/

Вернуться к началу Перейти вниз

Предыдущая тема Следующая тема Вернуться к началу


 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения