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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

Последние темы
» Проблема с метатегом Description
автор VeraLV Вчера в 15:31

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

» нужен скрипт сумма просмотров тем в разделе
автор лексей2222 Март 5th 2024, 07:37

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

» 301 редирект
автор Dana Domirani Февраль 25th 2024, 18:28

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

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

» Загрузка форума
автор лисенок Февраль 13th 2024, 01:09

» 2x2 форум
автор лексей2222 Февраль 12th 2024, 14:47

» сколько сообщений в теме
автор лексей2222 Февраль 10th 2024, 07:24

Меню с выпадающими меню подразделов в боковом виджете

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

Перейти вниз

Меню с выпадающими меню подразделов в боковом виджете Empty Меню с выпадающими меню подразделов в боковом виджете

Сообщение автор auelhan Октябрь 3rd 2010, 17:35

У меня возникла следующая проблема:сайт у меня довольно громоздкий:очень много форумов и разделов в них.
Один из пользователей мне сделал замечание:о том,что трудно ориентироваться на сайте.
Хотелось бы сделать,как на некоторых сайтах :поместить все разделы главного меню слева, с выпадающими меню подразделов.
Такое возможно или нет?
Мой сайт: http://www.superhimik.com
avatar
auelhan
 

Мужчина

Сообщения : 94
Возраст : 69
Регистрация : 2009-08-13
Благодарности : 4

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

http://www.superhimik.com

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

Меню с выпадающими меню подразделов в боковом виджете Empty Re: Меню с выпадающими меню подразделов в боковом виджете

Сообщение автор Dana Domirani Октябрь 3rd 2010, 17:58

Наподобие такого?
Меню с выпадающими меню подразделов в боковом виджете 86f235e87412

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

Женщина

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

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

http://poltergeist-legacy.com/

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

Меню с выпадающими меню подразделов в боковом виджете Empty Re: Меню с выпадающими меню подразделов в боковом виджете

Сообщение автор auelhan Октябрь 3rd 2010, 18:52

Уважаемая,Dana Domirani.Да именно такое.
Буду благодарен за любую помощь в решение данной проблемы
avatar
auelhan
 

Мужчина

Сообщения : 94
Возраст : 69
Регистрация : 2009-08-13
Благодарности : 4

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

http://www.superhimik.com

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

Меню с выпадающими меню подразделов в боковом виджете Empty Re: Меню с выпадающими меню подразделов в боковом виджете

Сообщение автор Dana Domirani Октябрь 3rd 2010, 20:08

Так.

1. В боковой виджет помещаете код меню:
Код:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>

<div class="ptlnav"><ul id="menu">

<li>
<a href="#">Заголовок Категории 1</a>
<ul>
<li><a href="http://адрес подфорума.htm">Подфорум 1</a></li>
<li><a href="http://адрес подфорума.htm">Подфорум 2</a></li>
<li><a href="http://адрес подфорума.htm">Подфорум 3</a></li>
<li><a href="http://адрес подфорума.htm">Подфорум 4</a></li>
</ul>
</li>

<li>
<a href="#">Заголовок Категории 2</a>
<ul>
<li><a href="http://адрес подфорума.htm">Подфорум 1</a></li>
<li><a href="http://адрес подфорума.htm">Подфорум 2</a></li>
<li><a href="http://адрес подфорума.htm">Подфорум 3</a></li>
<li><a href="http://адрес подфорума.htm">Подфорум 4</a></li>
</ul>
</li>

</ul></div>

<script type='text/javascript'>
//<![CDATA[
function initMenu() {
  jQuery('#menu ul').hide();
  jQuery('#menu ul:first').show();
  jQuery('#menu li a').click(
    function() {
      var checkElement =  jQuery(this).next();
      if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
        return false;
        }
      if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
        jQuery('#menu ul:visible').slideUp('normal');
        checkElement.slideDown('normal');
        return false;
        }
      }
    );
  }
 jQuery(document).ready(function() {initMenu();});
//]]>
</script>
Заполняете меню нужными ссылками и названиями. Чтобы добавить нужное количество разворачивающихся списков, просто добавляете друг за другом блоки кода:
<li>
- этот заголовок будет отображаться в меню
<a href="#">Заголовок Категории 1</a>
<ul>
<li><a href="ссылка">Подфорум 1</a></li>
<li><a href="ссылка">Подфорум 2</a></li>
<li><a href="ссылка">Подфорум 3</a></li>
<li><a href="ссылка">Подфорум 4</a></li>
</ul>
- этот список будет разворачиваться
/сворачиваться по клику
</li>
Количество подфорумов значение не имеет. Самая первая категория (в коде указана как "Заголовок Категории 1") всегда будет развернута, в нее удобнее всего поместить одну ссылку, на правила форума, например.
После этого сохраняете виджет.

2. В персональную CSS добавляете стиль для меню:
Код:
/* общее обрамление меню */
.ptlnav {
border: #C8C5CF solid 1px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
border-radius: 8px;
background-color:#DCDCDC;
padding: 5px;
}

/* стиль заголовка категории */
ul#menu li a {
color: #fff;   
padding: 0.5em;
border: #C8C5CF solid 1px;
background-color: #708090;
}

/* подсветка заголовка категории при наведении */
ul#menu li a:hover {
background-color: #4F3C5F;
color: #fff;
}

/* стиль подфорумов */
ul#menu li ul li a {
  background: #F4F4F4;
  color: #574A5C;
  padding-left: 15px;
}

/* подсветка подфорумов при наведении */
ul#menu li ul li a:hover {
  background: #BDB8BD;
  border-left: 5px #4F3C5F solid;
  padding-left: 10px;
}

