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


Меню С Картинками

Автор dostypno, 14 дек. 2014 00:00

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

#1 dostypno

dostypno

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

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

Отправлено 14 Декабрь 2014 - 00:00

Здравствуйте уважаемие специалисты, можно ли сделать такое меню как на фото?

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

  • 2.jpg

#2 dostypno

dostypno

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

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

Отправлено 15 Декабрь 2014 - 15:22

аууу

#3 Ирина345

Ирина345

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

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

Отправлено 15 Декабрь 2014 - 15:25

Просмотр сообщенияdostypno (15 Декабрь 2014 - 15:22) писал:

аууу
Здравствуйте, уточните где и как у Вас на сайте оно должно располагаться меню.

#4 dostypno

dostypno

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

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

Отправлено 15 Декабрь 2014 - 16:10

Ну чтобы при навидении стрелки раскрывалось верхнее меню и возле кнопок были логотипы марок автомобилей. как на фото

#5 Ирина345

Ирина345

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

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

Отправлено 15 Декабрь 2014 - 16:56

Просмотр сообщенияdostypno (15 Декабрь 2014 - 16:10) писал:

Ну чтобы при навидении стрелки раскрывалось верхнее меню и возле кнопок были логотипы марок автомобилей. как на фото
найдите в HTML

 <!-- Верхний блок навигации -->
			<div class="menu_block_dropdown">
			  <div class="et_categ_box">
				<div id="et_categ_box_scroll">
				  <div class="img_link_wrapper"><a class="image-link" href="http://{NET_DOMAIN}/"></a></div>
				  {% FOR menu %}
					{% FOR header %}
					  {% FOR links %}
						 <div class="cat-name"><a href="{menu.header.links.URL}" class="main_category {% IF menu.header.links.SELECTED %}selected{%ENDIF%}" {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></div>
					  {% ENDFOR %}
					{% ENDFOR %}
				  {% ENDFOR %}
				</div>  
			  </div>
			</div>
			<!-- end Верхний блок навигации -->
замените на

<!-- Верхний блок навигации -->
			<div class="menu_block_dropdown">
			  <div class="et_categ_box">
				<div id="et_categ_box_scroll">
				  <div class="img_link_wrapper"><a class="image-link" href="http://{NET_DOMAIN}/"></a></div>
				  {% FOR menu %}
					{% FOR header %}
					  {% FOR links %}
						 <div class="cat-name"><a href="{menu.header.links.URL}" class="main_category {% IF menu.header.links.SELECTED %}selected{%ENDIF%}" {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></div>
					  {% ENDFOR %}
					{% ENDFOR %}
				  {% ENDFOR %}
				  <div class="cat-name">
				  <ul><li style="color:#fff;">тест
				   {%FOR catalog_full%}
										{% IF catalog_full.FIRST %}<ul class="test">{% ENDIF %}
										<li {% IF catalog_full.HIDE %}style="display:none;"{% ENDIF %} class="{% IF catalog_full.ISSET_SUB %}parent{% ENDIF %}{% IF catalog_full.CURRENT %} active{% ELSEIF catalog_full.CURRENT_PARENT %} active{% ENDIF %}">
										  <a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}>{catalog_full.NAME}</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%}
					
					</li>
					</ul>
				  </div>
				</div>  
			  </div>
			</div>
			<!-- end Верхний блок навигации -->

в конец файла main.css
style.css
.cat-name > ul > li {
	   position: relative;
padding: 17px 17px;
transition: All 0.5s ease;
font: 12px Calibri;
text-transform: uppercase;
}

.cat-name > ul > li:hover > ul {
		display: block;
}
.test li {
float: left;
color: #fff;
}

.cat-name li:hover ul > li{
  display: block;
		position: relative;
}
.test {
		background: none repeat scroll 0 0 #000;
		border: 1px solid #ccc;
		display: none;
		top: 48px;
			   margin: 0;
		padding: 10px;
		width: 450px;
		position: absolute;
				z-index: 99;
}

#6 dostypno

dostypno

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

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

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

Просмотр сообщенияИрина345 (15 Декабрь 2014 - 16:56) писал:

найдите в HTML

