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


Puncherstore V 2.0 Всплывающее Меню, Шапка И Другое


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

#1 puncherstore

puncherstore

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

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

Отправлено 19 Ноябрь 2013 - 10:08

Добрый день!

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

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

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

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

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

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

  • Бренды.png


#2 Vaccina

Vaccina

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

  • Модераторы
  • 23 788 сообщений

Отправлено 20 Ноябрь 2013 - 02:42

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

#3 puncherstore

puncherstore

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

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

Отправлено 21 Ноябрь 2013 - 15:02

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

#4 Сake

Сake

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

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

Отправлено 22 Ноябрь 2013 - 00:42

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

#5 puncherstore

puncherstore

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

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

Отправлено 22 Ноябрь 2013 - 13:22

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

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




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

Дальше как?

#6 Сake

Сake

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

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

Отправлено 23 Ноябрь 2013 - 00:22

Дальше вам необходимо изменить изначальный код вашего меню добавив дополнительный список 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

#7 puncherstore

puncherstore

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

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

Отправлено 25 Ноябрь 2013 - 15:13

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

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

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

  • раскрывающеесмя меню.png


#8 Koderhan

Koderhan

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

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

Отправлено 25 Ноябрь 2013 - 15:30

Просмотр сообщения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;"


#9 puncherstore

puncherstore

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

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

Отправлено 25 Ноябрь 2013 - 16:03

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

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

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

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

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

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

  • Выпадающее меню.png


#10 empty9228

empty9228

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

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

Отправлено 25 Ноябрь 2013 - 17:15

Здравствуйте!
найдите в 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;
}


#11 puncherstore

puncherstore

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

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

Отправлено 25 Ноябрь 2013 - 18:06

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

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



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

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

#12 Vaccina

Vaccina

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

  • Модераторы
  • 23 788 сообщений

Отправлено 26 Ноябрь 2013 - 06:14

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;
}


#13 puncherstore

puncherstore

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

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

Отправлено 26 Ноябрь 2013 - 16:29

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

#14 puncherstore

puncherstore

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

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

Отправлено 29 Ноябрь 2013 - 09:46

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

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

  • Карточка товара выпадающее меню.png


#15 Koderhan

Koderhan

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

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

Отправлено 29 Ноябрь 2013 - 12:24

Панель администратора, "Сайт"->"Редактор Шаблонов".
В конец файла "main.css".
Добавить код:
.goodsDataMainImage #wrap {
	z-index: 99 !important;
}


#16 puncherstore

puncherstore

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

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

Отправлено 02 Декабрь 2013 - 16:46

Добрый день! Сделал все меню, прогресс) А как сделать чтобы вкладка при наведении выделялась, как в примере (прикрепленная картинка) При изменении:
#mainmenu li ul li a:hover{ background:none;
Подсвечивается только сам текст

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

  • подсветка вкладки.jpg


#17 ne_yana

ne_yana

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

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

Отправлено 02 Декабрь 2013 - 17:10

Просмотр сообщения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);
}


#18 puncherstore

puncherstore

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

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

Отправлено 04 Декабрь 2013 - 14:33

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

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

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

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

  • Текст посередине вкладки.png
  • полное закрашивание.png


#19 ne_yana

ne_yana

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

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

Отправлено 04 Декабрь 2013 - 14:46

Просмотр сообщения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;
}


#20 puncherstore

puncherstore

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

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

Отправлено 05 Декабрь 2013 - 12:03

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

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

  • черная полоса.png





Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных