Сообщений в теме: 46

[puncherstore]

Добрый день!

Планирую сделать все верхнее меню ссылки на каталоги с раскрывающемся меню:

Хочу начать с брендов

На данный момент все бренды у меня забиты в характеристиках товара

Как сделать верхнее верхнее меню, чтобы при на наведении курсора на "бренды" всплывал перечень брендов (пример прикрепил), бренды у меня прописаны в характеристиках товара

Спасибо за ваши ответы

Прикрепленные изображения

• 

[Vaccina]

Тут только как вариант создавать категории бренды и соответствующие подкатегории, саму категорию можно скрыть и вручную вывести в меню.
Далее необходимо изменить структуру меню и вывод подкатегорий по сл.инструкции:
http://forum.storela...ыпадающее-меню/

[puncherstore]

Спасибо а применительно к моему шаблону как это сделать? там инструкции для мокко, сияния и прочее

[Сake]

Судя по вашему шаблону - ваш шаблон изначально основан на теме оформления "Сияние". Поэтому указанная выше инструкция применима и для вашего шаблона. В любом случае любые изменения необходимо производить внимательно и предварительно делать резервную копию шаблона.

[puncherstore]

Блин, второй день втыкаю в текст, не понятно. Когда добавляешь:#mainmenu, у меня все оформление сбивается, получается полный бардак

Вот смотрите, создал меню бренды

menu.header1

В него добавил два подпункта ссылки на категорию Venum и Bad Boy, так ?

Дальше как?

[Сake]

Дальше вам необходимо изменить изначальный код вашего меню добавив дополнительный список ul li. Изначально ваше меню выглядит так

<ul class="header-links" >
{% FOR menu %}
			{% FOR header %}
			  {% FOR links %}
				<li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li>
			  {% ENDFOR %}
			{% ENDFOR %}
		  {% ENDFOR %}
</ul>

реализация данного меню уже не подходит по той причине что вложенность меню {% FOR menu %} не возможна. В связи с этим верхний уровень навигации необходимо реализовывать вручную.

<ul class="header-links">
  <li><a href="/catalog/Новинки" title="Новинки">Новинки</a></li>
  <li><a href="/catalog/Хиты-продаж" title="Хиты продаж">Хиты продаж</a></li>
  <li><a href="/page/brands" title="Бренды">Бренды</a></li>
</ul>

а уже второй уровень реализуется через {% FOR menu %}

<ul class="header-links">
  <li><a href="/catalog/Новинки" title="Новинки">Новинки</a></li>
  <li><a href="/catalog/Хиты-продаж" title="Хиты продаж">Хиты продаж</a></li>
  <li><a href="/page/brands" title="Бренды">Бренды</a>
	<ul>
   {% FOR menu %}
		{% FOR header1 %}
		   {% FOR links %}
			 <li><a href="{menu.header1.links.URL}" {% IF menu.header1.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header1.links.TITLE %}title="{menu.header1.links.TITLE}"{% ENDIF %}>{menu.header1.links.NAME}</a></li>
		   {% ENDFOR %}
		{% ENDFOR %}
	  {% ENDFOR %}
</ul>
  </li>
</ul>

обратите внимание на то что в данном случае используется именно header1 для пункта "Бренды". С другими пунктами необходимо поступать аналогично. После реализации шаблона необходимо будет добавить соответствующие стили в файл main.css

[puncherstore]

Я близок к успеху, ура ура.

Вот смотрите, теперь выпадает маленькая полоска длиной несколько мм, как поправить? скрин прикрепил, изменения пока убрал, чтобы людей не пугать

Прикрепленные изображения

• 

[Koderhan]

puncherstore (25 Ноябрь 2013 - 15:13) писал:

Я близок к успеху, ура ура.

Вот смотрите, теперь выпадает маленькая полоска длиной несколько мм, как поправить? скрин прикрепил, изменения пока убрал, чтобы людей не пугать

Панель администратора, "Сайт"->"Редактор шаблонов".
В файле "main.css".
Найти код:

.bartop { width:960px; margin:0 auto; height:50px; overflow:hidden; }

Заменить:

.bartop { width:960px; margin:0 auto; height:50px;}

В файле "HTML".
Найти код:

style="margin-top:-40px;"

Заменить:

style="margin-top: -28px;"

[puncherstore]

еееее, оно появилось) спасибо=)

Теперь осталось его выравнять:

1) После первой ссылки идет какой-то перекос вправо

2) Сделать отступ от левой стороны раскрывающегося списка

3) Как перенести бренды на вторую строку, а то слишком длинный список?

Прикрепленные изображения

• 

[empty9228]

Здравствуйте!
найдите в css файле код

#mainmenu li ul li{
width:150px;
padding:10px;
border-bottom:1px solid #000;
background:#222;
}

и замените его на

#mainmenu li ul li{
width:150px;
padding:10px;
padding-left: 17px;
border-bottom:1px solid #000;
background:#222;
}

найдите там же

.header-links li {
float:left;
margin-left: 5px;
}

замените на

.header-links li {
float:left;
margin-left: 0px;
}

[puncherstore]

Добрый вечер! спасибо)

1) А как сделать вторую строку? Как в скрине в заголовке, чтобы к примеру после вывода 15 брендов,начинался новый список (как в скрине)



