Добрый день!
Аккаунт № SL-259633
Нужно внести изменения в шапку сайта. А именно - изменить выпадающее меню со списком товарных категорий. Сейчас оно открывается при наведении полностью, т.е. отображаются все товарные группы и подкатегории. Нужно сделать, чтобы отображалась только та категория, на которую пользователь навел курсор. На скринах показано, как всё должно выглядеть в итоге.
Надеюсь на Вашу помощь в решении вопроса =)))
0
Сообщений в теме: 6
#1
Отправлено 17 Июнь 2016 - 09:00
#2
Отправлено 17 Июнь 2016 - 16:00
Ash74 (17 Июнь 2016 - 09:00) писал:
Добрый день!
Аккаунт № SL-259633
Нужно внести изменения в шапку сайта. А именно - изменить выпадающее меню со списком товарных категорий. Сейчас оно открывается при наведении полностью, т.е. отображаются все товарные группы и подкатегории. Нужно сделать, чтобы отображалась только та категория, на которую пользователь навел курсор. На скринах показано, как всё должно выглядеть в итоге.
Надеюсь на Вашу помощь в решении вопроса =)))
Аккаунт № SL-259633
Нужно внести изменения в шапку сайта. А именно - изменить выпадающее меню со списком товарных категорий. Сейчас оно открывается при наведении полностью, т.е. отображаются все товарные группы и подкатегории. Нужно сделать, чтобы отображалась только та категория, на которую пользователь навел курсор. На скринах показано, как всё должно выглядеть в итоге.
Надеюсь на Вашу помощь в решении вопроса =)))
найдите в шаблоне HTML
<div id="custommenu" class="col-xs-12"> <!-- Для отображения каталога товаров в шапке, замените на следующей строке {% IF MENU_CATALOG %} на {% IFNOT catalog_full_empty %} --> {% IFNOT catalog_full_empty %} <ul class="mainnav"> {%IFNOT catalog_full_empty%} {%FOR catalog_full%} {% IF catalog_full.FIRST %}{% IFNOT catalog_full.LEVEL = 0 %}<ul class="sub {% IF catalog_full.LEVEL > 2 %}hide-cat{% ENDIF %} {% IF catalog_full.LEVEL = 1 %}dropdown-menu{% ENDIF %}">{% ENDIF %}{% ENDIF %} <li {% IF catalog_full.HIDE %}style="display:none;"{% ENDIF %} class="level{catalog_full.LEVEL} {% IF catalog_full.ISSET_SUB %}parent{% ENDIF %} {% IF catalog_full.CURRENT %}active{% ENDIF %}"> <a href="{catalog_full.URL}" class="title-lv{catalog_full.LEVEL} {% IF catalog_full.CURRENT %}active{% ENDIF %}" title="{catalog_full.NAME}"><span>{catalog_full.NAME}</span></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%} {%ENDIF%} </ul>замените на
<div id="custommenu" class="col-xs-12"> <!-- Для отображения каталога товаров в шапке, замените на следующей строке {% IF MENU_CATALOG %} на {% IFNOT catalog_full_empty %} --> {% IFNOT catalog_full_empty %} <ul class="mainnav"> {% FOR catalog_full %} {% IF catalog_full.FIRST %}{% IFNOT catalog_full.LEVEL = 0 %}<ul class="sub">{% ENDIF %}{% ENDIF %} <li {% IF catalog_full.HIDE %}style="display:none;"{% ENDIF %} class="{% IF catalog_full.ISSET_SUB %}parent{% ENDIF %} {% IF catalog_full.LEVEL = 0 %}subhead{% ENDIF %} {% IF catalog_full.CURRENT || catalog_full.CURRENT_PARENT %}active{% ENDIF %}"> <a href="{catalog_full.URL}" {% IF catalog_full.CURRENT %}class="active"{% ENDIF %}>{% IF catalog_full.ISSET_SUB %}<span class="open-sub {% IF catalog_full.CURRENT_PARENT || catalog_full.CURRENT %}active{% ENDIF %}"></span>{% 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 %} </ul>
далее найдите в файле main.css
/*** Левая часть ***/ .col-left .block {margin-bottom: 30px;} .col-left .block:last-child {margin-bottom: 0;} .block .content {border: 1px solid #e2dfdf;box-shadow: 0 0 0 1px #ffffff inset;padding: 0 15px 10px;margin: 0;} /** Каталог **/
после вставьте
#custommenu { padding: 0; margin: 0; font-size: 100%; font-family: Georgia; } #custommenu li { list-style: none; display: inline-block; padding: 0; margin: 0; text-align: center; position: relative; padding-top: 12px; } #custommenu li ul { list-style: none; padding: 0; margin: 0; width: 150px; display: none; position: absolute; z-index: 99; } #custommenu li ul li ul { margin-left:185px;top:0; } #custommenu li ul li { margin: 0; width: 185px; text-align: center; background: #fafafa; } #custommenu li ul li a { display: block; color: #fff; display: block; font-size: 18px; color: #000; margin: 8px 0 10px 0; padding: 0 0 5px 0; border-bottom: 1px solid #e2dfdf; font-family: "agency", 'PT Sans Narrow', sans-serif; text-transform: uppercase; text-decoration: none; } #custommenu .mainnav>li:hover >ul, #custommenu li.jshover ul, #custommenu li ul>li:hover >ul { display: block; }
далее найдите
#custommenu .mainnav {position: static;margin: 0;overflow: hidden;}замените на
#custommenu .mainnav {position: static;margin: 0;}
#4
Отправлено 18 Июнь 2016 - 06:26
Произведите пожалуйста изменения и создайте бэк ап, после этого можете сбросить изменения и укажите нам дату данного бэк апа, чтобы мы могли просмотреть результат и дополнить инструкцию.
Если исходить из инструкции выше, то после изменений попробуйте следующие блоки:
замените на:
Если исходить из инструкции выше, то после изменений попробуйте следующие блоки:
#custommenu li ul { list-style: none; padding: 0; margin: 0; width: 150px; display: none; position: absolute; z-index: 99; } #custommenu li ul li { margin: 0; width: 185px; text-align: center; background: #fafafa; }
замените на:
#custommenu li ul { list-style: none; padding: 0; margin: 0; width: 320px; display: none; position: absolute; z-index: 99; } #custommenu li ul li { margin: 0; width: 320px; text-align: center; background: #fafafa; }
#5
Отправлено 23 Июнь 2016 - 21:23
Спасибо!
На данный момент выпадающее меню выглядит почти как было задумано. На скрине - слева.
Осталось добавить рамку по периметру. Пример, как должно получиться - на скрине справа. Сразу прошу уточнить, где можно будет изменять толщину этой рамки и её цвет.
Жду ответа!
На данный момент выпадающее меню выглядит почти как было задумано. На скрине - слева.
Осталось добавить рамку по периметру. Пример, как должно получиться - на скрине справа. Сразу прошу уточнить, где можно будет изменять толщину этой рамки и её цвет.
Жду ответа!
#6
Отправлено 24 Июнь 2016 - 10:25
Ash74 (23 Июнь 2016 - 21:23) писал:
Спасибо!
На данный момент выпадающее меню выглядит почти как было задумано. На скрине - слева.
Осталось добавить рамку по периметру. Пример, как должно получиться - на скрине справа. Сразу прошу уточнить, где можно будет изменять толщину этой рамки и её цвет.
Жду ответа!
На данный момент выпадающее меню выглядит почти как было задумано. На скрине - слева.
Осталось добавить рамку по периметру. Пример, как должно получиться - на скрине справа. Сразу прошу уточнить, где можно будет изменять толщину этой рамки и её цвет.
Жду ответа!
В main.css найдите код
#custommenu .mainnav>li:hover >ul, #custommenu li.jshover ul, #custommenu li ul>li:hover >ul { display: block; }и замените на
#custommenu .mainnav>li:hover >ul, #custommenu li.jshover ul, #custommenu li ul>li:hover >ul { display: block; border: 1px solid #F00; width: 187px; }1px - толщина рамки
#F00 - цвет рамки
#7
Отправлено 24 Июнь 2016 - 21:50
Спасибо!
Темы с аналогичным тегами каталог товаров, шапка, список товаров
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных