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


Помогите Сделать Такое Меню


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

#1 lampadi

lampadi

    Пользователь

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

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

1. Как сделать такое верхнее меню

2 . Еще вопрос хотелось бы сделать дополнительный каталог товаров (например бренды)  и что бы он был с правой стороны

3. Хотелось бы сделать в каталоге товаров, что бы у товара  был значок лупы и при нажатии на него увеличивалось фото

4. Возможно ли реализовать функцию быстрый просмотр т.е. человек смотря товары в каталоге мог нажать на кнопку и у него погружалась карточка товара без перезагрузки станицы

5. Как сделать в каталоге товаров под товаром надпись есть или нет в наличии что бы посетители не тратили свое время зря на просмотр товаров которых нет

6. Возможно ли добавить в корзину рекомендованные товары ( т.е. при оформлении заказа клиенту предлагают купить еще что то )

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

  • Снимок экрана 2013-11-18 в 17.45.42.png


#2 lampadi

lampadi

    Пользователь

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

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

Админы есть кто

#3 lampadi

lampadi

    Пользователь

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

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

Неужели за 3 дня сложно ответить при чем в других темах ответы есть

#4 Сake

Сake

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

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

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

Большая часть ваших вопросов ранее обсуждалась на форуме. Пожалуйста, используйте поиск по форуму прежде чем задавать вопрос на форуме.

1. На вашем сайте подложка меню белая а не темно серая как на вашем изображении. Вы так же хотите заменить и цвет подложки? Так как без подобной замены стили пунктов меню попросту не будут заметны в связи с тем что они так же используют белый цвет.

2. Данная реализация проблематична по нескольким причинам. Первая причина связана с тем что создать второй каталог можно только путем полного разворачивания первого и скрытия отдельной категории в частности "Бренды". Вторая причина связана с адаптивностью вашей темы оформления. Общая реализация подобного каталога не вписывается в рамки технической поддержки - по данному вопросу вам лучше обратиться в веб-студию или же использовать другую не адаптивную тему оформления. Для подобных тем реализацию можно найти на данном форуме.

3. Как я понимаю вы хотите отключить стандартное увеличение изображения (zoom) при наведении на само изображение в замен данной реализации?

4. Реализовать можно, но проблематично. По данному вопросу вам лучше обратиться в веб-студию.

5. Найдите в шаблоне "Товары" код

<div class="rating">
							<!-- Среднее значение по результатам всех отзывов об этом товаре -->
							{% IF goods.OPINION_RATING_VALUE %}
							  <img src="{FORALL_IMAGES_PATH}stars/{goods.OPINION_RATING_VALUE | number("0","","")}.gif" alt="{goods.OPINION_RATING_VALUE}" />
							{% ENDIF %}
						   
							{% IF goods.OPINION_RATING_CNT_ALL>0 %}
							  <a href="{goods.URL | url_amp}?generally_is_good=-1&page=1">Отзывы ({goods.OPINION_RATING_CNT_ALL})</a>
							{% ELSE %}
							  <a href="{goods.URL | url_amp}?&amp;form%5Bgoods_id%5D=opinion#goodsDataOpinionAdd">Оставить отзыв первым</a>
							{% ENDIF %}
						  </div>

и ниже данного кода вставьте

<!-- Доступность товара -->
<div class="goodsDataMainModificationAvailable">
   {% IF goods.MAX_REST_VALUE=0 %}<div rel="true" class="available-true">Товара нет в наличии</div>{% ENDIF %}
   {% IF goods.MAX_REST_VALUE>0 %}<div rel="false" class="available-false">Товар есть в наличии</div>{% ENDIF %}
</div>

6. Подобный вопрос ранее рассматривался в темах форума
http://forum.storela...-об/#entry67498
http://forum.storela...ине/#entry30186

#5 lampadi

lampadi

    Пользователь

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

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

Просмотр сообщенияСake (22 Ноябрь 2013 - 03:45) писал:

Большая часть ваших вопросов ранее обсуждалась на форуме. Пожалуйста, используйте поиск по форуму прежде чем задавать вопрос на форуме.

1. На вашем сайте подложка меню белая а не темно серая как на вашем изображении. Вы так же хотите заменить и цвет подложки? Так как без подобной замены стили пунктов меню попросту не будут заметны в связи с тем что они так же используют белый цвет.

2. Данная реализация проблематична по нескольким причинам. Первая причина связана с тем что создать второй каталог можно только путем полного разворачивания первого и скрытия отдельной категории в частности "Бренды". Вторая причина связана с адаптивностью вашей темы оформления. Общая реализация подобного каталога не вписывается в рамки технической поддержки - по данному вопросу вам лучше обратиться в веб-студию или же использовать другую не адаптивную тему оформления. Для подобных тем реализацию можно найти на данном форуме.

