| Автор |
Сообщение |
|
|
|
| Администратор |
 |
Стаж: 9 лет 5 месяцев 28 дней
Сообщения: 1235
Откуда: здешние мы
Стиль: subsilver2
Репутация: 11
перейти на сайт пользователя
Найти темы пользователя
|
BBCode menuконструкция реализована по заказу одного из пользователей....  даёт возможность реализовать в сообщении что-то типа меню в виде выпадающего вертикального списка при наведении на поле меню. это тоже конструктор - можете легко перестроить внешний вид под себя. данный bbcode состоит из двух частей: основы (тела) меню и блоков (выпадающих) подменю, что позволяет встраивать вовнутрь меню большое количество блоков-ссылок... сам скрипт я нашёл в сети - моя только переработка под bbcode и css... пример :
Если вас сие заинтересовало - можете поставить. Прописка bbcode в Административном разделе: Создание bbcode 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Замена 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
|
 |
|
|
|
| Администратор |
|
Стаж: 9 лет 5 месяцев 28 дней
Сообщения: 1235
Откуда: здешние мы
Стиль: subsilver2
Репутация: 11
перейти на сайт пользователя
Найти темы пользователя
|
случайно наткнулся в сети на такое же меню, но без использование скрипта. что есть сильно good. выглядеть (по идее) должно так же, но на чистом css всё же стабильнее. хотя этот вариант не будет (наверное) работать на старых браузерах. здесь какая-то информация, информация, информация... время появится - протестирую на обоих чистых стилях... протестировать всё некогда, но я напишу данные изменений при создании bbcode, сможете проверить сами. здесь, чем удобно, весь css код прописан прямо в админке: Прописка bbcode в Административном разделе: Создание bbcode 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Подсказка Код: Выделить всё модули меню: [podmenu=название]ссылка[/podmenu]код довольно простой, можете сами довольно легко перестроить его под свои нужды... допишу на всякий случай - применение bbcode. меню из трёх выпадающих модулей: Код: Выделить всё [menu=название,ссылка][podmenu=название1]ссылка1[/podmenu][podmenu=название2]ссылка2[/podmenu][podmenu=название3]ссылка3[/podmenu][/menu]
Тема поднималась пользователем Belk 01 июл 2017, 18:28.
|
|
|
трёхголовый белк семейства рептилоидов:
"три головы - хорошо, на как же трудно придти к согласию..."
|
|
|
|
|
