Добрый день.
Подскажите как сделать верхнее дополнительное горизонтальное меню-каталог в шаблоне Осень. Нравится как реализовано
это меню в шаблоне город. Хочется такое же. Чтобы основные категории можно было раскрыть и выпадал бы список из подкатегорий.
0
Сделать Горизонтальное Меню-Каталог
Автор agentteam, 16 мая 2016 17:16
Сообщений в теме: 4
#1
Отправлено 16 Май 2016 - 17:16
#2
Отправлено 17 Май 2016 - 12:49
agentteam (16 Май 2016 - 17:16) писал:
Добрый день.
Подскажите как сделать верхнее дополнительное горизонтальное меню-каталог в шаблоне Осень. Нравится как реализовано
это меню в шаблоне город. Хочется такое же. Чтобы основные категории можно было раскрыть и выпадал бы список из подкатегорий.
Подскажите как сделать верхнее дополнительное горизонтальное меню-каталог в шаблоне Осень. Нравится как реализовано
это меню в шаблоне город. Хочется такое же. Чтобы основные категории можно было раскрыть и выпадал бы список из подкатегорий.
Здравствуйте, Вы хотите дополнительное меню-Каталога сделать? Если так, тогда в шаблоне HTML перед кодом:
<div class="fluid-bg" id="content-fluid"> {% IF index_page %} <div class="flexslider" id="autumn-slider" style="display:none;">
добавьте код:
<div class="header-bottom"> <div class="container"> <!-- Каталог --> <div id="custommenu" > <!-- Для отображения каталога товаров в шапке, замените на следующей строке {% 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> {% ELSE %} <!-- Меню в шапке --> <ul class="menunav"> {% FOR menu %} {% FOR header %} {% FOR links %} <li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="active"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul> {% ENDIF %} </div> </div> </div>
в конце style.css добавьте код:
/*** Каталог в шапке ***/ .header-bottom {position: relative;padding: 15px 0;background-color: #393939;} #custommenu {position: static;z-index: 1;margin-left: -15px;} #custommenu .mainnav {position: static;margin: 0;overflow: hidden;} #custommenu .mainnav > li {float: left;} #custommenu .mainnav > li > a {display: block;color: #fff;line-height: 35px;padding: 0 22px 0 0;margin-right: 10px;font-family: "agency", 'PT Sans Narrow', sans-serif;font-size: 15px;font-weight: normal;text-transform: uppercase;} #custommenu .mainnav > li > a:hover {color: #c7081b;} #custommenu .mainnav > li.parent > a {position: relative;padding-right: 32px;} #custommenu .mainnav li .dropdown-menu {display: none;position: absolute;width:100%;left: 0;border-bottom: 5px solid #c7081b;background: #fafafa;z-index: 999;padding: 15px;} #custommenu .mainnav li.parent:hover .dropdown-menu {display: block;} #custommenu .mainnav li.level1 {width: 25%;float: left;padding: 0 15px;} #custommenu .mainnav li a.title-lv1 {display: block;font-size: 15px;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;} #custommenu .mainnav li a.title-lv1:hover {color: #c7081b;} #custommenu .mainnav li a.title-lv2 {display: block;position: relative;text-transform: capitalize;padding: 7px 0 7px 15px;} /* Меню в шапке */ #custommenu .menunav li {display: inline-block;position: relative;font-family: "agency", 'PT Sans Narrow', sans-serif;font-size: 18px;} #custommenu .menunav li a {display: block;color: #fff;font-weight: normal;line-height: 40px;margin-right: 22px;text-transform: uppercase;} #custommenu .menunav li a:hover {color: #c7081b;} .hide-cat {display: none !important;}
#3
Отправлено 22 Май 2016 - 12:58
Юля, спасибо, сработало!
#4
Отправлено 22 Май 2016 - 15:06
Только проблема с тем, что выпадающее меню не перекрывает другие элементы на странице, например здесь фото товара выше слоем http://prntscr.com/b70m20. Подскажите, как исправить?
#5
Отправлено 22 Май 2016 - 15:30
agentteam (22 Май 2016 - 15:06) писал:
Только проблема с тем, что выпадающее меню не перекрывает другие элементы на странице, например здесь фото товара выше слоем http://prntscr.com/b70m20. Подскажите, как исправить?
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Шаблоны -> Товар, найдите код:
<div id="wrap" style="top:0px;z-index:1999;background-color:#FFF;position:relative;margin: 0 auto;text-align: center;">
Замените на:
<div id="wrap" style="top:0px;background-color:#FFF;position:relative;margin: 0 auto;text-align: center;">
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных