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


Вопросец

Автор driverdimka, 20 окт. 2013 16:07

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

#1 driverdimka

driverdimka

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

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

Отправлено 20 Октябрь 2013 - 16:07

Здравствуйте. Помогите пожалуйста,как сделать панель активной. Чтобы при нажатии на кнопку(просмотренные товары,или в сравнении появлялся товар,как на изображении ниже

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

  • 123.JPG

#2 driverdimka

driverdimka

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

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

Отправлено 20 Октябрь 2013 - 16:21

Уже вроде разобрался.

#3 driverdimka

driverdimka

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

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

Отправлено 20 Октябрь 2013 - 16:31

Тогда еще вопрос. Как сделать подобную верхнюю часть,как на этом сайте http://www.123.ru/
Как сделать,чтобы на сайте было 2 меню,по середине логотип и за нижним меню-строка поиска,как на картинке.
Знаю,что много прошу,но может кто поможет разобраться по частям.

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

  • ого.JPG

#4 miyako

miyako

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

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

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

Просмотр сообщенияdriverdimka (20 Октябрь 2013 - 16:31) писал:

Тогда еще вопрос. Как сделать подобную верхнюю часть,как на этом сайте http://www.123.ru/
Как сделать,чтобы на сайте было 2 меню,по середине логотип и за нижним меню-строка поиска,как на картинке.
Знаю,что много прошу,но может кто поможет разобраться по частям.

Всплывающее меню можно установить по следующей инструкции - http://forum.storela...аталогом-места/

У Вас уже три меню(верхнее/нижнее/каталог)

По середине в Вашем примере установлен слайдер - http://storeland.ru/about/faq#51

Поиск можно будет потом передвинуть. Проделайте пожалуйста все изменения из инструкций.

#5 driverdimka

driverdimka

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

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

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

Просмотр сообщенияmiyako (21 Октябрь 2013 - 09:50) писал:

Всплывающее меню можно установить по следующей инструкции - http://forum.storela...аталогом-места/

У Вас уже три меню(верхнее/нижнее/каталог)

По середине в Вашем примере установлен слайдер - http://storeland.ru/about/faq#51

Поиск можно будет потом передвинуть. Проделайте пожалуйста все изменения из инструкций.
Спасибо,будем пробовать делать.

#6 driverdimka

driverdimka

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

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

Отправлено 21 Октябрь 2013 - 20:35

Цитата

В принципе это сделать можно с помощью каталога категорий выводимых вместо массива "catalog" массивом "catalog_full". Он содержит полное дерево категорий, без скрытия вложенных в не активную ветку категорий, что позволяет делать любые древовидные струкруры категорий, в том числе и выпадающие списки как в примере с mvideo. Код построения дерева категорий мы построим в 3 шага.

Шаг первый. HTML код
  <!-- Каталог товаров -->
  {%IFNOT catalog_full_empty%}
{%FOR catalog_full%}
  {% IF catalog_full.FIRST %}<ul id="nav">{% ENDIF %}
  <li class="
level{catalog_full.LEVEL}
nav-{catalog_full.index}
{% IF catalog_full.CURRENT %}active{% ELSEIF catalog_full.CURRENT_PARENT %}active{% ENDIF %}
{% IF catalog_full.ISSET_SUB %}parent{% ENDIF %}
  ">
<a href="{catalog_full.URL}"><span>{catalog_full.NAME}</span></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%}
  <!-- /Каталог товаров -->

Это код вечный его можно будет больше никогда не трогать, подойдет для любых дизайн шаблонов.

Шаг второй. JS код
Как только допишете вот такой javascript код например в файл main.js:
$(document).ready(function(){
  // Действие при наведении на меню категорий, для возможности отображения вложенного подменю
  $('#nav li').hover(
function () {
  $(this).addClass('over');
},
function () {
  $(this).removeClass('over');
}
  );
});

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

Шаг третий. CSS стили
Остался один финальный шаг, который будет самым легко настраиваемым. Подобными стилями можно скрыть все вложенные в корневые категории и настроить вид отображения как захочется. Хоть боковым меню, хоть нижним, хоть верхним.

Вот пример CSS стилей для размещения вышеуказанного меню слева на сайте и выдачи списка подкатегорий при наведении на категорию. Вложенность сами понимаете не ограниченная:
#nav{padding:0 0 32px 7px; margin:0; font-size:20px;}

/* Все уровни */
#nav li { text-align:left; position:relative; }
#nav li.over { z-index:999; }
#nav li.parent {}
#nav li a { display:block; text-decoration:none; }
#nav li a:hover { text-decoration:none; }
#nav li a span { display:block; white-space:nowrap; cursor:pointer; }
#nav li ul a span { white-space:normal; }

