Legosp Forum
Shop-Script "Legosp" => Дизайн и шаблоны => Тема начата: pavelsmorchkov от Января 13, 2012, 07:00:58 pm
-
народ помогите прикрутить http://dobrovoi.ru/menyu-akkordeon-na-osnove-jquery-i-css к дереву категорий
-
код html
[spoiler]<ul class="menu collapsible">
<li>
<a href="#">Рубрики</a>
<ul class="acitem">
<li>
<a href="#">Рубрика 1</a>
</li>
<li><a href="#">Рубрика 2</a></li>
<li><a href="#">Рубрика 3</a></li>
<li><a href="#">Рубрика 4</a></li>
<li><a href="#">Рубрика 5</a></li>
<li><a href="#">Рубрика 6</a></li>
</ul>
</li>
<li>
<a href="#">Архивы</a>
<ul class="acitem">
<li><a href="#">Январь (10)</a></li>
<li><a href="#">Февраль (15)</a></li>
<li><a href="#">Март (8)</a></li>
<li><a href="#">Апрель (12)</a></li>
<li><a href="#">Май (9)</a></li>
<li><a href="#">Июнь (4)</a></li>
</ul>
</li>
</ul>[/spoiler]
<head> и </head> размещаете три заветные строчки:
[spoiler]<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="menu.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css" />[/spoiler]
-
CSS
[spoiler]ul.menu, ul.menu ul {
list-style-type:none;
margin: 0;
padding: 0;
width: 15em;
}
ul.menu a {
display: block;
text-decoration: none;
text-align: left;
}
ul.menu li {
margin-top: 1px;
}
ul.menu li a, ul.menu ul.menu li a {
padding: 0.5em;
/* закругленные углы пунктов меню */
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
color: #d7d7d7;
border: solid 1px #333;
background: #333;
/* функция градиента для Webkit - браузеров */
background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));
/* функция градиента для Firefox + */
background: -moz-linear-gradient(top, #666, #000);
/* функция градиента для Opera 11 + */
background-image: -o-linear-gradient(top,rgb(102,102,102),rgb(0,0,0));
/* примочка для тупого IE */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000');
}
ul.menu li a:hover, ul.menu ul.menu li a:hover {
/* фон и градиент пунктов меню при наведении */
background: #000;
background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));
background: -moz-linear-gradient(top, #444, #000);
background-image: -o-linear-gradient(top,rgb(68,68,68),rgb(0,0,0));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000');
}
ul.menu li ul li a, ul.menu ul.menu li ul li a {
background: #ccc;
color: #000;
padding-left: 20px;
}
ul.menu li ul li a:hover, ul.menu ul.menu li ul li a:hover {
background: #aaa;
border-left: 5px #000 solid;
padding-left: 15px;
}
ul.menu ul.menu li a:hover {
border-left: 0;
padding-left: 0.5em;
}
ul.menu ul.menu {
border-left: 5px #f00 solid;
}
ul.menu a.active, ul.menu ul.menu li a.active, ul.menu a.active:hover, ul.menu ul.menu li a.active:hover {
/* фон и градиент активных пунктов меню */
text-decoration: none;
color: #faddde;
border: solid 1px #980c10;
background: #d81b21;
background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
background: -moz-linear-gradient(top, #ed1c24, #aa1317);
background-image: -o-linear-gradient(top, #ed1c24, #aa1317);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}
div.panel {
border: 1px #000 solid;
padding: 5px;
margin-top: 1px;
}
ul.menu div.panel a, ul.menu div.panel li a:hover {
display :inline;
color: #666;
background: none;
margin: 0;
padding: 0;
border: none;
font-weight: bold;
}
ul.menu div.panel a:hover {
color: #000;
text-decoration: underline;
}[/spoiler]
-
lego sp5.0.2
шаблон areainfo
-
Добрый день, уважаемые.
У меня практически тот же вопрос.
Я пытаюсь прикручитить меню аккордеон, на стандартный шаблон.
Все получилось, все ездиет туда-сюда, проблем нет.
Но только две проблемы:
Как запретить нажимать на ссылку главной категории? Т.е меню простейшее - три главных категории, две подкатегории у каждой, но если нажымать на главную категорию, то она одновременно разворачивается, но параллельно идет редирект на нажатую ссылку. Во как это поправить?
И второй вопрос - как сделать так, чтобы меню не сворачивалось обратно на нужной категории? Вот на простом развернутом меню, добавляется класс selected, вот как из этого связку с аккордионом сделать?
Кстати, может быть уже есть готовые меню-аккордион для LEGO? Мне не важны стили и дизайн, мне бы принцип понять.
Большое спасибо!
-
где посмотреть можно ваше меню?
-
В сети нет еще, код вот:
categories_tree.tpl.html
<ul id="accordion" class="glossymenu">
{assign var="old" value=0}
{assign var="ja" value=0}
{section name=i loop=$categories_tree}
{if $categories_tree[i].level==$old && !$smarty.section.i.first}</li> {elseif $categories_tree[i].level>$old} <ul> {/if}
{if $categories_tree[i].level<$old && $old>0}</li>{/if}
{if $categories_tree[i].level<$old} </ul></li> {/if}
<li><div><a href="./{$categories_tree[i].hurl}" {if $categoryID == $categories_tree[i].categoryID} class="selected" {/if}>{$categories_tree[i].name}</a></div>
{assign var="old" value= $categories_tree[i].level}
{/section}
</li></ul>
<SCRIPT>
$("#accordion > li > div").click(function(){
if(false == $(this).next().is(':visible')) {
$('#accordion ul').slideUp(300);
}
$(this).next().slideToggle(300);
});
$("#accordion > li > div > a").attr('href', 'javascript:void(null)')
</SCRIPT>
С первым вопросом я разобрался, нашел как по нужному селектору, и на что заменить. Теперь главные категории имеют ссылку javascript:void(null), и при нажатии браузер никуда не перемещается.
Вот теперь остался второй вопрос, моему уму он не под силу.
Я подозреваю, что самый простой момент сделать развернутой нужную категорию на нужной странице, это зацепиться за class="selected", который присваивается выбранной категории.
Нужно составить что-то типа условия:
если есть в дереве ссылка с таким классом, то развернуть категорию.
Я пробовал, но я нуб, я так не умею.
Уверен среди вас есть опытные веб-программисты, для которых это не проблема.
С уважением!
-
slamm, спасибо, но не работает.
Код categories_tree.tpl.html я привел выше.
Вот то, что отображается в браузере
<div id="category" class="middle">
<ul id="accordion" class="glossymenu">
<li><div><a href="./catalog/avtomobili/" >Автомобили</a></div>
<ul> <li><div><a href="./catalog/mercedes/" >Mercedes</a></div>
</li> <li><div><a href="./catalog/toyota/" >Toyota</a></div>
</li> <li><div><a href="./catalog/lexus/" >Lexus</a></div>
</li> <li><div><a href="./catalog/lotus/" >Lotus</a></div>
</li> <li><div><a href="./catalog/lamborghini/" >Lamborghini</a></div>
</li> </ul></li> <li><div><a href="./catalog/sotovaya-svyaz/" >Сотовая связь</a></div>
<ul> <li><div><a href="./catalog/samsung/" >Samsung</a></div>
<ul> <li><div><a href="./catalog/aksessuary/" >Аксессуары</a></div>
</li> </ul></li> <li><div><a href="./catalog/ericsson/" >Ericsson</a></div>
</li> <li><div><a href="./catalog/nokia/" >Nokia</a></div>
<ul> <li><div><a href="./catalog/aksessuary/" >Аксессуары</a></div>
</li> </ul></li> <li><div><a href="./catalog/siemens/" >Siemens</a></div>
</li> </ul></li> <li><div><a href="./catalog/sport/" >Спорт</a></div>
<ul> <li><div><a href="./catalog/roliki/" >Ролики</a></div>
</li> <li><div><a href="./catalog/snoubordy/" >Сноуборды</a></div>
</li> <li><div><a href="./catalog/velosipedy/" >Велосипеды</a></div>
</li> </ul></li> <li><div><a href="./catalog/audio-video/" >Аудио / Видео</a></div>
<ul> <li><div><a href="./catalog/dvd/" >DVD</a></div>
</li> <li><div><a href="./catalog/mp3pleery/" class="selected" >mp3-плееры</a></div>
</li> <li><div><a href="./catalog/domashnie-kinoteatry/" >Домашние кинотеатры</a></div>
</li> </ul></li> <li><div><a href="./catalog/napitki/" >Напитки</a></div>
<ul> <li><div><a href="./catalog/alkogolnye/" >Алкогольные</a></div>
</li> <li><div><a href="./catalog/bezalkogolnye/" >Безалкогольные</a></div>
</li> </ul></li> <li><div><a href="./catalog/knigi/" >Книги</a></div>
<ul> <li><div><a href="./catalog/garri-potter/" >Гарри Поттер</a></div>
</li> <li><div><a href="./catalog/dizain/" >Дизайн</a></div>
</li> <li><div><a href="./catalog/programmirovanie/" >Программирование</a></div>
</li> </ul></li> <li><div><a href="./catalog/odezhda/" >Одежда</a></div>
<ul> <li><div><a href="./catalog/zimnyaya/" >Зимняя</a></div>
</li> <li><div><a href="./catalog/letnyaya/" >Летняя</a></div>
</li> <li><div><a href="./catalog/domashnyaya/" >Домашняя</a></div>
</li> <li><div><a href="./catalog/klassicheskaya/" >Классическая</a></div>
</li> </ul></li> <li><div><a href="./catalog/kompyutery/" >Компьютеры</a></div>
<ul> <li><div><a href="./catalog/noutbuki/" >Ноутбуки</a></div>
</li> <li><div><a href="./catalog/kpk/" >КПК</a></div>
</li> <li><div><a href="./catalog/personalnye/" >Персональные</a></div>
</li> <li><div><a href="./catalog/multimedia/" >Мультимедиа</a></div>
</li></ul>
Вот этот пример я использовал для аккордиона:
http://viralpatel.net/blogs/demo/jquery-accordion-menu-example/
Только стили вынес в stylesheet.css, и удалил строчку в самом вызове функции, чтобы изначально все было закрыто.
$('#accordion ul:eq(0)').show();
-
если не ошибаюсь, category_tree.tpl.html не совсем корректно отображает иерархию.
последующие категории главные, вложены в предидущюю и т.д.
Sergey C не у верен что будет всё нормально, для 3-его уровня вложения категорий, например:
кат1->
кат1.1->
кат1.1.1 - уже не видно
кат1.2->
кат1.3->
кат2->
-
nictboom, дальнейшие вложения мне не понадобятся.
Здесь category_tree.tpl.html вообще очень странно написаны.
Вот, например, здесь советуют все поменять, ничего не работает:
http://legosp.blogspot.com/2011/05/blog-post_27.html
Я уже все поперепробовал, ближе всего вариант с показом нужной категории по class="selected"
-
js меню в шаблоне используется?
-
Не уверен о чем вы спрашиваете.
Шаблон самый обычный, находится в /css_default-full/
В нем кроме меню ничего не трогал, все коды меню привел выше.
-
а как убрать стрелочки с подкатегорий при выборе? оставить только выделение цветом
-
спасибо)))
-
а как сделать стрелочки на главные категории?
-
спасиб)
-
А можно сделать что бы отображались:
Категория- >
подкатегория1- >
подкатегория2
Просто сейчас отображается только так:
Категория- >
подкатегория1
Заранее спасибо за помошь :(
-
А где меняется шрифт в меню каталога? Хочется покрупнее, плюс "покрупнее" потянет за собой ширину всего блока.
-
что прописать нужно для ИЕ??? чтобы углы скругленые были а не квадратные
-
это печально...
-
Изображениями пробуй.
-
единственный вариант) картинка) везде работает без проблем))
-
не помогло почему то(((
-
а чтоб в IE работало добовляем в стиль PIE.htc
есть такое и работает, но порой, если много border-radius в ксс, ие "жуткое" поведение приобретает, тормоза...
я частично отказался.
-
не помогло почему то(((
проще в корень кинуть(что бы в путях не блудить) и в ксс:
behavior: url('PIE.htc');
-
Я как пример привел для клсасса .search а вам нудо для вашего класса прописывать
я для своего класса прописывал)
-
сейчас выложу
-
vrnparfum.ru готово!)
-
спасибо щас попробую
-
А можно сделать что бы отображались:
Просто сейчас отображается только так:
Заранее спасибо за помошь :(
pehser
{if $categories_tree.level<$categories_tree[i.index_next].level} >>>{/if}
Спасибо но только так получилось :(
http://uralopt96.org.ua
-
Единственное решение которое у меня сработало это http://code.google.com/p/rocon/
не работает(( проверял даже у них на сайте с ИЕ квадратное все
-
pehser
вы >>> закрыли тег пишите >>>
смотрю вы еше и js туда накрутили вообшем теперь фиг поймеш что там и как
Убрал js и css вставил category_tree.tpl.html как переделал slamm
[spoiler]{literal}
<script type="text/javascript">
$(document).ready(function() {
$("#accordion > li > div").click(function() {
if(false == $(this).next().is(':visible')) {
$('#accordion ul').slideUp(300);
}
$(this).next().slideToggle(300);
});
$("#accordion > li > div > a").attr('href', 'javascript:void(null)');
$("#accordion > li").click(function() {
var id_menu = $(this).attr('id');
$.cookie('idmenu', id_menu, {expires: 1, path: '/'});
});
if ($.cookie('idmenu')) {
$('#'+$.cookie('idmenu')+' > ul').show();
}
});
</script>
{/literal}
<STYLE>
#accordion {
list-style: none;
padding: 0 0 0 0;
width: 150px;
}
#accordion div {
display: block;
background-color: #FF9927;
font-weight: bold;
margin: 1px;
cursor: pointer;
padding: 5px 5px 5px 7px;
list-style: circle;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#accordion ul {
list-style: none;
padding: 0 0 0 0;
}
#accordion ul{
display: none;
}
#accordion ul li {
font-weight: normal;
cursor: auto;
background-color: #fff;
padding: 0 0 0 7px;
}
#accordion a {
text-decoration: none;
}
#accordion a:hover {
text-decoration: underline;
}
#accordion a.selected {
color: black;
}
</STYLE>
{if !$categoryID}
<script type="text/javascript">
$.cookie('idmenu', null);
$('#accordion ul:eq(0)').show();
</script>
{/if}
<ul id="accordion" class="glossymenu">
{assign var="old" value=0}
{assign var="ja" value=0}
{section name=i loop=$categories_tree}
{if $categories_tree.level==$old && !$smarty.section.i.first}</li> {elseif $categories_tree.level>$old} <ul> {/if}
{if $categories_tree.level<$old && $old>0}</li>{/if}
{if $categories_tree.level<$old} </ul> {/if}
<li{if $categories_tree.level==0} id="i{$categories_tree.categoryID}"{/if}><div>{if $categoryID == $categories_tree.categoryID} >>>{/if}<a href="./{$categories_tree.hurl}" {if $categoryID == $categories_tree.categoryID} class="selected" {/if}>{$categories_tree.name}</a></div>
{assign var="old" value= $categories_tree.level}
{/section}
</li></ul>[/spoiler] добавил
{if $categories_tree.level<$categories_tree[i.index_next].level} >>>{/if}
и закрыл теги, но всёравно не открывает категорию в подкатегории :(
-
А где меняется шрифт в меню каталога? Хочется покрупнее, плюс "покрупнее" потянет за собой ширину всего блока.
Да тоже не получается, помогите плиз версия лего 5.0.2, т.е увеличить шрифт меню каталога. хелп пожалуйста.....
-
Подскажите пожалуйста!
Заказали древовидное меню у sanyok прислал всё (но сейчас не в сети),меню работает, но единственная проблема третий уровень не выделяется цветом и не настраивается через css.
Что нужно дописать что бы третий уровень тоже выделялся цветом?
Очень нужно, заранее благодарен если кто подскажет.
Сайт uralopt96.ru
Lego 5.0.2
-
Переписал, но что то видимо не правильно :(
Тс sanyok, так и не ответил в аське.
Кто сможет дописать стиль за символическую плату пишите в личку. :(
-
Shop-Script "Lego Edition SP 4.6"
Установлен на локальный сервер на Денвере
Необходимо в дереве категорий вместе с категориями и субкатегориями выводить и наименование товаров
Например:
Кат1
--Суб кат 1
----Товар 1
----Товар 2
Кат2
--Суб кат 2
----Товар 3
----Товар 4
Я так понимаю, что для этого нужно вносить изменения в коде (файл category_functions.php)
-
Подскажите пожалуйста, в данный момент, когда нажимаешь на категорию, то выпадает подкатегория и цвет текста и кнопок там такой же как и у категории, а как сделать чтобы у подкатегорий менялся цвет текста и также беграунд, а когда нажимаешь на подкатегорию то текст выделяется белым а беграунд красным цветом?
-
_________
Отредактировано!
Вот, накидал, я всё запихнул в один файл category_tree.tpl.html что бы много не расписывать, а вы если хотите красивости, пихайте стили в css скрипты в js и оформляйте под себя как вам хочется.
[spoiler]
{literal}
<script type="text/javascript">
$(document).ready(function() {
$("#accordion > li > div").click(function() {
if(false == $(this).next().is(':visible')) {
$('#accordion ul').slideUp(300);
}
$(this).next().slideToggle(300);
});
$("#accordion > li > div > a").attr('href', 'javascript:void(null)');
$("#accordion > li").click(function() {
var id_menu = $(this).attr('id');
$.cookie('idmenu', id_menu, {expires: 1, path: '/'});
});
if ($.cookie('idmenu')) {
$('#'+$.cookie('idmenu')+' > ul').show();
}
});
</script>
{/literal}
<STYLE>
#accordion {
list-style: none;
padding: 0 0 0 0;
width: 150px;
}
#accordion div {
display: block;
background-color: #FF9927;
font-weight: bold;
margin: 1px;
cursor: pointer;
padding: 5px 5px 5px 7px;
list-style: circle;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#accordion ul {
list-style: none;
padding: 0 0 0 0;
}
#accordion ul{
display: none;
}
#accordion ul li {
font-weight: normal;
cursor: auto;
background-color: #fff;
padding: 0 0 0 7px;
}
#accordion a {
text-decoration: none;
}
#accordion a:hover {
text-decoration: underline;
}
#accordion a.selected {
color: black;
}
</STYLE>
{if !$categoryID}
<script type="text/javascript">
$.cookie('idmenu', null);
$('#accordion ul:eq(0)').show();
</script>
{/if}
<ul id="accordion" class="glossymenu">
{assign var="old" value=0}
{assign var="ja" value=0}
{section name=i loop=$categories_tree}
{if $categories_tree[i].level==$old && !$smarty.section.i.first}</li> {elseif $categories_tree[i].level>$old} <ul> {/if}
{if $categories_tree[i].level<$old && $old>0}</li>{/if}
{if $categories_tree[i].level<$old} </ul> {/if}
<li{if $categories_tree[i].level==0} id="i{$categories_tree[i].categoryID}"{/if}><div>{if $categoryID == $categories_tree[i].categoryID} >>>{/if}<a href="./{$categories_tree[i].hurl}" {if $categoryID == $categories_tree[i].categoryID} class="selected" {/if}>{$categories_tree[i].name}</a></div>
{assign var="old" value= $categories_tree[i].level}
{/section}
</li></ul>[/spoiler]
Захотите отблагодарить, я не против, смотрите подпись! ;)
P.S. Забыл дописать, но думаю вы догадались что нужно в админке поставить Развёрнутое меню.
По данному примеру все хорошо работает, но если у категории нет подкатегорий, то ссылка не кликабельна.
если такая структура, то работает:
Сотовая связь
nokia
samsung
а при таком случае, не работает:
Букеты цветов
не открывается каталог букетов.
Подскажите как поправить.
-
Ой уже и не помню даже, давно это было.
Пересмотрите тему, по моему это уже кто то спрашивал, но только на оборот, просили сделать категории не ссылками, подсмотрите решение..
Или если нужен алгоритм работы, то вот:
подсчитать количество вложенных элементов подкатегории, если такие есть, то ссылки не делаем
$("#accordion > li > div > a").attr('href', 'javascript:void(null)');а если нету то оставляем ссылку.
Я честно говоря с javascript еще не совсем знаком, чисто интуитивно удаляю добавляю)
Пробовал убрать эту строчку $("#accordion > li > div > a").attr('href', 'javascript:void(null)');В таком случае теперь могу нажать на категорию где нет вложений. Но, тогда начинается беспредел когда открываешь категорию где есть вложения, а именно: каждый раз когда нажимаешь на ссылки категорий страница моргает (перегружается) и не сворачивается подкатегории при нажатии на категорию. Поможите плиз. а то пока я пройду курс javascript, уже другое меню захочу)
-
Убираете или комментируете эту строчку $("#accordion > li > div > a").attr('href', 'javascript:void(null)');Потом сразу после $(document).ready(function() { добавляете следующий код:
$("#accordion > li").click(function() {
var id = $(this).attr("id");
if ($("#" + id).find("ul").size() > 0) {
$("#" + id + " > div > a").attr('href', 'javascript:void(null)');
}
});
Все в лучшем виде! Спасибо