3. Как я понимаю вы хотите отключить стандартное увеличение изображения (zoom) при наведении на само изображение в замен данной реализации?

4. Реализовать можно, но проблематично. По данному вопросу вам лучше обратиться в веб-студию.

5. Найдите в шаблоне "Товары" код

<div class="rating">
						 <!-- Среднее значение по результатам всех отзывов об этом товаре -->
						 {% IF goods.OPINION_RATING_VALUE %}
							 <img src="{FORALL_IMAGES_PATH}stars/{goods.OPINION_RATING_VALUE | number("0","","")}.gif" alt="{goods.OPINION_RATING_VALUE}" />
						 {% ENDIF %}
						
						 {% IF goods.OPINION_RATING_CNT_ALL>0 %}
							 <a href="{goods.URL | url_amp}?generally_is_good=-1&page=1">Отзывы ({goods.OPINION_RATING_CNT_ALL})</a>
						 {% ELSE %}
							 <a href="{goods.URL | url_amp}?&amp;form%5Bgoods_id%5D=opinion#goodsDataOpinionAdd">Оставить отзыв первым</a>
						 {% ENDIF %}
						 </div>

и ниже данного кода вставьте

<!-- Доступность товара -->
<div class="goodsDataMainModificationAvailable">
{% IF goods.MAX_REST_VALUE=0 %}<div rel="true" class="available-true">Товара нет в наличии</div>{% ENDIF %}
{% IF goods.MAX_REST_VALUE>0 %}<div rel="false" class="available-false">Товар есть в наличии</div>{% ENDIF %}
</div>

6. Подобный вопрос ранее рассматривался в темах форума
http://forum.storela...-об/#entry67498
http://forum.storela...ине/#entry30186

1. Вопрос по меню

Верхнее меню имеет большой отступ, как его опустить пониже и сделать что бы оно было в правой части под поиском а вообще хотелось бы что бы сделать меню такое как оно есть в низу только перенести его наверх! И изменить цвета что бы видно было

2. Как сделать что бы в каталоге товаров у товаров была картинка с лупой  и при нажатии увеличивалось фото пример   lusstore.ru/catalog/rashirennyj-poisk

3. Как сделать дополнительный каталог товаров слева (или если сделать дополнительный каталог то он будет раскрытым?)  что бы было по ТИПУ по БРУНДУ и еще как то  не могу найти на форуме как это сделать скиньте ссылку на пост если есть возможность
Спасибо!

#6 Сake

Сake

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

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

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

1. Добавьте в ваш файл стилей style.css

#header #megamenu_bottom {
  bottom: 0;
  height: 54px;
  position: absolute;
  right: 0;
}
#header-fluid {
  background-color: #3C3C3C !important;
}
@media only screen and (max-width:959px) {
  #header #megamenu_bottom {
	display:none !important;
  }
}

далее найдите

#header-logo {
  display: table;
  float: left;
  margin-left: 10px;
  margin-top: 30px;
  position: relative;
  width: 210px;
  z-index: 30;
}

и замените на

#header-logo {
  display: table;
  float: left;
  margin-bottom: 15px;
  margin-left: 10px;
  margin-top: 15px;
  position: relative;
  width: 210px;
  z-index: 30;
}

после в шаблоне "HTML" найдите

<ul id="megamenu">

и замените на

<ul id="megamenu_bottom">


#7 lampadi

lampadi

    Пользователь

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

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

Просмотр сообщенияСake (26 Ноябрь 2013 - 04:34) писал:

1. Добавьте в ваш файл стилей style.css

#header #megamenu_bottom {
bottom: 0;
height: 54px;
position: absolute;
right: 0;
}
#header-fluid {
background-color: #3C3C3C !important;
}
@media only screen and (max-width:959px) {
#header #megamenu_bottom {
display:none !important;
}
}

далее найдите

#header-logo {
display: table;
float: left;
margin-left: 10px;
margin-top: 30px;
position: relative;
width: 210px;
z-index: 30;
}

и замените на

#header-logo {
display: table;
float: left;
margin-bottom: 15px;
margin-left: 10px;
margin-top: 15px;
position: relative;
width: 210px;
z-index: 30;
}

после в шаблоне "HTML" найдите

<ul id="megamenu">

и замените на

<ul id="megamenu_bottom">

А вы уверены что  в осени есть такой код

далее найдите

#header-logo {
  display: table;
  float: left;
  margin-left: 10px;
  margin-top: 30px;
  position: relative;
  width: 210px;
  z-index: 30;
}