/* 1й уровень вложенности */
#nav li {}
#nav li a{padding:0 0 0; font-weight:bold; color:#CDCDCD; line-height:normal;}
#nav li a:hover { color:#333333; }
#nav li.over a,
#nav li.active a { color:#333333; }

/* 2й уровень вложенности */
#nav ul { position:absolute; width:15em; top:0px; left:-10000px; border:0; padding:0; background:#B2B2B2; font-size:12px;}
#nav ul li { float:none; border-bottom:1px solid #FFF; }
#nav ul li.last { border-bottom:0; }
#nav ul li a { float:none; padding:3px 9px; font-weight:normal; color:#050505 !important; }
#nav ul li a:hover { color:#FFF !important; background:#333333; }
#nav ul li.active a,
#nav ul li.over a  { color:#FFF !important; background:#333333; }

/* 3й и последующие уровни... Можно писать таких стилей сколько угодно, до бесконечности... */
#nav ul ul { top:0px; }

/* Видимое меню */
#nav li.over ul { left:200px; }
#nav li.over ul li.over ul { left:15em; }
#nav li.over ul ul { left:-10000px; }
#nav li.over .indent-class{margin-left:230px;}
/********** Navigation > */

Теперь для написания CSS стиля именно для вашего случая, где меню будет вываливаться сверху, лучше всего будет определиться с тем какой дизайн шаблон мы используем и сразу написать css стили для него, дабы не делать лишней работы  Изображение

В случае с верхнем меню, мы его так же перенесём вбок после определения какой дизайн шаблон требуется изменить.
Первый пункт(не могу найти в Html),второй и третий сделал. Жду помощи. К сожалению у меня не получается сделать всплывающее меню.

#7 Vaccina

Vaccina

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

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

Отправлено 22 Октябрь 2013 - 05:55

Изначально как я понимаю у вас установлена тема "Пластик". Код каталога в данной теме по умолчанию выглядит так

<ul>
		{% IFNOT catalog_empty %}
		  {% FOR catalog %}
			{% IFNOT catalog.HIDE %}
			  <li class="{% IF catalog.LEVEL>0%}incat{% ENDIF %} {% IF catalog.CURRENT %}fnt12b{% ENDIF %}"><a href="{catalog.URL}" {% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("30")}px"{% ENDIF %}>{catalog.NAME}</a></li>
			{% ENDIF %}
		  {% ENDFOR %}
		{% ENDIF %}
		</ul>

искать и изменять вам нужно именно его.

#8 driverdimka

driverdimka

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

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

Отправлено 22 Октябрь 2013 - 10:35

Просмотр сообщенияVaccina (22 Октябрь 2013 - 05:55) писал:

Изначально как я понимаю у вас установлена тема "Пластик". Код каталога в данной теме по умолчанию выглядит так

<ul>
	 {% IFNOT catalog_empty %}
		 {% FOR catalog %}
		 {% IFNOT catalog.HIDE %}
			 <li class="{% IF catalog.LEVEL>0%}incat{% ENDIF %} {% IF catalog.CURRENT %}fnt12b{% ENDIF %}"><a href="{catalog.URL}" {% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("30")}px"{% ENDIF %}>{catalog.NAME}</a></li>
		 {% ENDIF %}
		 {% ENDFOR %}
	 {% ENDIF %}
	 </ul>

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

#9 driverdimka

driverdimka

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

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

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

Не могу найти код,который вы мне дали.

#10 empty9228

empty9228

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

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

Отправлено 22 Октябрь 2013 - 10:52

Здравствуйте! Данный код находится у вас в файле HTML, в  блоке  <!-- Каталог сайта -->

#11 miyako

miyako

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

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

Отправлено 22 Октябрь 2013 - 10:53

Просмотр сообщенияdriverdimka (22 Октябрь 2013 - 10:45) писал:

Не могу найти код,который вы мне дали.

строки шаблона HTML 478 - 486

	 <ul>
		{% IFNOT catalog_empty %}
		  {% FOR catalog %}
			{% IFNOT catalog.HIDE %}
			  <li class="{% IF catalog.LEVEL>0%}incat{% ENDIF %} {% IF catalog.CURRENT %}fnt12b{% ENDIF %}"><a href="{catalog.URL}" {% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("30")}px"{% ENDIF %}>{catalog.NAME}</a></li>
			{% ENDIF %}
		  {% ENDFOR %}
		{% ENDIF %}
		</ul>

#12 driverdimka

driverdimka

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

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

Отправлено 22 Октябрь 2013 - 11:01

Нашел,видимо невнимательно смотрел,а вот что в нем именно изменить это вопрос.

#13 miyako

miyako

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

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

Отправлено 22 Октябрь 2013 - 11:08

Вам нужно изменить как сказано в инструкции - http://forum.storela...еста/#entry2083
код каталога -
 <ul>
		{% IFNOT catalog_empty %}
		  {% FOR catalog %}
			{% IFNOT catalog.HIDE %}
			  <li class="{% IF catalog.LEVEL>0%}incat{% ENDIF %} {% IF catalog.CURRENT %}fnt12b{% ENDIF %}"><a href="{catalog.URL}" {% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("30")}px"{% ENDIF %}>{catalog.NAME}</a></li>
			{% ENDIF %}
		  {% ENDFOR %}
		{% ENDIF %}
		</ul>

#14 driverdimka

driverdimka

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

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

Отправлено 22 Октябрь 2013 - 11:26

<ul>
{% IFNOT catalog_empty %}
  {% FOR catalog %}
{% IFNOT catalog.HIDE %}
  <li class="{% IF catalog.LEVEL>0%}incat{% ENDIF %} {% IF catalog.CURRENT %}fnt12b{% ENDIF %}"><a href="{catalog.URL}" {% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("30")}px"{% ENDIF %}>{catalog.NAME}</a></li>
{% ENDIF %}
  {% ENDFOR %}
{% ENDIF %}
</ul>
Поменял этот код на этот:

Цитата

{%IFNOT catalog_full_empty%}
{%FOR catalog_full%}
  {% IF catalog_full.FIRST %}<ul id="nav">{% ENDIF %}
  <li class="
level{catalog_full.LEVEL}
nav-{catalog_full.index}
{% IF catalog_full.CURRENT %}active{% ELSEIF catalog_full.CURRENT_PARENT %}active{% ENDIF %}
{% IF catalog_full.ISSET_SUB %}parent{% ENDIF %}
  ">
<a href="{catalog_full.URL}"><span>{catalog_full.NAME}</span></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 class="block">
  <div class="blocktitle bluesmall"><a href="{CATALOG_URL}">Каталог сайта</a></div>
  <div class="blockmain navigation fnt12n">
<ul>
  {%IFNOT catalog_full_empty%}
{%FOR catalog_full%}
  {% IF catalog_full.FIRST %}<ul id="nav">{% ENDIF %}
  <li class="
level{catalog_full.LEVEL}
nav-{catalog_full.index}
{% IF catalog_full.CURRENT %}active{% ELSEIF catalog_full.CURRENT_PARENT %}active{% ENDIF %}
{% IF catalog_full.ISSET_SUB %}parent{% ENDIF %}
  ">
<a href="{catalog_full.URL}"><span>{catalog_full.NAME}</span></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%}
</ul>
  </div>
  <div class="blockbottom"></div>
</div>
<!-- END Каталог сайта -->

Вот как выглядит мой код.

#15 miyako

miyako

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

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

Отправлено 22 Октябрь 2013 - 11:54

Просмотр сообщенияdriverdimka (22 Октябрь 2013 - 11:26) писал:

<ul>
{% IFNOT catalog_empty %}
  {% FOR catalog %}
{% IFNOT catalog.HIDE %}
  <li class="{% IF catalog.LEVEL>0%}incat{% ENDIF %} {% IF catalog.CURRENT %}fnt12b{% ENDIF %}"><a href="{catalog.URL}" {% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("30")}px"{% ENDIF %}>{catalog.NAME}</a></li>
{% ENDIF %}
  {% ENDFOR %}
{% ENDIF %}
</ul>
Поменял этот код на этот:


Появились маленькие стрелочки у некоторых пунктов меню,но так ничего и не происходит,можете посмотреть?

<!-- Каталог сайта -->
<div class="block">
  <div class="blocktitle bluesmall"><a href="{CATALOG_URL}">Каталог сайта</a></div>
  <div class="blockmain navigation fnt12n">
<ul>
  {%IFNOT catalog_full_empty%}
{%FOR catalog_full%}
  {% IF catalog_full.FIRST %}<ul id="nav">{% ENDIF %}
  <li class="
level{catalog_full.LEVEL}
nav-{catalog_full.index}
{% IF catalog_full.CURRENT %}active{% ELSEIF catalog_full.CURRENT_PARENT %}active{% ENDIF %}
{% IF catalog_full.ISSET_SUB %}parent{% ENDIF %}
  ">
<a href="{catalog_full.URL}"><span>{catalog_full.NAME}</span></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%}
</ul>
  </div>
  <div class="blockbottom"></div>
</div>
<!-- END Каталог сайта -->

Вот как выглядит мой код.

