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

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


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

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

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


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

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

Таблица: вид меню пунктов

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

Таблица: вид меню пунктов

Сообщение автор NurJaN в Ср 9 Янв - 0:43

Снова я со своей таблицой тревожу вас))))

скриншот:

1)Хотелось бы сделать так, чтобы кнопки меню, которые находятся слева, переместить на вверх.

2) Чтобы перейти на определенный контент, нужно нажимать на эти кнопки меню, можно ли сделать так, чтобы они автоматически переключались??

Вот хтмл код таблицы:
Код:
<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">
 
  <table align=center style='height: 268px;'>
    <tr><td style='padding: 15px; vertical-align: top; border-right: solid 1px black; width: 230px; text-align: center'>
      <span style='color: black; font-size: 12px; font-weight: bold; vertical-align: top'> <img src=http://s41.radikal.ru/i093/1212/59/d8478c23d03d.png><br><br>
      Приветствуем вас на ролевой по аниме и манге "Синий экзорцист". Чтобы начать играть, вам необходимо зарегестрироваться и подать анкету. Принимаются как канонические персонажи, так и неканонические. Если у вас возникнут вопросы, вы всегда можете обратиться к администрации. Будем рады видеть новых игроков на форуме и надеемся, что здесь вам понравится! </span>
     
        <td style='padding: 15px; vertical-align: top; border-right: solid 1px black; width: 230px; text-align: center'>
      <div style='overflow: auto; height: 230px;'>
          <span style='color: black; font-size: 12px; font-weight: bold; vertical-align: top'> <img src=http://s019.radikal.ru/i615/1212/28/64308c001f38.png><br><br>
        <br><br>Здесь будут Новости<br><br><img align=right src=ЗДЕСЬ ДОЛЖНА БЫТЬ КАРТИНКА></img></span>
          </div>

</table>
 
  </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>

Вот CSS таблицы:
Код:
/* весь блок меню */
#page-but {
  width: 1000px;
  height: 290px;
  background-image: url(http://s019.radikal.ru/i607/1212/61/9c0fcc3caac3.png);
  background-repeat: no-repeat;
}

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

/* блок с содержимым страниц меню */
#but-content {
  float: left;
  margin-left: 150px;
  height: 290px;
  width: 850px;
  margin: 0;
}

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

/* кнопки */
#but-menu .button {
  cursor: pointer;
  width: 120px;
  height: 50px;
  line-height: 50px;
  background-color: none;
  margin: 5px auto;
  font-size: 11px;
  border: dashed 1px black;
  text-align: center;
}

/* страницы меню */
div.but {
  max-height: 290px;
  overflow: hidden;
  padding: 5px;
  margin: 5px;
  font-size: 11px;
  border: 1px dashed black;
}

Вот Javascript :
Код:
$(function(){
              $("#tb2-button, #tb3-button, #tb4-button, #tb5-button").css({
            opacity: 0.7
        });
                  $("#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.7,
              }, 60 );
            });
      });



Прошу пожалуйста помогите, сечас я нуждаюсь в вашей помощи больше всего)))
avatar
NurJaN
Новичок

Сообщения : 11
Регистрация : 2012-12-31
Благодарности : 0

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

http://testexorcist.forum2x2.ru/

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

Re: Таблица: вид меню пунктов

Сообщение автор Dana Domirani в Ср 9 Янв - 13:26

Вариант с кнопками вверху уже есть: см. в теме http://help.forum2x2.ru/t18896-topic

Чтобы перейти на определенный контент, нужно нажимать на эти кнопки меню, можно ли сделать так, чтобы они автоматически переключались??
Нет, для этого Вам понадобиться слайдер, а не таблица.
Ищите вариант именно слайдера:
1) http://help.forum2x2.ru/t23987-topic
2) http://help.forum2x2.ru/t29427-topic



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


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


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


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

Женщина

Сообщения : 22454
Возраст : 32
Регистрация : 2008-04-18
Благодарности : 9053

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

http://poltergeist-legacy.com/

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

Re: Таблица: вид меню пунктов

Сообщение автор NurJaN в Ср 9 Янв - 19:12

Я вставил джава скрипт, что то не получается все равно
avatar
NurJaN
Новичок

Сообщения : 11
Регистрация : 2012-12-31
Благодарности : 0

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

http://testexorcist.forum2x2.ru/

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

Re: Таблица: вид меню пунктов

Сообщение автор Dana Domirani в Ср 9 Янв - 19:45

Вставьте все (html + js + css)



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


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


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


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

Женщина

Сообщения : 22454
Возраст : 32
Регистрация : 2008-04-18
Благодарности : 9053

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

http://poltergeist-legacy.com/

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

Re: Таблица: вид меню пунктов

Сообщение автор NurJaN в Ср 9 Янв - 22:11

Не, получится так, как будет в той ссылке, которую вы мне кинули, а мне нужно, чтобы получилось на моей таблце, сверху меню)))
avatar
NurJaN
Новичок

Сообщения : 11
Регистрация : 2012-12-31
Благодарности : 0

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

http://testexorcist.forum2x2.ru/

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

Re: Таблица: вид меню пунктов

Сообщение автор Dana Domirani в Ср 9 Янв - 23:17

Извиняюсь, а какая там разница, кроме оформления и контента?
У первой кнопки сбоку, у второй — сверху.
Переложить контент и перенатянуть оформление — и все.



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


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


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


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

Женщина

Сообщения : 22454
Возраст : 32
Регистрация : 2008-04-18
Благодарности : 9053

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

http://poltergeist-legacy.com/

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

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


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