Puncherstore V 2.0 Всплывающее Меню, Шапка И Другое
#1
Отправлено 19 Ноябрь 2013 - 10:08
Планирую сделать все верхнее меню ссылки на каталоги с раскрывающемся меню:
Хочу начать с брендов
На данный момент все бренды у меня забиты в характеристиках товара
Как сделать верхнее верхнее меню, чтобы при на наведении курсора на "бренды" всплывал перечень брендов (пример прикрепил), бренды у меня прописаны в характеристиках товара
Спасибо за ваши ответы
#2
Отправлено 20 Ноябрь 2013 - 02:42
Далее необходимо изменить структуру меню и вывод подкатегорий по сл.инструкции:
http://forum.storela...ыпадающее-меню/
#3
Отправлено 21 Ноябрь 2013 - 15:02
#4
Отправлено 22 Ноябрь 2013 - 00:42
#5
Отправлено 22 Ноябрь 2013 - 13:22
Вот смотрите, создал меню бренды
menu.header1
В него добавил два подпункта ссылки на категорию Venum и Bad Boy, так ?
Дальше как?
#6
Отправлено 23 Ноябрь 2013 - 00:22
<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
#8
Отправлено 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
Отправлено 25 Ноябрь 2013 - 16:03
Теперь осталось его выравнять:
1) После первой ссылки идет какой-то перекос вправо
2) Сделать отступ от левой стороны раскрывающегося списка
3) Как перенести бренды на вторую строку, а то слишком длинный список?
#10
Отправлено 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
Отправлено 25 Ноябрь 2013 - 18:06
1) А как сделать вторую строку? Как в скрине в заголовке, чтобы к примеру после вывода 15 брендов,начинался новый список (как в скрине)
2) ааааааааа, беда беда, еще когда заходишь в товары, фотографии товаров поверх выпадающего меню,как поправить?
3)Как сделать чтобы при перемещении курсора по выпадающему меню кнопка верхнего меню всегда оставалась подсвеченная?
#12
Отправлено 26 Ноябрь 2013 - 06:14
#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
Отправлено 26 Ноябрь 2013 - 16:29
#15
Отправлено 29 Ноябрь 2013 - 12:24
В конец файла "main.css".
Добавить код:
.goodsDataMainImage #wrap { z-index: 99 !important; }
#17
Отправлено 02 Декабрь 2013 - 17:10
puncherstore (02 Декабрь 2013 - 16:46) писал:
#mainmenu li ul li a:hover{ background:none;Подсвечивается только сам текст
#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
Отправлено 04 Декабрь 2013 - 14:33
1) Теперь надо чуть чуть подредактировать, как сделать чтобы текст всегда был по центру подсвечиваемой области, а то сейчас по нижнему краю
2) Как сделать, чтобы при переходе в выпадающее меню, подсвеченная вкладка основного меню, полностью перекрывала черное, там буквально пиксель или два остается, картинку прикреил
#19
Отправлено 04 Декабрь 2013 - 14:46
puncherstore (04 Декабрь 2013 - 14:33) писал:
1) Теперь надо чуть чуть подредактировать, как сделать чтобы текст всегда был по центру подсвечиваемой области, а то сейчас по нижнему краю
2) Как сделать, чтобы при переходе в выпадающее меню, подсвеченная вкладка основного меню, полностью перекрывала черное, там буквально пиксель или два остается, картинку прикреил
#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; }
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных