Изменение вертикального меню - PrestaShop CMS :: Русская поддержка интернет-магазина PrestaShop

Изменение вертикального меню

LeonidKat
Новичок
Сообщений: 5
Регистрация: 16-05-2013

# 1

16-05-2013 15:51

Здравствуйте друзья! Есть стандартный модуль вертикального меню blockcategories, как сделать что бы оно не раздвигалось по нажатию +-, а выпадало при наведении в право, желательно в три уровня? Или может есть какой то модуль который можно изменить под себя?

Щелкните, и это сообщение будет добавлено в ваш ответ как цитата

psjob
Новичок
Сообщений: 9
Регистрация: 17-05-2013

# 2

17-05-2013 04:38

с помошью css

LeonidKat
Новичок
Сообщений: 5
Регистрация: 16-05-2013

# 3

17-05-2013 14:38

Это понятно что с помощью css, но как бороться с файлом blockcategories.tpl , точнее с его уже заданными параметрами выведения. Вот к примеру я поменял id анордер листа на "navmenu-v" и добавил css для ID="navmenu-v" в файл global.css, по сути это выпадающее вертикальное трех уровневое меню, но на главной странице при наведении на главную категорию, подкатегории не выпадают, но они появляются при переходе на страницу категории.

LeonidKat
Новичок
Сообщений: 5
Регистрация: 16-05-2013

# 4

17-05-2013 14:44

Может кто нибудь подскажет что нужно в этом коде изменить, что бы сделать выпадающее категории при фокусе мышки?

Код:

<div id="categories_block_left" class="block">
    <p class="title_block">{l s='Categories' mod='blockcategories'}</p>
    <div class="block_content">
        <ul id="navmenu-v" class="tree {if $isDhtml}dhtml{/if}">
        {foreach from=$blockCategTree.children item=child name=blockCategTree}
            {if $smarty.foreach.blockCategTree.last}
                {include file="$branche_tpl_path" node=$child last='true'}
            {else}
                {include file="$branche_tpl_path" node=$child}
            {/if}
        {/foreach}
        </ul>

Алекс

Администратор
Сообщений: 4516
Откуда: Красноярск
Регистрация: 29-05-2009

# 5

17-05-2013 19:11

themes/ваша-тема/js/tools/treeManagement.js

Код:

$('ul.tree.dhtml span.grower').click(function(){
toggleBranch($(this));
});

заменить на:

Код:

$('ul.tree li').hover(
        function(){
            //$('ul.tree li').not($('ul', this)).stop();
            $('ul', this).slideDown();
            $(this).find('span').addClass('OPEN').removeClass('CLOSE');
        },
        function(){
            $('ul', this).slideUp();
            $(this).find('span').addClass('CLOSE').removeClass('OPEN');
        }
    );

Оказываю услуги по администрированию интернет-магазина на CMS PrestaShop, написание модулей для PrestaShop. Большой опыт работы с CMS PrestaShop.

LeonidKat
Новичок
Сообщений: 5
Регистрация: 16-05-2013

# 6

17-05-2013 20:03

Цитата:( Алекс @ 17-05-2013 21:11 Смотреть сообщение )

themes/ваша-тема/js/tools/treeManagement.js

Код:

$('ul.tree.dhtml span.grower').click(function(){
toggleBranch($(this));
});

заменить на:

Код:

Большое спасибо вам Алекс за компетентную помощь, менюшка получилась, только работает с глюками в гугл хроме 2й уровень вместе с третьим выпадает, в мазиле при наведении несколько раз на родительскую категорию можно наблюдать как она сама открывается закрывается несколько секунд, в интернет эксплоуре вообще не выпадают подпункты.. В общем у кого есть желание сделать себе такую менюшку делаем так - заходим в blockcategories.tpl вашей темы, дописываем ul списку id="navmenu-v" вот так- <ul id="navmenu-v" class="tree {if $isDhtml}dhtml{/if}"> потом идем в global.css вашей темы на 2000 строчку, удаляем правила для прошлого меню, но можно в принципе и не удалять и вставляем следующий код -

Код:

ul#navmenu-v,
ul#navmenu-v li,
ul#navmenu-v ul {
margin: 0;
border: 0 none;
padding: 0;
width: 160px;
list-style: none;
}

ul#navmenu-v:after {
clear: both;
display: block;
font: 1px/0px serif;
content: ".";
height: 0;
visibility: hidden;
}

ul#navmenu-v li {
float: left;
display: block !important;
display: inline;
position: relative;
}

ul#navmenu-v a {
border: 1px solid #FFF;
border-right-color: #00A2E6;
border-bottom-color: #00A2E6;
padding: 0 6px;
display: block;
background: #00A2E6;
color: #ffffff;
font: bold 12px/22px Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
height: auto !important;
height: 1%;
}

ul#navmenu-v a:hover,
ul#navmenu-v li:hover a,
ul#navmenu-v li.iehover a {
background: #0db7fe;
color: #fcdd6e;
}

ul#navmenu-v li:hover li a,
ul#navmenu-v li.iehover li a {
background: #00A2E6;
color: #ffffff;
}

ul#navmenu-v li:hover li a:hover,
ul#navmenu-v li:hover li:hover a,
ul#navmenu-v li.iehover li a:hover,
ul#navmenu-v li.iehover li.iehover a {
background: #0db7fe;
color: #fcdd6e;
}

ul#navmenu-v li:hover li:hover li a,
ul#navmenu-v li.iehover li.iehover li a {
background: #00A2E6;
color: #ffffff;
}

ul#navmenu-v li:hover li:hover li a:hover,
ul#navmenu-v li:hover li:hover li:hover a,
ul#navmenu-v li.iehover li.iehover li a:hover,
ul#navmenu-v li.iehover li.iehover li.iehover a {
background: #0db7fe;
color: #fcdd6e;
}

ul#navmenu-v li:hover li:hover li:hover li a,
ul#navmenu-v li.iehover li.iehover li.iehover li a {
background: #648B43;
color: #BCD6A7;
}

ul#navmenu-v li:hover li:hover li:hover li a:hover,
ul#navmenu-v li.iehover li.iehover li.iehover li a:hover {
background: #648B43;
color: #FFF;
}

ul#navmenu-v ul,
ul#navmenu-v ul ul,
ul#navmenu-v ul ul ul {
display: none;
position: absolute;
top: 0;
left: 160px;
z-index:1;
}

ul#navmenu-v li:hover ul ul,
ul#navmenu-v li:hover ul ul ul,
ul#navmenu-v li.iehover ul ul,
ul#navmenu-v li.iehover ul ul ul {
display: none;
}

ul#navmenu-v li:hover ul,
ul#navmenu-v ul li:hover ul,
ul#navmenu-v ul ul li:hover ul,
ul#navmenu-v li.iehover ul,
ul#navmenu-v ul li.iehover ul,
ul#navmenu-v ul ul li.iehover ul {
display: block;
}

Сообщение отредактировано Алекс 27-05-2015 13:30 ...

LeonidKat
Новичок
Сообщений: 5
Регистрация: 16-05-2013

# 7

17-05-2013 20:27

Завершающий штрих заменить скрипт в blockcategories.tpl , на вот этот

Код:

Хвала методу тыка и доброжелательным людям)