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

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


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

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

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


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

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

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

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

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

Сообщение автор auelhan в Вс 3 Окт - 17:35

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

auelhan
 

Мужчина

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

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

http://www.superhimik.com

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

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

Сообщение автор Dana Domirani в Вс 3 Окт - 17:58

Наподобие такого?


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

Женщина

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

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

http://poltergeist-legacy.com/

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

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

Сообщение автор auelhan в Вс 3 Окт - 18:52

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

auelhan
 

Мужчина

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

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

http://www.superhimik.com

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

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

Сообщение автор Dana Domirani в Вс 3 Окт - 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;
}
Цвета меняете по желанию. Сохраняете.



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


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


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


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

Женщина

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

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

http://poltergeist-legacy.com/

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

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

Сообщение автор auelhan в Вт 5 Окт - 14:33

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

auelhan
 

Мужчина

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

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

http://www.superhimik.com

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

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

Сообщение автор Dana Domirani в Вт 5 Окт - 14:39

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

я сделал все как надо, но размеры самого виджета (правого) не могу изменить.
В ПА > Модули > Виджеты форума

вбейте бОльшую ширину и сохраните.



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


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


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


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

Женщина

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

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

http://poltergeist-legacy.com/

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

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

Сообщение автор Salus в Пт 8 Июл - 9:17

Дана, скажите, а как сделать это горизонтальным меню? Я вставила сей скрипт в объявления и в горизонтальном расположении менюшек он смотрелся бы лучше, чем с вертикальными столбиками. И ещё: в объявлении второй скрипт\часть (первый скрипт из этого поста) жутко растягивает страницу
смотреть, что за скрипт:
Код:
<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>


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

Код:
<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>

Salus
Новичок

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

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

http://element.forums-rpg.com

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

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


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