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

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

Меню во вкладках с вертикальными кнопками Fdf10
С нашей помощью вы можете создать форум,
похожий на этот!
Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

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

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

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

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

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

Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.

Я админ, не могу зайти!
(забыл / потерял пароль)


Общий FAQ по управлению форумом

FAQ: реклама на форуме

Туториалы по разным функциям ваших форумов

Алфавитный указатель

Интересные решения для форумов

Наши видео-туториалы

Условия пользования сервисом

Ссылки на полезные ресурсы

Последние темы
» Не корректное отображение картинок
автор Luz Сегодня в 19:40

» Переход с 2x2forum.ru на 2x2forum.com
автор Luz Сегодня в 19:13

» Проблема с метатегом Description
автор VeraLV 2024-03-18, 22:31

» 1 марта будет запрет на ВПН, это отразится на работе платформы?
автор Svet007 2024-03-14, 18:43

» нужен скрипт сумма просмотров тем в разделе
автор лексей2222 2024-03-05, 14:37

» Новое: Откройте для себя функцию "Подписка на пользователей"
автор лексей2222 2024-03-02, 00:26

» 301 редирект
автор Dana Domirani 2024-02-26, 01:28

» Помощь в нескольких вопросах по форуму
автор лексей2222 2024-02-22, 20:21

» [Общая тема] Что делать, если вы забыли / потеряли пароль
автор Dana Domirani 2024-02-14, 07:54

» Загрузка форума
автор лисенок 2024-02-13, 08:09

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

Участников: 3

Перейти вниз

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

Сообщение автор Le-Vamp 2012-06-02, 01:44

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

Женщина

Сообщения : 162
Возраст : 26
Регистрация : 2012-05-03
Благодарности : 28

Без предупреждений

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

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

Сообщение автор Le-Vamp 2012-06-02, 02:02

Вот, чтобы понятнее было, шаблончик:
Меню во вкладках с вертикальными кнопками A6a04e0cb40b

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

Женщина

Сообщения : 162
Возраст : 26
Регистрация : 2012-05-03
Благодарности : 28

Без предупреждений

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

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

Сообщение автор Frank 2012-06-02, 02:06

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

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

Мужчина

Сообщения : 361
Возраст : 27
Регистрация : 2012-01-09
Благодарности : 100

Без предупреждений

http://magic.2x2forum.com/

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

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

Сообщение автор Le-Vamp 2012-06-02, 02:14

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

Женщина

Сообщения : 162
Возраст : 26
Регистрация : 2012-05-03
Благодарности : 28

Без предупреждений

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

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

Сообщение автор Dana Domirani 2012-06-02, 02: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; /* цвет фона и фоновая картинка */
}
Сохраните.


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

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


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

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


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


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


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

Женщина

Сообщения : 22994
Возраст : 39
Регистрация : 2008-04-19
Благодарности : 9286

Без предупреждений

http://poltergeist-legacy.com/

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

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

Сообщение автор Le-Vamp 2012-06-02, 02:45

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

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

Женщина

Сообщения : 162
Возраст : 26
Регистрация : 2012-05-03
Благодарности : 28

Без предупреждений

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

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

Сообщение автор Dana Domirani 2012-06-02, 02:56

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

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

Потом замените в 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;
}
и подставьте вместо изображений в примере изображения Ваших кнопок. Сохраните.

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


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

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


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


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


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

Женщина

Сообщения : 22994
Возраст : 39
Регистрация : 2008-04-19
Благодарности : 9286

Без предупреждений

http://poltergeist-legacy.com/

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

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

Сообщение автор Le-Vamp 2012-06-02, 03:08

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

Женщина

Сообщения : 162
Возраст : 26
Регистрация : 2012-05-03
Благодарности : 28

Без предупреждений

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

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

Сообщение автор Dana Domirani 2012-06-03, 17:12

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


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

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


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


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


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

Женщина

Сообщения : 22994
Возраст : 39
Регистрация : 2008-04-19
Благодарности : 9286

Без предупреждений

http://poltergeist-legacy.com/

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

Вернуться к началу

- Похожие темы

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