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


Как Сделать ,чтобы При Наведении Мышкой,на Категорию,раскладывалось На Производителей?

Автор spirit137, 08 апр. 2013 21:08

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

#61 Vaccina

Vaccina

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

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

Отправлено 26 Сентябрь 2014 - 22:41 

.cat_scroll > ul {
	height: 500px;
	overflow-y: scroll;
	width: 199px;
}
замените на:
.cat_scroll > ul {
	height: 500px;
	overflow-x: hidden;
	overflow-y: scroll;
	width: 199px;
}

далее найдите:
#nav .active.parent > ul {
	left: 0 !important;
	position: relative !important;
	top: 0 !important;
}
замените на:
#nav .active.parent > ul {
	height: auto;
	left: 0 !important;
	overflow: visible;
	position: relative !important;
	top: 0 !important;
}

#62 sotil

sotil

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

  • Пользователи
  • PipPipPipPip
  • 413 сообщений
  • ГородЕкатеринбург

Отправлено 26 Сентябрь 2014 - 22:49

Ещё подскажите, я настройки произвожу в опере, а мазила и ie отображают всё не так, например выпадающее меню каталога. в опере и хроме оно по верху вровень с активной категорией , мазила и IE показывают , что выше, как то можно добиться солидарности?

#63 Vaccina

Vaccina

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

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

Отправлено 27 Сентябрь 2014 - 05:06 

#nav li {
	position: relative;
	text-align: left;
}
замените на:
#nav li {
	display: block;
	position: relative;
	text-align: left;
}

далее найдите:
#nav ul {
	border: 0 none;
	font-size: 12px;
	left: -10000px;
	padding: 0;
	position: absolute;
	top: -17px;
	width: 199px;
}
замените на:
#nav ul {
	border: 0 none;
	font-size: 12px;
	left: -10000px;
	padding: 0;
	position: absolute;
	top: 0;
	width: 199px;
}

#64 sotil

sotil

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

  • Пользователи
  • PipPipPipPip
  • 413 сообщений
  • ГородЕкатеринбург

Отправлено 27 Сентябрь 2014 - 19:02

Просмотр сообщенияVaccina (27 Сентябрь 2014 - 05:06) писал:

#nav li {
position: relative;
text-align: left;
}
замените на:
#nav li {
display: block;
position: relative;
text-align: left;
}

далее найдите:
#nav ul {
border: 0 none;
font-size: 12px;
left: -10000px;
padding: 0;
position: absolute;
top: -17px;
width: 199px;
}
замените на:
#nav ul {
border: 0 none;
font-size: 12px;
left: -10000px;
padding: 0;
position: absolute;
top: 0;
width: 199px;
}

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

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

  • фоны меню.png

#65 Danil

Danil

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

  • Пользователи
  • PipPipPipPip
  • 4 645 сообщений

Отправлено 27 Сентябрь 2014 - 19:37

Просмотр сообщенияsotil (27 Сентябрь 2014 - 19:02) писал:

Теперь надо убрать фон меню как на картинке.
И полоски разделяющие категории расширились, можно ли их сузить?
В main.css найдите 
.parent.active {
color: #ffffff;
background: #000000;
}

.level1 {
color: #7d7d7d !important;
 background: #dedede; 
}

.level2 {
color: #515151 !important;
 background: #E8E8E8; 
}
Во всех найденных кодах удалите background

#66 sotil

sotil

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

  • Пользователи
  • PipPipPipPip
  • 413 сообщений
  • ГородЕкатеринбург

Отправлено 27 Сентябрь 2014 - 21:22

Подскажите , как сделать чтобы доступная при активной 3ей вложенности 4я вложенность отображалась в дереве каталога,

#67 Vaccina

Vaccina

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

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

Отправлено 30 Сентябрь 2014 - 00:13

В main.css найдите:
#nav .active.parent > ul {
	height: auto;
	left: 0 !important;
	overflow: visible;
	position: relative !important;
	top: 0 !important;
}
замените на:
#nav .active.parent > ul {
	display: block;
	height: auto;
	left: 0 !important;
	overflow: visible;
	position: relative !important;
	top: 0 !important;
}

#68 Rebvjd

Rebvjd

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

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

Отправлено 11 Ноябрь 2014 - 21:52

Просмотр сообщенияmikola (08 Апрель 2013 - 21:29) писал:

