Как сделать разворачивающийся список разделов в меню ?

Создал выпадающий список для кнопки "Профиль" все прекрасно работает.
Как подобный список сделать для новых кнопок...

Сделать, как тут https://help.forum2x2.ru/t30127-topic не получилось...

Подскажите для BB3 похожий способ. что-то не могу найти

Dana Domirani пишет:Вариант для BB3

1. В виджет, который есть на главной странице и портале форума добавляете настройки стилей:
(Почему в виджет, а не в CSS? Чтобы потом при смене оформления не потерять настройки меню и не гадать, почему он перестало работать)

Код:

<style type="text/css">
ul.linklist li {
  position: relative;
  float:left;
}

li:hover #prof-content {
  opacity: 1;
  visibility: visible;
  margin-top: -5px;
}

#prof-content {
  margin-top: 5px;
  margin-left: -7px;
  _margin: 0; /*IE6 only*/
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 29px;
  z-index: 999;
  background-color: #fff;
  padding: 5px;
  -moz-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
  -webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
  box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
}

#prof-content a {
  display:block;
  width: 150px;
  text-align: left !important;
  margin-left: 5px;
}
</style>

background-color: #fff — это фон меню, замените код цвета на подходящий.

2. В тот же виджет добавляете скрытый блок с доп.сылками меню:

Код:

<div style="display:none"><div id="prof-content">
<a href="/profile?mode=editprofile&amp;page_profil=informations">Информация</a>
<a href="/profile?mode=editprofile&page_profil=preferences">Личные настройки</a>
<a href="/profile?mode=editprofile&amp;page_profil=signature">Подпись</a>
<a href="/profile?mode=editprofile&amp;page_profil=avatars">Аватара</a>
<a href="/profile?mode=editprofile&amp;page_profil=friendsfoes">Друзья и недруги</a>
<a href="/search?search_id=watchsearch">Темы для слежения</a>
<a href="/search?search_id=favouritesearch">Закладки</a>
<a href="/search.forum?search_id=egosearch">Мои сообщения</a>
</div>
</div>


3. В ПА > Модули > Управление кодами JS добавляется скрипт:
Название: любое
Код:
КОД: ----ВЫДЕЛИТЬ СОДЕРЖИМОЕ
jQuery(document).ready(function(){
jQuery("#prof-content").appendTo("li:has(a[href$='profile?mode=editprofile'])");
});

Расположение: на всех страницах
Сохраните.

Это токо с профилем

Это я все проделал... для кнопки профиль.

Вопрос - как подобное в bb3 для других кнопок сделать..

Например, я создал кнопку: raznoe. и хочу в нее несколько ссылок для своих штмл страничек добавить..

Заменить в скрипте ссылку.

Для профиля — ссылка profile?mode=editprofile
Для кнопки разное — адрес (окончание) той страницы, на которую она ссылается.

а... на какую страницу кнопка raznoe ссылается?

например, конкретно для кнопки raznoe, я в настройках указал путь http://www.pitstop-forum.net/h1-page (ну так мне этот путь нужен не для кнопки, а для одной из выпадающих ссылок..

так это путь ведущий не на основную страничку. так и нет основной странички..

как сделать выезжающую панель с этими ссылками?
http://www.pitstop-forum.net/h2-page
http://www.pitstop-forum.net/h3-page
http://www.pitstop-forum.net/h4-page
http://www.pitstop-forum.net/h5-page


Это для примера..

Mark_Larin пишет:а... на какую страницу кнопка raznoe ссылается?

например, конкретно для кнопки raznoe, я в настройках указал путь http://www.pitstop-forum.net/h1-page (ну так мне этот путь нужен не для кнопки, а для одной из выпадающих ссылок..

так это путь ведущий не на основную страничку. так и нет основной странички..

как сделать выезжающую панель с этими ссылками?
http://www.pitstop-forum.net/h2-page
http://www.pitstop-forum.net/h3-page
http://www.pitstop-forum.net/h4-page
http://www.pitstop-forum.net/h5-page

Где у вас raznoe?

Начну, как всегда.. издалека.. Что такое в вашем понимании разное?

Я нашел способ сделать выдвигающуюся панель для кнопки Профиль.(как это все работает - понятия не имею!)

