Автор Тема: дизайн древа категорий  (Прочитано 43308 раз)

Оффлайн pavelsmorchkov

  • Старожил
  • ****
  • Сообщений: 285
    • Просмотр профиля
    • Бренд-шоп.net
дизайн древа категорий
« : Января 13, 2012, 07:00:58 pm »
народ помогите прикрутить http://dobrovoi.ru/menyu-akkordeon-na-osnove-jquery-i-css к дереву категорий

Оффлайн pavelsmorchkov

  • Старожил
  • ****
  • Сообщений: 285
    • Просмотр профиля
    • Бренд-шоп.net
Re: дизайн древа категорий
« Ответ #1 : Января 13, 2012, 07:08:27 pm »
код 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]

Оффлайн pavelsmorchkov

  • Старожил
  • ****
  • Сообщений: 285
    • Просмотр профиля
    • Бренд-шоп.net
Re: дизайн древа категорий
« Ответ #2 : Января 13, 2012, 07:08:58 pm »
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]

Оффлайн pavelsmorchkov

  • Старожил
  • ****
  • Сообщений: 285
    • Просмотр профиля
    • Бренд-шоп.net
Re: дизайн древа категорий
« Ответ #3 : Января 13, 2012, 07:21:34 pm »
lego sp5.0.2
шаблон areainfo

Sergey C.

  • Гость
Re: дизайн древа категорий
« Ответ #4 : Января 14, 2012, 12:53:17 pm »
Добрый день, уважаемые.
У меня практически тот же вопрос.
Я  пытаюсь прикручитить меню аккордеон, на стандартный шаблон.
Все получилось, все ездиет туда-сюда, проблем нет.
Но только две проблемы:
Как запретить нажимать на ссылку главной категории? Т.е меню простейшее -  три главных категории, две подкатегории у каждой, но если нажымать на главную категорию, то она одновременно разворачивается, но параллельно идет редирект на нажатую ссылку. Во как это поправить?
И второй вопрос - как сделать так, чтобы меню не сворачивалось обратно на нужной категории? Вот на простом развернутом меню, добавляется класс selected, вот как из этого связку с аккордионом сделать?

Кстати, может быть уже есть готовые меню-аккордион для LEGO? Мне не важны стили и дизайн, мне бы принцип понять.

Большое спасибо!

Оффлайн pavelsmorchkov

  • Старожил
  • ****
  • Сообщений: 285
    • Просмотр профиля
    • Бренд-шоп.net
Re: дизайн древа категорий
« Ответ #5 : Января 14, 2012, 03:44:53 pm »
где посмотреть можно ваше меню?

Sergey C.

  • Гость
Re: дизайн древа категорий
« Ответ #6 : Января 14, 2012, 07:49:32 pm »
В сети нет еще, код вот:
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", который присваивается выбранной категории.
Нужно составить что-то типа условия:
если есть в дереве ссылка с таким классом, то развернуть категорию.
Я пробовал, но я нуб, я так не умею.
Уверен среди вас есть опытные веб-программисты, для которых это не проблема.
С уважением!

Sergey C.

  • Гость
Re: дизайн древа категорий
« Ответ #7 : Января 14, 2012, 08:33:53 pm »
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();

nictboom

  • Гость
Re: дизайн древа категорий
« Ответ #8 : Января 14, 2012, 08:38:23 pm »
если не ошибаюсь, category_tree.tpl.html не совсем корректно отображает иерархию.
последующие категории главные, вложены в предидущюю и т.д.

Sergey C не у верен что будет всё нормально, для 3-его уровня вложения категорий, например:
кат1->
         кат1.1->
                 кат1.1.1 - уже не видно
         кат1.2->
         кат1.3->
кат2->

« Последнее редактирование: Января 14, 2012, 08:51:13 pm от nictboom »

Sergey C.

  • Гость
Re: дизайн древа категорий
« Ответ #9 : Января 14, 2012, 09:02:06 pm »
nictboom, дальнейшие вложения мне не понадобятся.

Здесь category_tree.tpl.html вообще очень странно написаны.
Вот, например, здесь советуют все поменять, ничего не работает:
http://legosp.blogspot.com/2011/05/blog-post_27.html
Я уже все поперепробовал, ближе всего вариант с показом нужной категории по class="selected"

nictboom

  • Гость
Re: дизайн древа категорий
« Ответ #10 : Января 14, 2012, 09:10:00 pm »
js меню в шаблоне используется?

Sergey C.

  • Гость
Re: дизайн древа категорий
« Ответ #11 : Января 14, 2012, 09:14:14 pm »
Не уверен о чем вы спрашиваете.
Шаблон самый обычный, находится в /css_default-full/
В нем кроме меню ничего не трогал, все коды меню привел выше.

Оффлайн pavelsmorchkov

  • Старожил
  • ****
  • Сообщений: 285
    • Просмотр профиля
    • Бренд-шоп.net
Re: дизайн древа категорий
« Ответ #12 : Января 16, 2012, 01:44:05 pm »
а как убрать стрелочки с подкатегорий при выборе? оставить только выделение цветом

Оффлайн pavelsmorchkov

  • Старожил
  • ****
  • Сообщений: 285
    • Просмотр профиля
    • Бренд-шоп.net
Re: дизайн древа категорий
« Ответ #13 : Января 16, 2012, 05:51:47 pm »
спасибо)))

Оффлайн pavelsmorchkov

  • Старожил
  • ****
  • Сообщений: 285
    • Просмотр профиля
    • Бренд-шоп.net
Re: дизайн древа категорий
« Ответ #14 : Января 20, 2012, 01:31:12 pm »
а как сделать стрелочки на главные категории?