2) ааааааааа, беда беда, еще когда заходишь в товары, фотографии товаров поверх выпадающего меню,как поправить?

3)Как сделать чтобы при перемещении курсора по выпадающему меню кнопка верхнего меню всегда оставалась подсвеченная?

[Vaccina]

1. найдите:

#mainmenu li ul {


	display: none;
	left: -10px;
	position: absolute;
	top: 50px;
	width: 200px;
	z-index: 100;
}

замените на:

#mainmenu li ul {
	display: none;
	left: -10px;
	position: absolute;
	top: 50px;
	width: 530px;
	z-index: 100;
}

2. найдите:

.goods-image-other {
	background: url("http://mediatory.ru/Pics/di_processing/di_bw_color_final.jpg") no-repeat scroll right top / 37px auto rgba(0, 0, 0, 0);
	max-height: 185px;
	max-width: 185px;
	position: relative;
	z-index: 999;
}
.newhit {
	position: absolute;
	right: 0;
	width: 30px;
	z-index: 9999;
}

замените на:

.goods-image-other {
	background: url("http://mediatory.ru/Pics/di_processing/di_bw_color_final.jpg") no-repeat scroll right top / 37px auto rgba(0, 0, 0, 0);
	max-height: 185px;
	max-width: 185px;
	position: relative;
	z-index: 1;
}
.newhit {
	position: absolute;
	right: 0;
	width: 30px;
	z-index: 2;
}

3.найдите:

#mainmenu li a:hover {
	background: url("http://design.puncherstore.ru/menumain.gif") repeat-x scroll center bottom rgba(0, 0, 0, 0);
}

замените на:

#mainmenu li:hover > a {
	background: url("http://design.puncherstore.ru/menumain.gif") repeat-x scroll center bottom rgba(0, 0, 0, 0);
}
#mainmenu li ul li:hover a {
	background: none;
}

[puncherstore]

спасибо большое!!!)) вроде бы теперь принцип стал ясен, буду все меню такое делать)

[puncherstore]

аааа, новый баг, в карточке товара тоже картинка поверх выпадающего меню, как поправить?

Прикрепленные изображения

• 

[Koderhan]

Панель администратора, "Сайт"->"Редактор Шаблонов".
В конец файла "main.css".
Добавить код:

.goodsDataMainImage #wrap {
	z-index: 99 !important;
}

[puncherstore]

Добрый день! Сделал все меню, прогресс) А как сделать чтобы вкладка при наведении выделялась, как в примере (прикрепленная картинка) При изменении:

#mainmenu li ul li a:hover{ background:none;

Подсвечивается только сам текст

Прикрепленные изображения

• 

[ne_yana]

puncherstore (02 Декабрь 2013 - 16:46) писал:

Добрый день! Сделал все меню, прогресс) А как сделать чтобы вкладка при наведении выделялась, как в примере (прикрепленная картинка) При изменении:

#mainmenu li ul li a:hover{ background:none;

Подсвечивается только сам текст

Здравствуйте, в файле main.css замените

#mainmenu li ul li a {
font: 13px/16px Arial,Helvetica,Tahoma,sans-serif;
padding: 0px;
background: none;
margin-right: -5px;
}

на

#mainmenu li ul li a {
font: 13px/16px Arial,Helvetica,Tahoma,sans-serif;
padding: 0px;
margin-right: -5px;
}

#mainmenu li ul li a:hover {
text-decoration: none;
background: none;
color: #ff0000;
}

на

#mainmenu li ul li a:hover {
text-decoration: none;
}

Добавьте

#mainmenu li ul li:hover {
background: url("{ASSETS_IMAGES_PATH}menumain.gif") repeat-x scroll center bottom rgba(0, 0, 0, 0);
}

[puncherstore]

Спасибо большое! Сделано)

1) Теперь надо чуть чуть подредактировать, как сделать чтобы текст всегда был по центру подсвечиваемой области, а то сейчас по нижнему краю

2) Как сделать, чтобы при переходе в выпадающее меню, подсвеченная вкладка основного меню, полностью перекрывала черное, там буквально пиксель или два остается, картинку прикреил

Прикрепленные изображения

• 
• 

[ne_yana]

puncherstore (04 Декабрь 2013 - 14:33) писал:

Спасибо большое! Сделано)

1) Теперь надо чуть чуть подредактировать, как сделать чтобы текст всегда был по центру подсвечиваемой области, а то сейчас по нижнему краю

2) Как сделать, чтобы при переходе в выпадающее меню, подсвеченная вкладка основного меню, полностью перекрывала черное, там буквально пиксель или два остается, картинку прикреил

Здравствуйте, в файле main.css замените

#mainmenu li ul li a {
font: 13px/16px Arial,Helvetica,Tahoma,sans-serif;
padding: 0px;
background: none;
margin-right: -5px;
}

на

#mainmenu li ul li a {
font: 13px/16px Arial,Helvetica,Tahoma,sans-serif;
padding: 0px;
background: none;
margin-right: -5px;
padding-bottom: 8px;
}

[puncherstore]

Спасибо) В таком случае сверху получается маленькая черная полоска, как от нее избавится?

Прикрепленные изображения

•