Посмотрите что получилось

И подскажите как изменить цвет фона в меню 2 и 3 уровня того что слева

#8 Сake

Сake

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

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

Отправлено 27 Ноябрь 2013 - 04:11

Все элементы брались с вашего сайта. Поэтому все указанные элементы присутствуют в вашем шаблоне. Если вы не можете найти элемент через поиск, то попробуйте найти его вручную внимательно просматривая редактируемый шаблон.

#9 lampadi

lampadi

    Пользователь

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

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

Просмотр сообщенияСake (27 Ноябрь 2013 - 04:11) писал:

Все элементы брались с вашего сайта. Поэтому все указанные элементы присутствуют в вашем шаблоне. Если вы не можете найти элемент через поиск, то попробуйте найти его вручную внимательно просматривая редактируемый шаблон.

Нет такого кода в main.css


#header-logo {
  display: table;
  float: left;
  margin-left: 10px;
  margin-top: 30px;
  position: relative;
  width: 210px;
  z-index: 30;
}


Посмотрите что получилось

И подскажите как изменить цвет фона в меню 2 и 3 уровня того что слева


#10 sengun

sengun

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

  • Модератоpы
  • 1 139 сообщений
  • ГородНижний Новгород

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

Просмотр сообщенияlampadi (28 Ноябрь 2013 - 16:47) писал:

Нет такого кода в main.css


#header-logo {
  display: table;
  float: left;
  margin-left: 10px;
  margin-top: 30px;
  position: relative;
  width: 210px;
  z-index: 30;
}


Посмотрите что получилось

И подскажите как изменить цвет фона в меню 2 и 3 уровня того что слева

#header-logo{position:relative;display:table;float:left;margin-top:30px;width:210px;z-index:30;margin-left: 10px;}
314 строка в style.css
Цвет фона подкаталогов в левом меню меняется в коде в style.css
.accordion li ul li { background: #f7f6f4; }


#11 lampadi

lampadi

    Пользователь

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

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

Просмотр сообщенияsengun (28 Ноябрь 2013 - 16:56) писал:

#header-logo{position:relative;display:table;float:left;margin-top:30px;width:210px;z-index:30;margin-left: 10px;}
314 строка в style.css
Цвет фона подкаталогов в левом меню меняется в коде в style.css
.accordion li ul li { background: #f7f6f4; }

Спасибо всё нашлось! Но только  стало еще хуже и меню в низ не опустилось и слева не встала

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

И подскажите как сменить цвет у надписи

Товар есть в наличии



#12 ne_yana

ne_yana

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

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

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

Просмотр сообщенияlampadi (29 Ноябрь 2013 - 00:22) писал:

Спасибо всё нашлось! Но только  стало еще хуже и меню в низ не опустилось и слева не встала

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

И подскажите как сменить цвет у надписи

Товар есть в наличии


Здравствуйте, уточните, пожалуйста, что нужно изменить в расположении меню.
2. Сейчас фон меню 3го уровня отличается от второго. Вопрос еще актуален?
3. Цвет надписи можно поменять в файле style.css в коде
#availability_statut {
color: #138F17;
}


#13 lampadi

lampadi

    Пользователь

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

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

Просмотр сообщенияne_yana (29 Ноябрь 2013 - 09:21) писал:

Здравствуйте, уточните, пожалуйста, что нужно изменить в расположении меню.
2. Сейчас фон меню 3го уровня отличается от второго. Вопрос еще актуален?
3. Цвет надписи можно поменять в файле style.css в коде
#availability_statut {
color: #138F17;
}

Добрый день

1. Логотип должен встать на место а меню должно быть под поиском справа! А не как сейчас! Всё сделано как написано выше
2 Неактуально
3 Как сменить цвет в каталоге товаров с черного на красный ТОВАРА НЕТ В НАЛИЧИИ

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

  • Снимок экрана 2013-11-29 в 15.39.46.png
  • Снимок экрана 2013-11-29 в 15.41.34.png


#14 Castiel

Castiel

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

  • Модераторы
  • 3 519 сообщений
  • ГородНижний Новгород

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

Просмотр сообщенияlampadi (29 Ноябрь 2013 - 14:41) писал:

Добрый день

1. Логотип должен встать на место а меню должно быть под поиском справа! А не как сейчас! Всё сделано как написано выше
2 Неактуально
3 Как сменить цвет в каталоге товаров с черного на красный ТОВАРА НЕТ В НАЛИЧИИ

Вставляем логотип на место, Редактируем Style.css