И захотел сделать примерно также для новых созданных мной кнопок..

например, я создал новую кнопку, назвал ее: raznoe.
Для примера, хотел-бы что-бы при наведении мыши на эту кнопку, также появлялась панель со списком ссылок (на мои странички штмл. список я тут уже выкладывал)

Как еще подробнее объяснить что мне нужно?

Вопрос - где у меня разное - я не понимаю.. также, как и не понял как работает выдвижное меню для Профиля..

Рискну предположить.. сначала нужно создать страничку. на ней разместить сылки. ссылка на эту страничку будет основной.. и т.п.. Об этом речь? или я снова туплю(

нужно создать страничку. на ней разместить сылки. ссылка на эту страничку будет основной.. и т.п.

Так точно.

Но, в принципе, страницу можно и не создавать. Достаточно использовать в качестве ссылки, например /faq#top
При наведении выпадет меню. При случайном нажатии — просто откроется страница faq с самого начала.

к сожалению.. общей картины своих действий как не понимал, так и не понимаю)

создать еще один скрипт, в него внести изменения.. а дальше что?
Еще один виджет создавать? я создавал. у меня панель в профиле сразу глючить начинает.. становится цветом по умолчанию как цвет во втором виджете.. в уже существующий виджет добавить ссылки для кнопок??
у меня одни вопросы.. я не понял, что мне нужно сделать(

Давайте так.
1) Какие кнопки в меню должны разворачиваться?
2) Эти кнопки должны по нажатию куда-то вести или их единственная функция — показывать разворачивающуюся панель при наведении?
2) Какая информация должна быть в разворачивающихся панелях?

Покачто пытаюсь понять последовательность действий.

Mark_Larin пишет:Это я все проделал... для кнопки профиль.

Вопрос - как подобное в bb3 для других кнопок сделать..

Например, я создал кнопку: raznoe. и хочу в нее несколько ссылок для своих штмл страничек добавить..

Mark_Larin пишет:
как сделать выезжающую панель с этими ссылками?
http://www.pitstop-forum.net/h1-page
http://www.pitstop-forum.net/h2-page
http://www.pitstop-forum.net/h3-page
http://www.pitstop-forum.net/h5-page


Это для примера..

(можно оба варианта рассмотреть. когда нажатие на кнопку нужно. или когда кнопка нужна только для появления панели)

исходя из содержимого предлагаемых мной ссылок, в панели должны быть "названия" страничек. например, Игрушка Sonic, шахматы.. и т.п.

Еще раз повторюсь.. Я сделал Выдвигающееся меню для кнопки профиль (как и здесь на форуме) Хочу сделать подобное для других кнопок, которые я сам создам.. Покачто пытаюсь понять принцип работы..

не понял, что мне нужно сделать для кнопки Разное.. Ну, конкретно не понял.. напишите, плиз..

Выдвижное меню на кнопке мне очень понравилось.. Потому появился вопрос - как сделать выдвижное меню на кнопку "Сообщения ЛС"?
Очень полезная примочка.. Например, даже если я редко пользуюсь ЛС, но когда потребуется отправить кому-то сообщение и знать что оно отправлено, приходится сначала зайти в ЛС, потом зайти в Исходящие.. Согласитесь - это очень неудобно.. Можно сразу - навести мышкой, выпадет список, в списке выбрать исходящие.. и всё)
Как это можно сделать для ЛС? (список должен состоять из всех возможных передвижений по ЛС)

Пока что пытаюсь понять принцип работы.

Принцип такой: скрипт ищет в меню навигации ссылку, содержащую конкретный фрагмент адреса и встраивает после этой ссылки панель из виджета. Эта панель по умолчанию скрыта, но при наведении курсора на ссылку она, по правилам CSS, становится видимой и появляется под ссылкой.

не понял, что мне нужно сделать для кнопки Разное.. Ну, конкретно не понял.. напишите, плиз..

1. ПА > Оформление > Верхняя часть страниц & Навигация: Меню навигации

Нажмите "Добавить персональную кнопку меню".

Раздел меню: Разное
Текст: разное
Картинка: какая угодно
Ссылка: /raznoe

Сохраните.

2. Дальше по туториалу добавляете в виджет настройки CSS.

3. Дальше по туториалу в тот же виджет добавляете скрытую панель с доп.сылками:

Код:

<div style="display:none"><div id="prof-content">
<a href="/h1-page">Название ссылки 1</a>
<a href="/h2-page">Название ссылки 2</a>
<a href="/h3-page">Название ссылки 3</a>
<a href="/h4-page">Название ссылки 4</a>
</div>
</div>

Сохраняете. Именно эта панель и будет встраиваться после ссылки "Разное" с адресом /raznoe

5. По туториалу в ПА > Модули > Управление кодами JS
укажите Активировать управление кодами Javascript : Да и нажмите "Сохранить".
После этого добавьте скрипт.
Название: любое
Расположение: на всех страницах
Код:

Код:

jQuery(document).ready(function(){
jQuery("#prof-content").appendTo("li:has(a[href$='/raznoe'])");
});

Сохраните.

Здравствуйте Dana)

Я прежде чем создавать эту тему, сам немного поэксперементировал... с непонятными мне вещами.. (это еще вчера днем дело было.. уже тогда столкнулся с глюками.. но списал их на свое незнание)


Сейчас сделал все, как Вы написали. 1 в 1.. В результате: выдвижная панель перекочевала на кнопку Разное.. причем вместе с содержимым панели Профиль.. При наведении мыши на кнопку Профиль - ничего не происходит..

(Кнопку Разное сделал видимой и для Гостей)

Извините, я забыла, что у Вас уже есть панель "профиль". А у выпадающих панелей не должно быть одинаковых ID. Сейчас объясню, что надо поменять.

1. В виджете у Вас стоят настройки

Код:

<style type="text/css">
ul.linklist li {
  position: relative;
  float:left;
}

li:hover #prof-content {
  opacity: 1;
  visibility: visible;
  margin-top: -5px;
}

#prof-content {
  margin-top: 5px;
  margin-left: -7px;
  _margin: 0; /*IE6 only*/
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 29px;
  z-index: 999;
  background-color: #fff;
  padding: 5px;
  -moz-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
  -webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
  box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
}

#prof-content a {
  display:block;
  width: 150px;
  text-align: left !important;
  margin-left: 5px;
}
</style>

Поскольку у Вас будет несколько панелей, придется снять привязку по id и сделать привязку к классу.
Удалите указанный кусок и добавьте в ПА > Оформление ... > CSS

Код:


ul.linklist li {
  position: relative;
  float:left;
}

li:hover .menupan {
  opacity: 1;
  visibility: visible;
  margin-top: -5px;
}

.menupan {
  margin-top: 5px;
  margin-left: -7px;
  _margin: 0; /*IE6 only*/
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 29px;
  z-index: 999;
  background-color: #fff;
  padding: 5px;
  -moz-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
  -webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
  box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
}

.menupan a {
  display:block;
  width: 150px;
  text-align: left !important;
  margin-left: 5px;
}


Сохраните.

2. Панели "Профиль" оставьте id="prof-content", а панели "Разное" измените на id="prof-content2". Обеим панелям добавьте класс menupan. Для этого допишите в коде:

<div style="display:none"><div id="prof-content2" class="menupan">
<a href="/h1-page">Название ссылки 1</a>
<a href="/h2-page">Название ссылки 2</a>
<a href="/h3-page">Название ссылки 3</a>
<a href="/h4-page">Название ссылки 4</a>
</div>
</div>

<div style="display:none"><div id="prof-content" class="menupan">
<a href="/profile?mode=editprofile&amp;page_profil=informations">Информация</a>
<a href="/profile?mode=editprofile&page_profil=preferences">Личные настройки</a>
<a href="/profile?mode=editprofile&amp;page_profil=signature">Подпись</a>
<a href="/profile?mode=editprofile&amp;page_profil=avatars">Аватара</a>
<a href="/profile?mode=editprofile&amp;page_profil=friendsfoes">Друзья и недруги</a>
<a href="/search?search_id=watchsearch">Темы для слежения</a>
<a href="/search?search_id=favouritesearch">Закладки</a>
<a href="/search.forum?search_id=egosearch">Мои сообщения</a>
</div>
</div>

3. Поправьте второй скрипт — подставьте обновленный id панели:

Код:

