info navigation

phpbb-belk.ru

темы, связанные с форумом phpbb 3.0.x



Новая тема  [ Сообщений: 3 ]  Просмотры: 872

Автор Сообщение
Не в сети
(Андрей)  
 BBCode menu
Администратор
Аватара пользователя

Стаж: 8 лет 6 месяцев 28 дней
Сообщения: 1223
Откуда: здешние мы


Стиль: subsilver2


Репутация: 11


Russia

Тиц и PR

перейти на сайт пользователя
Найти темы пользователя


BBCode menu

конструкция реализована по заказу одного из пользователей.... :?

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

пример :

Если вас сие заинтересовало - можете поставить.

Прописка bbcode в Административном разделе:

Создание bbcode menu
Использование BBCode

Код: Выделить всё

[menu={TEXT1},{URL}]{TEXT2}[/menu]


Замена HTML

Код: Выделить всё

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js' type='text/javascript'></script>
<script type="text/javascript">
function posMouse(e){
 var mouX = 0, mouY = 0;
 if (!e) e = window.event;
 if (e.pageX || e.pageY) {
  mouX = e.pageX;
  mouY = e.pageY;
 } else if (e.clientX || e.clientY) {
  mouX = e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
  mouY = e.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
 }
 return {"x":mouX, "y":mouY}
}
$(document).ready(function(){
 $('div.txt').mouseover(function(){
  $(this).next().slideDown('slow');
 })
 .mouseout(function(e){
  var elem = $(this).next(), mou = posMouse(e);
  if ((mou.x < elem.offset().left) || (mou.x > elem.offset().left + elem.width()) || (mou.y < elem.offset().top))
   elem.slideUp('slow');
 });
 $('div.box').mouseleave(function(){
  $(this).slideUp('slow');
 });
});
</script>
<div class="box_static"><div class='txt'><a href="{URL}" class="bbmenu">{TEXT1}</a></div>
<div class='box'>{TEXT2}</div></div>


Подсказка

Код: Выделить всё

главный блок: [menu=название,ссылка]блоки[/menu]



Создание bbcode podmenu
Использование BBCode

Код: Выделить всё

[podmenu={TEXT}]{URL}[/podmenu]


Замена HTML

Код: Выделить всё

<a href="{URL}" class="bbdopmenu">{TEXT}</a>


Подсказка

Код: Выделить всё

блок меню: [podmenu=название]ссылка[/podmenu]


Добавить в стили:

Для стилей на основе subsilver2
Открыть ваш стиль/theme/stylesheet.css
Найти

Код: Выделить всё

/* Private messages
 ------------------ */
.pm_marked_colour {
   background-color: #000000;
}


Вставить перед найденным

Код: Выделить всё

/** BBCode Menu **/

div.box_static {
margin: 5px;
position: relative;
}
div.txt {
width: 150px;
height: 20px;
color: #FFFFFF;
font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
font-weight: normal;
font-size: 12px;
background: #069;
text-align: center;
padding: 2px 0 0 0;
}
div.box {
background-color: #069;
display: none;
width: 150px;
color: #FFFFFF;
text-align: center;
padding: 0;
border-top: 1px solid #FFFFFF;
position: absolute;
}
.bbmenu {
width: 148px;
margin: 0px;
padding: 0 0 2px 0;
text-decoration: none;
font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
font-weight: normal;
font-size: 12px;
display: inline-block;
text-align: center;
text-shadow: 0 1px 0 rgba(0,0,0,0.4);
}
.bbmenu:hover {
background: rgb(96,145,172);
}
.bbdopmenu {
width: 140px;
margin: 1px;
padding: 2px 4px 2px 4px;
text-decoration: none;
font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
font-weight: normal;
font-size: 12px;
display: inline-block;
text-align: center;
text-shadow: 0 1px 0 rgba(0,0,0,0.4);
}
.bbdopmenu:hover {
background: rgb(96,145,172);
}
div.box a {
text-decoration: none;
color: #FFFFFF;
}
div.box a:hover {
text-decoration: underline;
}
div.txt a {
text-decoration: none;
color: #FFFFFF;
padding: 0 0 2px 0;
}

