Cybernetic (26 Май 2016 - 01:34) писал:
Возможно ли при на разрешении 360px вертикальный каталог который сейчас у нас есть, заменять на стандартный вертикальный каталог темы "осень"?
Подробнее на рис .
Задача: Выводить в место категорий иконок на сайте стандартный вертикальный каталог осени чуть доработанный: (рис 2)
логика вертикального меню:
1. на главной развернуто
2. При выборе каталога товаров вертикальное меню схлопывается верх (можно нажать и вызвать снова)
3. На карточке товара такая же логика как и в каталоге товаров.
Принцип действия как в шаблоне лазурь где меню вызывается тапом и расправляется
<div class="inner"> <div id="column-left"> <!-- Каталог товаров --> {%IFNOT catalog_full_empty%}замените на
<div class="inner"> <div id="column-left" class="catalog"> <!-- Каталог товаров --> {%IFNOT catalog_full_empty%} <div class="box catalog"> <div class="box-heading catalog">Каталог</div> <div class="box-content"> <div class="box-category1"> {%FOR catalog_full%} {% IF catalog_full.FIRST %}<ul class="accordion1">{% ENDIF %} <li {% IF catalog_full.HIDE %}style="display:none;"{% ENDIF %} class="{% IF catalog_full.ISSET_SUB %}parent{% ENDIF %}{% IF catalog_full.CURRENT %} active{% ELSEIF catalog_full.CURRENT_PARENT %} active{% ENDIF %}"> <a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}>{catalog_full.NAME}</a> {% IF catalog_full.ISSET_SUB=0 %}</li>{% ENDIF %} {% IF catalog_full.LAST %}{%FOR out%}</ul>{%IFNOT catalog_full.out.LAST%}</li>{%ENDIF%}{%ENDFOR%}{% ENDIF %} {%ENDFOR%} </div> </div> </div> {%ENDIF%} <!-- /Каталог товаров --> </div> <div id="column-left"> <!-- Каталог товаров --> {%IFNOT catalog_full_empty%}
далее в начало файла main.js вставьте
// Меню-аккордеон. Каталог jQuery(document).ready(function () { jQuery("ul.accordion1 li.parent").each(function(){ jQuery(this).append('<em class="open-close"> </em>'); }); jQuery('ul.accordion1').accordion(); jQuery("ul.accordion1 li.active").each(function(){ jQuery(this).children().next("ul").css('display', 'block'); }); });// Меню-аккардеон. Каталог
далее найдите в файле main.css
.box-category > ul > li ul > li > a:hover {font-size 14px; color: #FFFFFF;background-color:#5979B4;padding: 10px 28px 10px 20px}
после вставьте
.box-category1 {margin-top: -5px;} .box-category1 ul {list-style: none;margin: 0 -10px;padding: 0;font-size:12px;} .box-category1 > ul > li {padding: 0;} .box-category1 > ul > li + li {border-top: 1px solid #EEEEEE;} .box-category1 > ul > li > a {text-decoration: none;color: #333;padding: 10px 28px 10px 10px;display:block;transition: all 0.5s ease 0s;-webkit-transition: all 0.5s ease 0s;-ms-transition: all 0.5s ease 0s;-moz-transition: all 0.5s ease 0s;-o-transition: all 0.5s ease 0s;} .box-category1 > ul > li > a:hover {background-color:#f1f1f1;padding: 10px 28px 10px 20px;} .box-category1 > ul > li ul {display: block;padding-left: 20px;margin: 0;} .box-category1 > ul > li a.active {font-weight: bold;} .box-category1 > ul > li a.active + ul {display: block;padding:0 0 10px 10px;} .box-category1 > ul > li ul > li {padding: 0;} .box-category1 > ul > li ul > li > a {text-decoration: none;display: block;font-size:12px;padding-bottom:3px;} .box-category1 > ul > li ul > li > a.active {font-weight: bold;} .box-category1 .accordion1 em.open-close{background: #ff0551 url('{ASSETS_IMAGES_PATH}back_toggle.png?design=spring') -2px -3px no-repeat;width: 22px;height: 22px; position:absolute; right: 4px; top: 8px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;} .box-category1 .accordion1 em.open-close:hover {background-color: #333;} .box-category1 .accordion1 li.active> em.open-close {background: #333 url('{ASSETS_IMAGES_PATH}back_toggle.png?design=spring') -2px -32px no-repeat; } .box-category1 .accordion1 li div { padding: 20px; background: #aef; display: block; clear: both; float: left; width: 360px;} .box-category1 .accordion1 li.last a{border-bottom:0px;} .box-category1 .accordion1 em.open-close{background: #ff0551 url('{ASSETS_IMAGES_PATH}back_toggle.png?design=spring') -2px -3px no-repeat;width: 22px;height: 22px; position:absolute; right: 4px; top: 8px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;} .box-category1 .accordion1 em.open-close:hover {background-color: #333;} .box-category1 .accordion1 a { text-decoration: none; font-size:11px; padding: 8px 10px 8px 20px; display: block; cursor: pointer; } .box-category1 .accordion1 ul a{font-size:11px; padding: 8px 28px 8px 25px;} .box-category1 .accordion1 ul ul li a {font-size:10px; padding: 8px 10px 8px 40px;} .box-category1 .accordion1 ul ul ul li a {font-size:9px; padding: 8px 10px 8px 50px;} .box-category1 .accordion1 ul ul ul ul li a {font-size:8px; padding:8px 10px 8px 40px;} .box-category1 .accordion1 li ul li { background: #fff; } .accordion1 { list-style-type: none;position: relative; } .accordion1 ul { padding: 0 !important; margin: 0; display: block; width: 100%;position: relative;overflow: hidden !important;} .accordion1 li { background: #fff; cursor: pointer; list-style-type: none; padding: 0; margin: 0;display: block; position:relative;}
далее найдите
@media only screen and (max-width: 360px) {замените на
.catalog {display:none;} @media only screen and (max-width: 360px) { .catalog {display:block !important;} .catalog .box-category {display:block}