<!-- Верхний блок навигации -->
<div class="menu_block_dropdown">
<div class="et_categ_box">
<div id="et_categ_box_scroll">
<div class="img_link_wrapper"><a class="image-link" href="http://{NET_DOMAIN}/"></a></div>
{% FOR menu %}
{% FOR header %}
{% FOR links %}
<div class="cat-name"><a href="{menu.header.links.URL}" class="main_category {% IF menu.header.links.SELECTED %}selected{%ENDIF%}" {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></div>
{% ENDFOR %}
{% ENDFOR %}
{% ENDFOR %}
</div>
</div>
</div>
<!-- end Верхний блок навигации -->
замените на

<!-- Верхний блок навигации -->
<div class="menu_block_dropdown">
<div class="et_categ_box">
<div id="et_categ_box_scroll">
<div class="img_link_wrapper"><a class="image-link" href="http://{NET_DOMAIN}/"></a></div>
{% FOR menu %}
{% FOR header %}
{% FOR links %}
<div class="cat-name"><a href="{menu.header.links.URL}" class="main_category {% IF menu.header.links.SELECTED %}selected{%ENDIF%}" {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></div>
{% ENDFOR %}
{% ENDFOR %}
{% ENDFOR %}
<div class="cat-name">
<ul><li style="color:#fff;">тест
{%FOR catalog_full%}
{% IF catalog_full.FIRST %}<ul class="test">{% ENDIF %}
<li {% IF catalog_full.HIDE %}style="display:none;"{% ENDIF %} class="{% IF catalog_full.ISSET_SUB %}parent{% ENDIF %}{% IF catalog_full.CURRENT %} active{% ELSEIF catalog_full.CURRENT_PARENT %} active{% ENDIF %}">
<a href="{catalog_full.URL}"{% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}>{catalog_full.NAME}</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%}

</li>
</ul>
</div>
</div>
</div>
</div>
<!-- end Верхний блок навигации -->

в конец файла main.css
style.css
.cat-name > ul > li {
position: relative;
padding: 17px 17px;
transition: All 0.5s ease;
font: 12px Calibri;
text-transform: uppercase;
}

.cat-name > ul > li:hover > ul {
display: block;
}
.test li {
float: left;
color: #fff;
}

.cat-name li:hover ul > li{
display: block;
position: relative;
}
.test {
background: none repeat scroll 0 0 #000;
border: 1px solid #ccc;
display: none;
top: 48px;
margin: 0;
padding: 10px;
width: 450px;
position: absolute;
z-index: 99;
}
Уменя нет <!-- Верхний блок навигации -->

#7 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

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

вы написали вопрос в теме Движение, в следствии чего по данному шаблону вам написали инструкцию, на данный момент у вас установлена тема Пластик

#8 dostypno

dostypno

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

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

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

Просмотр сообщенияVaccina (16 Декабрь 2014 - 02:24) писал:

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

#9 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

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

В шаблоне Движение уже представлен каталог в форме горизонтально полосы, ваш каталог необходимо расположить заместо стандартного меню или расположить где-то рядом?

#10 dostypno

dostypno

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

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

Отправлено 16 Декабрь 2014 - 03:04

Просмотр сообщенияVaccina (16 Декабрь 2014 - 02:59) писал:

В шаблоне Движение уже представлен каталог в форме горизонтально полосы, ваш каталог необходимо расположить заместо стандартного меню или расположить где-то рядом?
Хочу сделать меню как на этом сайте auto-covers.ru в шаблоне пластик.

#11 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 16 Декабрь 2014 - 03:24

Возможно не так выразилась, данное выпадающее меню необходимо вставить вместо вашего родного над поиском или расположить немного в другом месте? Так как в родном указаны пункты меню не являющиеся категориями.

#12 dostypno

dostypno

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

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

Отправлено 16 Декабрь 2014 - 03:28

Просмотр сообщенияVaccina (16 Декабрь 2014 - 03:24) писал:

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

#13 dostypno

dostypno

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

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

Отправлено 16 Декабрь 2014 - 04:05

Поможете?

#14 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 16 Декабрь 2014 - 04:21

В шаблоне HTML найдите:
<div class="menuheader">
		  <ul>
			{% FOR menu %}
			  {% FOR header %}
				{% FOR links %}
				  <li {% IF menu.header.links.first %}class="main"{% ENDIF %}><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="current"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li>
				{% ENDFOR %}
			  {% ENDFOR %}
			{% ENDFOR %}
		  </ul>
		</div>

замените на:
<div class="menuheader">
		   {%IFNOT catalog_full_empty%}
								{%FOR catalog_full%}
								{% IF catalog_full.FIRST %}
								<ul {% IF catalog_full.LEVEL = 0 %}class="navSelect menuResp nav myhidden"{% ENDIF %}>
								{% ENDIF %}
									<li {% IF catalog_full.HIDE %}style="display:none;" {% ENDIF %}{% IF catalog_full.CURRENT %}class="open"{% ELSEIF catalog_full.CURRENT_PARENT %}class="open"{% ENDIF %} >
										<a href="{catalog_full.URL}" {% IF catalog_full.CURRENT %}class="active selected"{% ENDIF %}>{catalog_full.NAME}</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%}
		</div>

далее в конец main.css добавьте:
.menuResp {
	display: block;
	margin: 0;
	padding: 0;
	position: relative;
	word-spacing: -0.25em;
}
.menuResp li {
	display: inline-block;
	/*display: inline;*/
	padding: 0;
	text-align: left;
	vertical-align: top;
	position: relative;
	word-spacing: normal;
	/* zoom: 1; */
}
.menuResp .open {
	z-index: 1;
}
.menuResp .conta-one {
	display: none;
}
.menuResp a {
	color: #666;
	display: inline-block;
	font-size: 14px;
	line-height: 1.1em;
	padding: 10px 10px;
	text-align: left;
	text-decoration: none;
	white-space: nowrap;
}
.menuResp .open > a {
}
.navSelect .rarr {
	display: none;
}
.menuResp a:hover{
	background: #f7f7f7;
	color: #000;
	text-decoration: none;
	text-shadow: 0 1px 0 #fff;
}
.menuResp ul {
	background: #fff;
	border: 1px solid #dbdbdb;
	display: none;
	left: 0;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 20px;
	z-index: 99;
}
.menuResp ul li {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}
.menuResp ul a {
	display: block;
	white-space: nowrap;
}
.menuResp ul ul {
	display: none;
	left: 0;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 0;
	z-index: 2;
}
.menuResp > li:hover > ul{
display:block;
}