Для стилей на основе prosilver
Открыть ваш стиль/theme/common.css
В самый конец файла вставить код

Код: Выделить всё

/** BBCode Menu **/

div.box_static {
margin: 5px;
position: relative;
}
div.txt {
width: 150px;
height: 20px;
color: #FFFFFF;
font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
font-weight: normal;
font-size: 12px;
background: #069;
text-align: center;
padding: 2px 0 0 0;
}
div.box {
background-color: #069;
display: none;
width: 150px;
color: #FFFFFF;
text-align: center;
padding: 0;
border-top: 1px solid #FFFFFF;
position: absolute;
}
.bbmenu {
width: 148px;
margin: 0px;
padding: 0 0 2px 0;
text-decoration: none;
font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
font-weight: normal;
font-size: 12px;
display: inline-block;
text-align: center;
text-shadow: 0 1px 0 rgba(0,0,0,0.4);
}
.bbmenu:hover {
background: rgb(96,145,172);
}
.bbdopmenu {
width: 140px;
margin: 1px;
padding: 2px 4px 2px 4px;
text-decoration: none;
font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
font-weight: normal;
font-size: 12px;
display: inline-block;
text-align: center;
text-shadow: 0 1px 0 rgba(0,0,0,0.4);
}
.bbdopmenu:hover {
background: rgb(96,145,172);
}
div.box a {
text-decoration: none;
color: #FFFFFF;
}
div.box a:hover {
text-decoration: underline;
}
div.txt a {
text-decoration: none;
color: #FFFFFF;
padding: 0 0 2px 0;
}


Если в стиле prosilver система "глючит" - стоит поставить простое открытие списка со сдвигом текста. абсолютное позиционирование на этом стиле не всегда работает...

Для стилей на основе prosilver (простой вариант)
Открыть ваш стиль/theme/common.css
В самый конец файла вставить код

Код: Выделить всё

/** BBCode Menu **/

div.box_static {
margin: 5px;
}
div.txt {
width: 150px;
height: 20px;
color: #FFFFFF;
font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
font-weight: normal;
font-size: 12px;
background: #069;
text-align: center;
padding: 2px 0 0 0;
}
div.box {
background-color: #069;
display: none;
width: 150px;
color: #FFFFFF;
text-align: center;
padding: 0;
border-top: 1px solid #FFFFFF;
}
.bbmenu {
width: 148px;
margin: 0px;
padding: 0 0 2px 0;
text-decoration: none;
font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
font-weight: normal;
font-size: 12px;
display: inline-block;
text-align: center;
text-shadow: 0 1px 0 rgba(0,0,0,0.4);
}
.bbmenu:hover {
background: rgb(96,145,172);
}
.bbdopmenu {
width: 140px;
margin: 1px;
padding: 2px 4px 2px 4px;
text-decoration: none;
font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
font-weight: normal;
font-size: 12px;
display: inline-block;
text-align: center;
text-shadow: 0 1px 0 rgba(0,0,0,0.4);
}
.bbdopmenu:hover {
background: rgb(96,145,172);
}
div.box a {
text-decoration: none;
color: #FFFFFF;
}
div.box a:hover {
text-decoration: underline;
}
div.txt a {
text-decoration: none;
color: #FFFFFF;
padding: 0 0 2px 0;
}


Завершение установки:
В стилях на основе subsilver2 доработка должна заработать сразу, на основе prosilver - необходимо очистить кэш Темы на вкладке Стили.

Применение:

Код: Выделить всё

[menu=название,ссылка]
[podmenu=название ссылки]ссылка[/podmenu]
[podmenu=название ссылки 2]ссылка 2[/podmenu]
[/menu]



Успехов. Надеюсь кому-нибудь пригодится.


трёхголовый белк семейства рептилоидов:
"три головы - хорошо, на как же трудно придти к согласию..."
bbcode,menu,phpbb3,forum
Не в сети
(Милена)  
2016-01-08 Re: BBCode menu