ul#menu a {
display: block;
text-decoration: none;   
}

ul#menu li {
margin-top: 1px;
}
Цвета меняете по желанию. Сохраняете.


Меню с выпадающими меню подразделов в боковом виджете Userba12

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


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


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


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

Женщина

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

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

http://poltergeist-legacy.com/

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

Меню с выпадающими меню подразделов в боковом виджете Empty Re: Меню с выпадающими меню подразделов в боковом виджете

Сообщение автор auelhan Октябрь 5th 2010, 14:33

Уважаемая,Dana Domirani.Премного благодарен за то,что вы уделили время и поделились своими глубокими знаниями в решение этой проблемы.
Мне только непонятно,что нужно вставлять в CSS код:"общее обрамление меню","стиль заголовка категории " и т.д.
avatar
auelhan
 

Мужчина

Сообщения : 94
Возраст : 69
Регистрация : 2009-08-13
Благодарности : 4

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

http://www.superhimik.com

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

Меню с выпадающими меню подразделов в боковом виджете Empty Re: Меню с выпадающими меню подразделов в боковом виджете

Сообщение автор Dana Domirani Октябрь 5th 2010, 14:39

Можете оставить как есть, но, скорее всего, Вы захотите изменить там цвета, чтобы меню походило по стилю к форуму.
background-color: #fff - это цвет фона блока
color: #fff - цвет текста в нем
border: #fff solid 1px - это бордюр (его цвет, стиль и толщина)
Вместо #fff подставьте тот цвет, который нужен.

я сделал все как надо, но размеры самого виджета (правого) не могу изменить.
В ПА > Модули > Виджеты форума
Меню с выпадающими меню подразделов в боковом виджете 2795805
вбейте бОльшую ширину и сохраните.


Меню с выпадающими меню подразделов в боковом виджете Userba12

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


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


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


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

Женщина

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

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

http://poltergeist-legacy.com/

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

Меню с выпадающими меню подразделов в боковом виджете Empty Re: Меню с выпадающими меню подразделов в боковом виджете

Сообщение автор Salus Июль 8th 2011, 09:17

Дана, скажите, а как сделать это горизонтальным меню? Я вставила сей скрипт в объявления и в горизонтальном расположении менюшек он смотрелся бы лучше, чем с вертикальными столбиками. И ещё: в объявлении второй скрипт\часть (первый скрипт из этого поста) жутко растягивает страницу
смотреть, что за скрипт:
Меню с выпадающими меню подразделов в боковом виджете 1610490m

Да, ещё. Решила я сделать в подфоруме подфорум. Написала, если думать логически, мало зная хтмл, то вроде бы там всё правильно. Но когда я нажимаю на подфорум, чтобы открыть его подфорум, категория сворачивается, но открывается с открытым подфорумом подфорума.

Код:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script><div class="ptlnav"><ul id="menu">

<li>
<a href="#">Полезные ссылки</a>
<ul>
<li>
<a href="#">Для гостей</a>
<ul>
<li><a href="http://адрес подфорума.htm">Подфорум подфорума 1</a></li>
<li><a href="http://адрес подфорума.htm">Подфорум подфорума 2</a></li>
<li><a href="http://адрес подфорума.htm">Подфорум подфорума 3</a></li>
<li><a href="http://адрес подфорума.htm">Подфорум подфорума 4</a></li>
<li><a href="http://адрес подфорума.htm">Подфорум подфорума 5</a></li>
</ul>
</li>
<li><a href="http://адрес подфорума.htm">Подфорум 2</a></li>
<li><a href="http://адрес подфорума.htm">Подфорум 3</a></li>
<li><a href="http://адрес подфорума.htm">Подфорум 4</a></li>
</ul>
</li>
<li>
<a href="#">Для игры</a>
<ul>
<li><a href="http://адрес подфорума.htm">Подфорум 1</a></li>
<li><a href="http://адрес подфорума.htm">Подфорум 2</a></li>
<li><a href="http://адрес подфорума.htm">Подфорум 3</a></li>
<li><a href="http://адрес подфорума.htm">Подфорум 4</a></li>
</ul>
</li>
<li>
<a href="#">Акции</a>
<ul>
<li><a href="http://адрес подфорума.htm">Подфорум 1</a></li>
<li><a href="http://адрес подфорума.htm">Подфорум 2</a></li>
<li><a href="http://адрес подфорума.htm">Подфорум 3</a></li>
<li><a href="http://адрес подфорума.htm">Подфорум 4</a></li>
</ul>
</li>
<li>
<a href="#">Администрация</a>
<ul>
<li><a href="http://element.forum2x2.ru/u1">Selena Medi</a></li>
<li><a href="http://адрес подфорума.htm">Подфорум 2</a></li>
<li><a href="http://адрес подфорума.htm">Подфорум 3</a></li>
<li><a href="http://адрес подфорума.htm">Подфорум 4</a></li>
</ul>
</li>
</ul></div>
<script type='text/javascript'>
//<![CDATA[
function initMenu() {
  jQuery('#menu ul').hide();
  jQuery('#menu ul:first').show();
  jQuery('#menu li a').click(
    function() {
      var checkElement =  jQuery(this).next();
      if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
        return false;
        }
      if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
        jQuery('#menu ul:visible').slideUp('normal');
        checkElement.slideDown('normal');
        return false;
        }
      }
    );
  }
 jQuery(document).ready(function() {initMenu();});
//]]>
</script>
avatar
Salus
Новичок

Сообщения : 17
Регистрация : 2011-04-11
Благодарности : 0

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

http://element.forums-rpg.com

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

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


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