В принципе это сделать можно с помощью каталога категорий выводимых вместо массива "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 > */

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

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

  • Новый рисунок (16).jpg

#69 Vaccina

Vaccina

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

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

Отправлено 12 Ноябрь 2014 - 03:04

В шаблоне HTML найдите:
<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.LEVEL>0%}incat{% ENDIF %}
						 {% IF catalog_full.CURRENT %}active fnt12b {% ELSEIF catalog_full.CURRENT_PARENT %}fnt12b 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%}


В main.js добавьте идентичный по инструкции код, а в main.css:
#nav{padding:0 0 32px 7px; margin:0; font-size:20px;}/* Все уровни */
#nav li { position:relative; }
#nav li.over { z-index:999; }
#nav li.parent {}
#nav li a { display:block; text-decoration:none; }
#nav li a span { display:block; cursor:pointer; }
#nav li ul a span { white-space:normal; }
/* 1й уровень вложенности */
#nav li {}
#nav li a{padding:0 0 0; line-height:normal;}
/* 2й уровень вложенности */
#nav ul { position:absolute; width:15em; top:0px; left:-10000px; border:0; padding:0; background:#fff; font-size:12px;}
/* 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 > */

#70 Rebvjd

Rebvjd

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

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

Отправлено 12 Ноябрь 2014 - 22:18

Просмотр сообщенияVaccina (12 Ноябрь 2014 - 03:04) писал:

В шаблоне HTML найдите:
<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.LEVEL>0%}incat{% ENDIF %}
						 {% IF catalog_full.CURRENT %}active fnt12b {% ELSEIF catalog_full.CURRENT_PARENT %}fnt12b 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%}


В main.js добавьте идентичный по инструкции код, а в main.css:
#nav{padding:0 0 32px 7px; margin:0; font-size:20px;}/* Все уровни */
#nav li { position:relative; }
#nav li.over { z-index:999; }
#nav li.parent {}
#nav li a { display:block; text-decoration:none; }
#nav li a span { display:block; cursor:pointer; }
#nav li ul a span { white-space:normal; }
/* 1й уровень вложенности */
#nav li {}
#nav li a{padding:0 0 0; line-height:normal;}
/* 2й уровень вложенности */
#nav ul { position:absolute; width:15em; top:0px; left:-10000px; border:0; padding:0; background:#fff; font-size:12px;}
/* 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 > */
Здравствуйте. Применил этот код на аккаунте SL-256522 Но каталог не открывается Посмотрите пожалуйста http://v-puteshestvi...dlya-dokumentov

#71 Vaccina

Vaccina

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

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

Отправлено 13 Ноябрь 2014 - 01:18

немного не доредактировала
#nav{padding:0 0 32px 7px; margin:0; font-size:20px;}/* Все уровни */
#nav li { position:relative; }
#nav li.over { z-index:999; }
#nav li.parent {}
#nav li a { display:block; text-decoration:none; }
#nav li a span { display:block; cursor:pointer; }
#nav li ul a span { white-space:normal; }
/* 1й уровень вложенности */
#nav li {}
#nav li a{padding:0 0 0; line-height:normal;}
/* 2й уровень вложенности */
#nav ul { position:absolute; width:15em; top:0px; left:-10000px; border:0; padding:0; background:#fff; font-size:12px;}
/* 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 > */
замените на:
#nav{padding:0 0 32px 7px; margin:0; font-size:20px;}/* Все уровни */
#nav li { position:relative; }
#nav li:hover { z-index:999; }
#nav li.parent {}
#nav li a { display:block; text-decoration:none; }
#nav li a span { display:block; cursor:pointer; }
#nav li ul a span { white-space:normal; }
/* 1й уровень вложенности */
#nav li {}
#nav li a{padding:0 0 0; line-height:normal;}
/* 2й уровень вложенности */
#nav ul { position:absolute; width:15em; top:0px; left:-10000px; border:0; padding:0; background:#fff; font-size:12px;}
/* 3й и последующие уровни... Можно писать таких стилей сколько угодно, до бесконечности... */
#nav ul ul { top:0px; }
/* Видимое меню */
#nav li:hover ul { left:200px; }
#nav li:hover ul li:hover ul { left:15em; }
#nav li:hover ul ul { left:-10000px; }
#nav li:hover .indent-class{margin-left:230px;}
/********** Navigation > */