Стаж: 8 лет 3 месяца 15 дней
Сообщения: 3


Стиль: subsilver2


Репутация: 0






Белк, ты крут! Даже статью запилил ;)


Не в сети
(Андрей)  
2017-07-01 
Администратор
Аватара пользователя

Стаж: 8 лет 6 месяцев 28 дней
Сообщения: 1223
Откуда: здешние мы


Стиль: subsilver2


Репутация: 11


Russia

Тиц и PR

перейти на сайт пользователя
Найти темы пользователя


случайно наткнулся в сети на такое же меню, но без использование скрипта. что есть сильно good.

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




здесь какая-то информация, информация, информация...

время появится - протестирую на обоих чистых стилях...

протестировать всё некогда, но я напишу данные изменений при создании bbcode, сможете проверить сами. здесь, чем удобно, весь css код прописан прямо в админке:

Прописка bbcode в Административном разделе:

Создание bbcode menu
Использование BBCode

Код: Выделить всё

[menu={TEXT1,}{URL}]{TEXT2}[/menu]


Замена HTML

Код: Выделить всё

<style>
ul.txt_menu > li {
float: left;
position: relative;
list-style: none;
}
ul.txt_menu > li > a {
display: block;
color: #fff;
padding: 5px;
text-decoration: none;
background-color: #069;
width:201px;
text-align: center;
font-size: 14px;   
}
ul.txt_menu > li > a:hover {
background:rgb(96,145,172);
}
ul.menus {
position: absolute;
width: 200px;
top: 28px;
left:-19px;
display: none;
background-color: white;
list-style: none;
}
ul.menus > li {
display: block;
}
ul.menus > li > a {
display: block;
text-decoration: none;
width: 200px;
margin-left: -19px;
padding: 5px;
color: #ffffff;
font-size: 14px;
background-color: #069;
border-top: 1px solid #fff;   
}
ul.menus > li > a:hover {
background:rgb(96,145,172);
text-decoration: underline;
}
ul.txt_menu > li:hover > ul.menus {
display: block;
}
</style>
<ul class="txt_menu">
    <li><a href="{URL}">{TEXT1}</a>
        <ul class="menus">
      {TEXT2}
        </ul>
    </li>
</ul>      


Подсказка

Код: Выделить всё

главный блок: [menu=название,ссылка]блоки[/menu]



Создание bbcode podmenu
Использование BBCode

Код: Выделить всё

[podmenu={TEXT}]{URL}[/podmenu]


Замена HTML

Код: Выделить всё

<li><a href="{URL}">{TEXT}</a></li>


Подсказка

Код: Выделить всё

модули меню: [podmenu=название]ссылка[/podmenu]


код довольно простой, можете сами довольно легко перестроить его под свои нужды...

допишу на всякий случай - применение bbcode. меню из трёх выпадающих модулей:

Код: Выделить всё

[menu=название,ссылка][podmenu=название1]ссылка1[/podmenu][podmenu=название2]ссылка2[/podmenu][podmenu=название3]ссылка3[/podmenu][/menu]


Тема поднималась пользователем Belk 01 июл 2017, 18:28.


трёхголовый белк семейства рептилоидов:
"три головы - хорошо, на как же трудно придти к согласию..."
Показать сообщения за:  Поле сортировки  
Ответить на тему  [ Сообщений: 3 ] 

Кто сейчас на сайте:

Всего посетителей: 0, из них зарегистрированных: 0, скрытых: 0 и гостей: 0 (основано на активности пользователей за последние 5 минут)
Больше всего посетителей (122) здесь было 19 дек 2023, 12:10

Сейчас этот раздел просматривают: нет зарегистрированных пользователей и гости: 0

Часовой пояс: UTC + 2 часа



Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете добавлять вложения
Вы не можете защищать свои темы паролем

Найти:
Перейти:  




cron

Текущее время: 19 апр 2024, 23:17

Создано на основе phpBB® Forum Software © phpBB Group
Яндекс.Метрика

Полная версия Мобильный вид