jQuery(document).ready(function(){
jQuery("#prof-content2").appendTo("li:has(a[href$='/raznoe'])");
});

Сейчас попробую внести изменения.

А, насчет кнопки "Сообщения ЛС". Там я сам догадаюсь или тоже какие-то хитрости есть?)

По идее, особых хитростей не понадобится.

Сам код панели:

Код:

<div style="display:none"><div id="prof-content3" class="menupan">
<a href="/privmsg?folder=inbox">Входящие</a>
<a href="/privmsg?folder=sentbox">Отправленные</a>
<a href="/privmsg?folder=outbox">Исходящие</a>
<a href="/privmsg?folder=savebox">Сохраненные</a>
</div>
</div>

CSS добавлять не надо.

Скрипт должен быть таким:

Код:

jQuery(document).ready(function(){
jQuery("#prof-content3").appendTo("li:has(a.mainmenu[href$='privmsg'])");
});

Выдвижные панели для кнопок "Профиль" и "Разное" работают отлично!

Dana! Спасибо огромное.. вот такое:

Забыл спросить, как увеличить расстояние между строчками текста в панели (как-то слитно все выглядит..) и что-бы текст отображался не только заглавными буквами..


А вот выдвижная панель для кнопки "Сообщения ЛС" не появляется (
Dana помогите пожалуйста! Без Вас никак

Попробуйте так, замените последний скрипт на этот:

Код:

jQuery(document).ready(function(){
jQuery("#prof-content3").appendTo("li:has(a.mainmenu[href*='privmsg'])");
});

Ура! Работает)

(дело было в *. если я правильно понял)

если еще с заглавными буквами и расстоянием разобраться..

(дело было в *. если я правильно понял)

Так точно. Если стоит $ , то указанный текст разыскивается в окончании ссылки, а если * —то в любом месте.

Чтобы отключить написание заглавными буквами — уберите из CSS строку text-transform: uppercase

.headerbar + .navbar .navlinks a {
color: #999;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 black;
outline: none;
}

Чтобы расширить пространство между ссылками в панелях, допишите в CSS:

.menupan a {
display:block;
width: 150px;
text-align: left !important;
margin-left: 5px;
padding: 5px 0;
}

Испытал некоторые трудности при удалении строчки- text-transform: uppercase; (как-то коряво удалил строку или неправильно вставил..)

Исчезли надписи на кнопках и выдвижных панелях. Появлялись только при наведении мышкой.

Dana, очень хорошо, что Вы целый блок здесь выложили. скопировал и заменил весь кусок. Все заработало как обычно)

Затем, подглядел у себя в CSS содержимое другого блока и изменил text-transform: uppercase на text-transform: none.
С высотой букв все стало прекрасно..
Но при моем размере кнопок, как то надписи не смотрятся..

Хотелось-бы что-бы названия всех кнопок отображались заглавными буквами, а строчки выдвижных панелей - прописными..

Я могу на кнопке Разное написать: РАЗНОЕ. (и при этом в выдвижной панели строчки будут прописные)

А можно-ли сделать заглавными надписи всех основных кнопок: форум, пользователи, сообщения ЛС, вход и т.п.


Если кому интересно, как сейчас это выглядит:



(монитор "чужой", поэтому качество надписей не очень..)

p.s. Положение панелей относительно кнопок отрегулировал конечно.. а то на кнопки наезжали.. сейчас все норм.. С цветом панелей тоже разобрался..

Последний вопрос - может не совсем по этой теме - это есть-ли возможность надписи во всех кнопках сделать заглавными буквами, а надписи в панелях прописными..

На всякий случай ставлю "Решено". Так, всё и решено)))
один только маленький микро-вопросик остался

(а если я когда-нибудь доберусь до создания собственных кнопок, то необходимость в вопросике отпадет конечно..)

пока тема не Закрыта.. Есть еще вопрос:

Всем, кто сможет на него ответить - прошу поучаствовать!

Например, под одной из кнопок, часть ссылок в выдвижной панели, при нажатии на нужную ссылку, должны открываться в новом окне. А как это сделать??

Заранее уверен, что это все просто делается, но увы. Сам еще не понял как..

Мои ранее заданные вопросы Все видели... Решение найдено..
Это как раз, очередной Микро-вопросик. помогите с микро-решением, плиз