далее в main.css найдите:
#left .block .navigation ul li, #right .block .navigation ul li {
	overflow: hidden;
	width: 223px;
}
замените на:
#left .block .navigation ul li, #right .block .navigation ul li {
	width: 223px;
}

#72 Rebvjd

Rebvjd

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

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

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

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

немного не доредактировала
#nav{padding:0 0 32px 7px; margin:0; font-size:20px;}/* Все уровни */
#nav li { position:relative; }
#nav li.over { z-index:999; }
#nav li.parent {}
#nav li a { display:block; text-decoration:none; }
#nav li a span { display:block; cursor:pointer; }
#nav li ul a span { white-space:normal; }
/* 1й уровень вложенности */
#nav li {}
#nav li a{padding:0 0 0; line-height:normal;}
/* 2й уровень вложенности */
#nav ul { position:absolute; width:15em; top:0px; left:-10000px; border:0; padding:0; background:#fff; font-size:12px;}
/* 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 > */
замените на:
#nav{padding:0 0 32px 7px; margin:0; font-size:20px;}/* Все уровни */
#nav li { position:relative; }
#nav li:hover { z-index:999; }
#nav li.parent {}
#nav li a { display:block; text-decoration:none; }
#nav li a span { display:block; cursor:pointer; }
#nav li ul a span { white-space:normal; }
/* 1й уровень вложенности */
#nav li {}
#nav li a{padding:0 0 0; line-height:normal;}
/* 2й уровень вложенности */
#nav ul { position:absolute; width:15em; top:0px; left:-10000px; border:0; padding:0; background:#fff; font-size:12px;}
/* 3й и последующие уровни... Можно писать таких стилей сколько угодно, до бесконечности... */
#nav ul ul { top:0px; }
/* Видимое меню */
#nav li:hover ul { left:200px; }
#nav li:hover ul li:hover ul { left:15em; }
#nav li:hover ul ul { left:-10000px; }
#nav li:hover .indent-class{margin-left:230px;}
/********** Navigation > */

далее в main.css найдите:
#left .block .navigation ul li, #right .block .navigation ul li {
overflow: hidden;
width: 223px;
}
замените на:
#left .block .navigation ul li, #right .block .navigation ul li {
width: 223px;
}
Вы наверное не правильно меня поняли, я хочу чтобы у меня подкатегории открывались не в бок, а в низ. Пишу еще раз, меню меня полностью устраивает, но для удобства(и чтобы клиент понимал, что есть подкатегории товаров) я хочу дополнить: чтобы эти подкатегории открывались в низ - при наведении мышкой на категорию. Все остальное оставить как сейчас(и самое главное: находясь в подкатегории, они должны быть открытыми для лучшей навигации).
Изменения буду делать в аккаунте SL-182616 , примеряю сдесь: Аккаунт SL-256522

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

  • Новый рисунок (16).jpg

#73 Alekseys

Alekseys

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

  • Пользователи
  • PipPipPipPip
  • 2 355 сообщений

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

Просмотр сообщенияRebvjd (13 Ноябрь 2014 - 21:09) писал:

Вы наверное не правильно меня поняли, я хочу чтобы у меня подкатегории открывались не в бок, а в низ. Пишу еще раз, меню меня полностью устраивает, но для удобства(и чтобы клиент понимал, что есть подкатегории товаров) я хочу дополнить: чтобы эти подкатегории открывались в низ - при наведении мышкой на категорию. Все остальное оставить как сейчас(и самое главное: находясь в подкатегории, они должны быть открытыми для лучшей навигации).
Изменения буду делать в аккаунте SL-182616 , примеряю сдесь: Аккаунт SL-256522
Здравствуйте. В main.css замените
#nav li:hover ul {
left: 200px;
}
на
#nav li:hover ul {
left: 0;
top: 45px;
}
и
#left .block .navigation ul li a, #right .block .navigation ul li a {
padding: 4px 5px 5px 25px;
display: block;
color: #bf998f;
line-height: 18px;
overflow: hidden;
}
замените на
#left .block .navigation ul li a, #right .block .navigation ul li a {
padding: 4px 5px 5px 25px;
display: block;
color: #bf998f;
line-height: 18px;
overflow: hidden;
height: 2em;
}

Обратно в Главная


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

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

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