Перейти к содержимому


Сделать Горизонтальное Меню-Каталог


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 4

#1 agentteam

agentteam

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 148 сообщений

Отправлено 16 Май 2016 - 17:16

Добрый день.

Подскажите как сделать верхнее дополнительное горизонтальное меню-каталог в шаблоне Осень. Нравится как реализовано
это меню в шаблоне город. Хочется такое же. Чтобы основные категории можно было раскрыть и выпадал бы список из подкатегорий.

#2 Юля123

Юля123

    Активный участник

  • Модератоpы
  • 2 567 сообщений

Отправлено 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 agentteam

agentteam

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 148 сообщений

Отправлено 22 Май 2016 - 12:58

Юля, спасибо, сработало!

#4 agentteam

agentteam

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 148 сообщений

Отправлено 22 Май 2016 - 15:06

Только проблема с тем, что выпадающее меню не перекрывает другие элементы на странице, например здесь фото товара выше слоем http://prntscr.com/b70m20. Подскажите, как исправить?

#5 Firefly

Firefly

    Активный участник

  • Модераторы
  • 3 750 сообщений

Отправлено 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 анонимных