далее найдите:
#panelsite div.centercol .menuheader {
width: 800px;
height: 24px;
overflow: hidden;
margin: 15px 0 0 0;
}
замените на:
#panelsite div.centercol .menuheader {
width: 800px;
height: 24px;
overflow: visible;
margin: 15px 0 0 0;
}

как результат у вас вместо меню должен быть каталог с выпадающими текстовыми категориями

#15 dostypno

dostypno

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

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

Отправлено 18 Декабрь 2014 - 21:25

Просмотр сообщенияVaccina (16 Декабрь 2014 - 04:21) писал:

В шаблоне HTML найдите:
<div class="menuheader">
		 <ul>
		 {% FOR menu %}
			 {% FOR header %}
			 {% FOR links %}
				 <li {% IF menu.header.links.first %}class="main"{% ENDIF %}><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="current"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li>
			 {% ENDFOR %}
			 {% ENDFOR %}
		 {% ENDFOR %}
		 </ul>
	 </div>

замените на:
<div class="menuheader">
		 {%IFNOT catalog_full_empty%}
							 {%FOR catalog_full%}
							 {% IF catalog_full.FIRST %}
							 <ul {% IF catalog_full.LEVEL = 0 %}class="navSelect menuResp nav myhidden"{% ENDIF %}>
							 {% ENDIF %}
								 <li {% IF catalog_full.HIDE %}style="display:none;" {% ENDIF %}{% IF catalog_full.CURRENT %}class="open"{% ELSEIF catalog_full.CURRENT_PARENT %}class="open"{% ENDIF %} >
									 <a href="{catalog_full.URL}" {% IF catalog_full.CURRENT %}class="active selected"{% ENDIF %}>{catalog_full.NAME}</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%}
	 </div>

далее в конец main.css добавьте:
.menuResp {
display: block;
margin: 0;
padding: 0;
position: relative;
word-spacing: -0.25em;
}
.menuResp li {
display: inline-block;
/*display: inline;*/
padding: 0;
text-align: left;
vertical-align: top;
position: relative;
word-spacing: normal;
/* zoom: 1; */
}
.menuResp .open {
z-index: 1;
}
.menuResp .conta-one {
display: none;
}
.menuResp a {
color: #666;
display: inline-block;
font-size: 14px;
line-height: 1.1em;
padding: 10px 10px;
text-align: left;
text-decoration: none;
white-space: nowrap;
}
.menuResp .open > a {
}
.navSelect .rarr {
display: none;
}
.menuResp a:hover{
background: #f7f7f7;
color: #000;
text-decoration: none;
text-shadow: 0 1px 0 #fff;
}
.menuResp ul {
background: #fff;
border: 1px solid #dbdbdb;
display: none;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 20px;
z-index: 99;
}
.menuResp ul li {
display: block;
list-style: none;
margin: 0;
padding: 0;
}
.menuResp ul a {
display: block;
white-space: nowrap;
}
.menuResp ul ul {
display: none;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 0;
z-index: 2;
}
.menuResp > li:hover > ul{
display:block;
}

далее найдите:
#panelsite div.centercol .menuheader {
width: 800px;
height: 24px;
overflow: hidden;
margin: 15px 0 0 0;
}
замените на:
#panelsite div.centercol .menuheader {
width: 800px;
height: 24px;
overflow: visible;
margin: 15px 0 0 0;
}

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

#16 dostypno

dostypno

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

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

Отправлено 18 Декабрь 2014 - 23:59

ауууу

#17 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 19 Декабрь 2014 - 01:03

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

#18 dostypno

dostypno

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

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

Отправлено 19 Декабрь 2014 - 01:09

Просмотр сообщенияVaccina (19 Декабрь 2014 - 01:03) писал:

возможно, я вас немного не поняла, у вас имеются подкатегории? какой должен быть конечный результат:
- выпадающий каталог
- стандартное меню и в нем выпадающий пункт каталог?
выпадающий каталог как тут auto-covers.ru

#19 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 19 Декабрь 2014 - 01:18

по коду все верно, теперь необходимо реализовать вложенности в разделе Товары - Товары, у вас по одной категории, внутри нет подкатегорий, только товары

#20 dostypno

dostypno

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

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

Отправлено 19 Декабрь 2014 - 01:23

Просмотр сообщенияVaccina (19 Декабрь 2014 - 01:18) писал:

по коду все верно, теперь необходимо реализовать вложенности в разделе Товары - Товары, у вас по одной категории, внутри нет подкатегорий, только товары
Скажите что мне нужно сделать?
Обратно в Изменение общей стилистики


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

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

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Шаблон Движение
  5. → Изменение общей стилистики
  6. Privacy Policy