Код - 
	<!-- Каталог сайта -->
	<div class="block">
	  <div class="blocktitle bluesmall"><a href="{CATALOG_URL}">Каталог сайта</a></div>
	  <div class="blockmain navigation fnt12n">
		<ul>
	   
		{%IFNOT catalog_full_empty%}
		{%FOR catalog_full%}
		  {% IF catalog_full.FIRST %}<ul id="nav">{% ENDIF %}
		  <li class="
				level{catalog_full.LEVEL}
				nav-{catalog_full.index}
				{% IF catalog_full.CURRENT %}active{% ELSEIF catalog_full.CURRENT_PARENT %}active{% ENDIF %}
				{% IF catalog_full.ISSET_SUB %}parent{% ENDIF %}
		  ">
				<a href="{catalog_full.URL}"><span>{catalog_full.NAME}</span></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%}
 
		</ul>
	  </div>
	  <div class="blockbottom"></div>
	</div>
	<!-- END Каталог сайта -->
замените на  - 
		{%IFNOT catalog_full_empty%}
		{%FOR catalog_full%}
		  {% IF catalog_full.FIRST %}<ul id="nav">{% ENDIF %}
		  <li class="
				level{catalog_full.LEVEL}
				nav-{catalog_full.index}
				{% IF catalog_full.CURRENT %}active{% ELSEIF catalog_full.CURRENT_PARENT %}active{% ENDIF %}
				{% IF catalog_full.ISSET_SUB %}parent{% ENDIF %}
		  ">
				<a href="{catalog_full.URL}"><span>{catalog_full.NAME}</span></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%}

#16 driverdimka

driverdimka

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

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

Отправлено 22 Октябрь 2013 - 16:07

Все спасибо,теперь выходит меню. Теперь вопрос как его сделать более красивым,например как на http://www.mvideo.ru. Что для этого нужно сделать?
Нужно закачивать сами блоки в корень сайта или можно обойтись другим путем?
При наведении меняется цвет,это можно сделать?
Можно ли это меню перенести на место синего меню,чтобы оно было горизонтальным?(главное,доставка,личный кабинет),а само синее меню на верх сайта.
И последний вопрос,можно ли изменить как-то форму,где указаны контакты для связи(они мне не нужны),то есть перерисовать можно? Где найти этот файл.

#17 Vaccina

Vaccina

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

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

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

Вопрос относительно реализации подобного меню ранее рассматривался в теме форума http://forum.storela...еста/#entry2072

#18 driverdimka

driverdimka

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

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

Отправлено 23 Октябрь 2013 - 18:24

Просмотр сообщенияVaccina (23 Октябрь 2013 - 05:03) писал:

Вопрос относительно реализации подобного меню ранее рассматривался в теме форума http://forum.storela...еста/#entry2072
хм,очень странно,делал все по подпунктам,но меню навверх так и не поднимется,что для этого нужно сделать?

#19 Vaccina

Vaccina

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

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

Отправлено 24 Октябрь 2013 - 04:16

Найдите в файле стилей main.css

#panelsite div.centercol .menuheader {
	height: 24px;
	margin: 15px 0 0;
	overflow: hidden;
	width: 800px;
}

и замените на

#panelsite div.centercol .menuheader {
	height: 24px;
	margin: 15px 0 10px;
	width: 800px;
}

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

#nav {
	font-size: 15px;
	margin: 0;
	padding: 0 0 32px 7px;
	width: 230px;
}

и замените на

#nav {
	font-size: 15px;
	margin: -10px 0 0;
	padding: 0 0 32px 7px;
}

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

#nav ul {
	background: #B2B2B2;
	border: 0 none;
	font-size: 12px;
	left: -10000px;
	padding: 0;
	position: absolute;
	top: 14px;
	width: 15em;
}

и замените на

#nav ul {
	background: #FFFFFF;
	border: 0 none;
	display: none;
	font-size: 12px;
	left: 0;
	padding: 5px;
	position: absolute;
	top: 34px;
	width: 200px;
}

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

#nav ul li a {
	color: #E3E3E3 !important;
	float: none;
	font-weight: normal;
	padding: 3px 9px;
}

и замените на

#nav ul li a {
	color: #5D5C5C !important;
	float: none;
	font-weight: normal;
	padding: 3px 9px;
}

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

#nav ul li {
	border-bottom: 1px solid #FFFFFF;
	float: none;
}

и замените на

#nav ul li {
	border-bottom: 1px solid #FFFFFF;
	float: none;
	top: 0;
}

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

#nav li.over ul {
	left: 0;
}

и замените на

#nav li.over ul {
	display: block;
	left: 0;
}

Обратно в Шаблон Пластик


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

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

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