Находим
#header-logo {
display: table;
float: left;
margin-bottom: 15px;
margin-left: 10px;
margin-top: 15px;
position: relative;
width: 210px;
z-index: 30;
}

Заменяем на
#header-logo {
display: table;
float: left;
margin-bottom: 15px;
margin-left: 10px;
margin-top: 35px;
position: relative;
width: 210px;
z-index: 30;
}

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

#15 lampadi

lampadi

    Пользователь

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

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

Просмотр сообщенияCastiel (29 Ноябрь 2013 - 15:18) писал:

Вставляем логотип на место, Редактируем Style.css

Находим
#header-logo {
display: table;
float: left;
margin-bottom: 15px;
margin-left: 10px;
margin-top: 15px;
position: relative;
width: 210px;
z-index: 30;
}

Заменяем на
#header-logo {
display: table;
float: left;
margin-bottom: 15px;
margin-left: 10px;
margin-top: 35px;
position: relative;
width: 210px;
z-index: 30;
}

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

Лого встало но появился отступ под телефоном в 1см а раньше его небыло как убрать
Верхнее меню нужно расположить под строкой поиска

Как сменить цвет в каталоге товаров с черного на красный ТОВАРА НЕТ В НАЛИЧИИ

#16 ne_yana

ne_yana

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

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

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

Просмотр сообщенияlampadi (29 Ноябрь 2013 - 16:51) писал:

Лого встало но появился отступ под телефоном в 1см а раньше его небыло как убрать
Верхнее меню нужно расположить под строкой поиска

Как сменить цвет в каталоге товаров с черного на красный ТОВАРА НЕТ В НАЛИЧИИ
В файле style.css замените
#header-logo {
display: table;
float: left;
margin-bottom: 15px;
margin-left: 10px;
margin-top: 35px;
position: relative;
width: 210px;
z-index: 30;
}
на
#header-logo {
display: table;
float: left;
margin-left: 10px;
margin-top: 35px;
position: relative;
width: 210px;
z-index: 30;
}

В файл style.css добавьте
.available-true {
color: rgb(219, 78, 78);
}
, прописав необходимый цвет.

В разделе Сайт - Редактор шаблонов - HTML на 134 строке замените
<ul id="megamenu_bottom">
на
<ul id="megamenu_bottom" style="
	position: absolute;
	top: 92px;
	left: 247px;
">


#17 lampadi

lampadi

    Пользователь

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

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

Просмотр сообщенияne_yana (29 Ноябрь 2013 - 16:54) писал:

В файле style.css замените
#header-logo {
display: table;
float: left;
margin-bottom: 15px;
margin-left: 10px;
margin-top: 35px;
position: relative;
width: 210px;
z-index: 30;
}
на
#header-logo {
display: table;
float: left;
margin-left: 10px;
margin-top: 35px;
position: relative;
width: 210px;
z-index: 30;
}

В файл style.css добавьте
.available-true {
color: rgb(219, 78, 78);
}
, прописав необходимый цвет.

В разделе Сайт - Редактор шаблонов - HTML на 134 строке замените
<ul id="megamenu_bottom">
на
<ul id="megamenu_bottom" style="
position: absolute;
top: 92px;
left: 247px;
">

Спасибо всё получилось только у меню бы отступ сделать поменьще и как его сделать под поиском что бы оно было справа

#18 Castiel

Castiel

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

  • Модераторы
  • 3 519 сообщений
  • ГородНижний Новгород

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

Просмотр сообщенияlampadi (29 Ноябрь 2013 - 17:29) писал:

Спасибо всё получилось только у меню бы отступ сделать поменьще и как его сделать под поиском что бы оно было справа

Выравнивание по правому краю
Находим
<ul id="megamenu_bottom" style="position: absolute;top: 92px;left: 247px;">

Заменяем
<ul id="megamenu_bottom" style="position: absolute;top: 92px;right: 0px;">

Отступ между пунктами меню
Находим
#megamenu_bottom li {
display: block;
float: left;
margin: 15px 10px 12px 1px;
background: #ffffff;
-moz-box-shadow: 0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1);
-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1);
box-shadow: 0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1);
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}

Заменяем
#megamenu_bottom li {
display: block;
float: left;
margin: 15px 5px 12px 1px;
background: #ffffff;
-moz-box-shadow: 0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1);
-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1);
box-shadow: 0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1);
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}


#19 lampadi

lampadi

    Пользователь

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

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

Спасибо огромное все получилось!!!!

#20 lampadi

lampadi

    Пользователь

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

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

Только вот если уменьшить страницу вывод товаров становится по 2 или одному в ряд а меню остается на месте и появляется прокрутка с низу как от этого избавится




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

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