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


Всплывающее Меню Каталога Слева

Автор MariG, 15 апр. 2015 12:01

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

#1 MariG

MariG

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

  • Пользователи
  • PipPipPip
  • 174 сообщений
  • ГородМосква

Отправлено 15 Апрель 2015 - 12:01

Добрый день! как сделать всплывающее меню каталога слева Шаблон Движение.
До этого были темы , как это сделать в верхнем горизонтальном меню.
А мне нужно в каталоге слева.

спасибо

#2 Ирина345

Ирина345

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

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

Отправлено 15 Апрель 2015 - 13:34

Просмотр сообщенияMariG (15 Апрель 2015 - 12:01) писал:

Добрый день! как сделать всплывающее меню каталога слева Шаблон Движение.
До этого были темы , как это сделать в верхнем горизонтальном меню.
А мне нужно в каталоге слева.

спасибо
Здравствуйте, воспользуйтесь данной инструкцией для вашего шаблона
http://forum.storela...аблон-движение/

#3 MariG

MariG

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

  • Пользователи
  • PipPipPip
  • 174 сообщений
  • ГородМосква

Отправлено 15 Апрель 2015 - 15:10

эту инструкцию , я уже читала. Она не подходит, она для горизонтального меню. А мне нужно для меню слева. вертикального. Спасибо

#4 ogonek7777

ogonek7777

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

  • Пользователи
  • PipPipPipPip
  • 2 109 сообщений
  • ГородМосква

Отправлено 27 Сентябрь 2016 - 16:24

дд, прошу ответить на этот вопрос, мне актуально, спасибо

#5 Firefly

Firefly

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

  • Модераторы
  • 3 810 сообщений

Отправлено 27 Сентябрь 2016 - 17:51

Просмотр сообщенияogonek7777 (27 Сентябрь 2016 - 16:24) писал:

дд, прошу ответить на этот вопрос, мне актуально, спасибо

Здравствуйте.
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> style.css, найдите код:
/* Меню-аккордеон */
.block2 {margin-bottom: 20px;background: #fff;border-left: 1px solid #efefef;border-right: 1px solid #efefef;float:left;position: relative;width: 210px;}
.block2 .block-title {padding: 6px 18px;color: #40383b;text-transform: none;background: #fff;border: 1px solid #c0c0c0;*border-top: 2px solid #c0c0c0;*border-left: 1px solid #c0c0c0;*border-right: 1px solid #c0c0c0;*border-bottom: 1px solid #c0c0c0;position: relative;display: block;}
.block2 .block-content {padding: 14px 18px;color: #727272;border-top: 0px;border-bottom: 1px solid #E9E9E9;background: #fff;float:left;*float: none;border: 1px solid #c0c0c0;position: relative;display: block;}
.accordion { list-style-type: none;position: relative;/*  display: block;*/ }
.accordion ul { padding: 0 !important; margin: 0; display: block; width: 100%;position: relative;overflow: hidden !important;}
.accordion li { background: #fff; cursor: pointer; list-style-type: none; padding: 0; margin: 0;*float: none; display: block; width: 100%; position:relative;}
.accordion em.open-close{background: url("{ASSETS_IMAGES_PATH}menu_right_arrow.png?design=movement") no-repeat center center; padding: 7px 6px; position:absolute; left:0; top:0;width: 6px;height:19px;}
.accordion li.active> em.open-close { background: url("{ASSETS_IMAGES_PATH}menu_down_arrow.png?design=movement") no-repeat center center; width: 10px;}
.accordion li ul li ul {padding-left: 13px;}
.accordion li ul li ul + em.open-close {margin-left: 13px;}
.accordion li ul li ul li ul + em.open-close {margin-left: 26px;}
.accordion li ul li ul li ul li ul + em.open-close {margin-left: 39px;}
.accordion li div { padding: 20px; background: #aef; display: block; clear: both; float: left; width: 360px;}
.accordion li.last a{border-bottom:0px;}
.accordion a { text-decoration: none; border-bottom: 1px solid #eeece7; font-size:12px; font-weight:700; text-transform:none; padding: 8px 10px 8px 20px; display: block; cursor: pointer; }
.accordion ul a{font-size:12px; padding: 8px 10px 8px 35px;background: #eee;}
.accordion ul ul li a {font-size:12px; padding: 8px 10px 8px 45px;background: #ddd;}
.accordion ul ul ul li a {font-size:12px; padding: 8px 10px 8px 60px;background: #ccc;}  
.accordion ul ul ul ul li a {font-size:12px; padding:8px 10px 8px 70px;background: #bbb;}
.accordion li ul li { background: #fff; }/* This is the moving lens square underneath the mouse pointer. */
.accordion a.selected {background: #aaa;}
/* END Меню-аккордеон */

Замените на:
/* Меню-аккордеон */
.block2 {margin-bottom: 20px;background: #fff;border-left: 1px solid #efefef;border-right: 1px solid #efefef;float:left;position: relative;width: 210px;}
.block2 .block-title {padding: 6px 18px;color: #40383b;text-transform: uppercase;background: #fff;border: 1px solid #c0c0c0;*border-top: 2px solid #c0c0c0;*border-left: 1px solid #c0c0c0;*border-right: 1px solid #c0c0c0;*border-bottom: 1px solid #c0c0c0;position: relative;display: block;}
.block2 .block-content {padding: 14px 18px;color: #727272;border-top: 0px;border-bottom: 1px solid #E9E9E9;background: #fff;float:left;*float: none;border: 1px solid #c0c0c0;position: relative;display: block;}
.accordion {list-style-type: none;position: relative; }
.accordion ul { padding: 0 !important; margin: 33px; display: block; width: 100%;position: relative;overflow: hidden !important;}
.accordion li { background: #FFFFFF; cursor: pointer; list-style-type: none; padding: 0; margin: 0;*float: left;*margin-left: -16px; display: block; width: 100%; position:relative;}
.accordion li.active> em.open-close {background: #8B0000 -2px -32px no-repeat; }
.accordion li div { padding: 20px; background: #aef; display: block; clear: both; float: left; width: 360px;}
.accordion li.last a{border-bottom:0px;}
.accordion em.open-close{background: url("{ASSETS_IMAGES_PATH}menu_right_arrow.png?design=movement") no-repeat center center; padding: 7px 6px; position:absolute; right:0; top:0;width: 6px;height:19px;}
.accordion a { text-decoration: none; font-size:18px; padding: 8px 10px 8px 20px; display: block; cursor: pointer; }
.accordion ul a{font-size:14px; padding: 8px 28px 8px 25px;}
.accordion ul ul li a {font-size:13px; padding: 8px 10px 8px 40px;}
.accordion ul ul ul li a {font-size:11px; padding: 8px 10px 8px 50px;}
.accordion ul ul ul ul li a {font-size:10px; padding:8px 10px 8px 40px;}
.accordion li ul li { background: #fff; }
.box-category {margin-top:0;}
.box-category ul {list-style: none;margin: 0 -10px;padding: 0;font-size:12px;}
.box-category > ul > li {padding: 0;position: relative;}
.box-category > ul li:hover > ul{position: absolute;left: 207px; top: 0; display: block !important; z-index: 999; border: 1px solid #cdcdcd;}
.box-category > ul > li + li {border-top: 1px solid #EEEEEE;}
.box-category > ul > li > a {text-decoration: none;color: #333;padding: 10px 28px 10px 10px;display:block;transition: all 0.5s ease 0s;-webkit-transition: all 0.5s ease 0s;-ms-transition: all 0.5s ease 0s;-moz-transition: all 0.5s ease 0s;-o-transition: all 0.5s ease 0s;}
.box-category > ul > li > a:hover {color: #000;background-color:#eee;}
.box-category > ul > li ul {display: none;margin: 0;overflow: visible !important; padding-left: 20px; overflow-y:scroll;}
.box-category > ul > li a.active {font-weight: bold;}
.box-category > ul > li a.active + ul {display: block;padding:0 0 10px 10px;}
.box-category > ul > li ul > li {padding: 0;}
.box-category > ul > li ul > li > a {text-decoration: none;color:font-size 14px; #333;padding: 10px 28px 10px 10px;display:block;transition: all 0.5s ease 0s;-webkit-transition: all 0.5s ease 0s;-ms-transition: all 0.5s ease 0s;-moz-transition: all 0.5s ease 0s;-o-transition: all 0.5s ease 0s;}
.box-category > ul > li ul > li > a.active {font-weight: bold;}
.box-category > ul > li ul > li > a:hover {font-size 14px; color: #000;background-color:#eee;padding: 10px 28px 10px 20px}
/* END Меню-аккордеон */

В конце main.js добавьте код:
// Меню-аккардеон. Каталог
jQuery(document).ready(function () {
 
  jQuery("#catalogmenu ul.accordion li.parent").each(function() {
	var obj = jQuery(this)
   
	obj.append('<em class="open-close">&nbsp;</em>');
   
	obj.on('hover', function() {
	  var h = jQuery('#catalogmenu > div > div > ul.accordion');
	  var w = obj.children('ul');
	 
	  var h1 = parseInt(h.css('height'));
	  var h2 = parseInt(h.offset().top);
	  var hh = h1 + h2;
	  var w1 = parseInt(w.css('height'));
	  var w2 = parseInt(w.offset().top);
	  var ww = w1 + w2;
	 
	  if (ww > hh) {
		w.css('top', hh - ww);
	  }
	});
  });

jQuery('ul.accordion').accordion();
});

Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Шаблоны -> HTML, найдите код:
			  <div class="box-heading"><a href="{CATALOG_URL}">Каталог</a></div>
			  <div class="infoBoxContents">

Замените на:
			  <div class="box-heading"><a href="{CATALOG_URL}">Каталог</a></div>
			  <div class="infoBoxContents box-category">

#6 ogonek7777

ogonek7777

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

  • Пользователи
  • PipPipPipPip
  • 2 109 сообщений
  • ГородМосква

Отправлено 28 Сентябрь 2016 - 18:06

Спасибо, получилось не совсем так как хочется. Давайте попробуем по-другому,
надо так - при нажатии открывается подкаталог без обновления страницы http://truequery.ru/...deon/index.html

сайт

#7 Vaccina

Vaccina

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

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

Отправлено 29 Сентябрь 2016 - 04:00

Если дело в том, чтобы меню раскрывалось при наведении, то код в main.js:
// Меню-аккардеон. Каталог
jQuery(document).ready(function () {

  jQuery("#catalogmenu ul.accordion li.parent").each(function() {
		var obj = jQuery(this)
  
		obj.append('<em class="open-close">&nbsp;</em>');
  
		obj.on('hover', function() {
		  var h = jQuery('#catalogmenu > div > div > ul.accordion');
		  var w = obj.children('ul');
		
		  var h1 = parseInt(h.css('height'));
		  var h2 = parseInt(h.offset().top);
		  var hh = h1 + h2;
		  var w1 = parseInt(w.css('height'));
		  var w2 = parseInt(w.offset().top);
		  var ww = w1 + w2;
		
		  if (ww > hh) {
				w.css('top', hh - ww);
		  }
		});
  });
jQuery('ul.accordion').accordion();
});

замените на:
// Меню-аккардеон. Каталог
jQuery(document).ready(function () {

  jQuery("#catalogmenu ul.accordion li.parent").each(function() {
		var obj = jQuery(this)
  
		obj.append('<em class="open-close">&nbsp;</em>');
  
		obj.on('click', function() {
		  var h = jQuery('#catalogmenu > div > div > ul.accordion');
		  var w = obj.children('ul');
		
		  var h1 = parseInt(h.css('height'));
		  var h2 = parseInt(h.offset().top);
		  var hh = h1 + h2;
		  var w1 = parseInt(w.css('height'));
		  var w2 = parseInt(w.offset().top);
		  var ww = w1 + w2;
		
		  if (ww > hh) {
				w.css('top', hh - ww);
		  }
		});
  });
jQuery('ul.accordion').accordion();
});

#8 ogonek7777

ogonek7777

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

  • Пользователи
  • PipPipPipPip
  • 2 109 сообщений
  • ГородМосква

Отправлено 30 Сентябрь 2016 - 15:05

Здравствуйте, Вакцина, но мне бы хотелось поставить код на мой старый код, а не на этот непонятный))) Надо так: при нажатии каталога  раскрывается подкаталог, страница не обновляется и не убегает вверх

И еще что это за такой странный код русскими буквами? вроде бы у нас все латиницей? По крайней мере, у меня есть несовпадения с моим теперешним кодом

#9 Vaccina

Vaccina

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

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

Отправлено 01 Октябрь 2016 - 02:34

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

#10 ogonek7777

ogonek7777

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

  • Пользователи
  • PipPipPipPip
  • 2 109 сообщений
  • ГородМосква

Отправлено 03 Октябрь 2016 - 16:09

Просмотр сообщенияVaccina (01 Октябрь 2016 - 02:34) писал:

При правильной обработке скрипта страница не должна ни обновляться, ни подпрыгивать, если происходит подобное, значит ошибка, код на латинице, скорее всего плагин вашего браузера начал автоматически переводить текст, попробуйте его отключить.
хорошо, спасибо, вы правы насчет перевода. Но мы не поняли друг друга, возможно я не понятно выразилась :
1. после изменения кода так и осталось меню второго уровня , выскакивающее справа. А я прошу оставить как в оригинале - меню  2го и следующих уровней открывается ниже, а не сбоку.
2. слетели стили главного каталога

#11 Vaccina

Vaccina

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

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

Отправлено 07 Октябрь 2016 - 05:09

Простите за ожидание, уточните пожалуйста, вопрос еще актуален?

#12 ogonek7777

ogonek7777

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

  • Пользователи
  • PipPipPipPip
  • 2 109 сообщений
  • ГородМосква

Отправлено 08 Октябрь 2016 - 12:19

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

Простите за ожидание, уточните пожалуйста, вопрос еще актуален?
да очень

#13 Stasya

Stasya

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

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

Отправлено 10 Октябрь 2016 - 14:15

Просмотр сообщенияogonek7777 (08 Октябрь 2016 - 12:19) писал:

да очень

Может я Вас не правильно понимаю, но каталог на Вашем сайте у нас сейчас отображается так как на скриншоте. Т.е. меню 2го уровня открывается ниже.

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

  • Screenshot_8.jpg

#14 ogonek7777

ogonek7777

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

  • Пользователи
  • PipPipPipPip
  • 2 109 сообщений
  • ГородМосква

Отправлено 10 Октябрь 2016 - 19:02

Просмотр сообщенияogonek7777 (28 Сентябрь 2016 - 18:06) писал:

надо так - при нажатии открывается подкаталог без обновления страницы http://truequery.ru/...deon/index.html

сайт

Просмотр сообщенияStasya (10 Октябрь 2016 - 14:15) писал:

Может я Вас не правильно понимаю, но каталог на Вашем сайте у нас сейчас отображается так как на скриншоте. Т.е. меню 2го уровня открывается ниже.

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

#15 Stasya

Stasya

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

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

Отправлено 11 Октябрь 2016 - 14:56

Просмотр сообщенияogonek7777 (10 Октябрь 2016 - 19:02) писал:

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

Функционал данного каталога подразумевает, что при клике по названию категории происходит переход в данную категорию, а при клике по стрелочке происходит раскрытие подкатегорий. Если Вы хотите убрать переход в категорию то Вам необходимо в файле forall.js найти блок 
jQuery.each(jQueryul.find('em.open-close'), function(){
	 jQuery(this).click(function(e){
	 activate(this, activationEffect);
	 return void(0);
	 });
и замените его на 
jQuery.each(jQueryul.find('.open-close'), function(){
	 jQuery(this).click(function(e){
	 event.preventDefault()
	 activate(this, activationEffect);
	 return void(0);
	 });
Далее в шаблоне HTML найдите строку 
<a href="{catalog_full.URL}" {% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}>{catalog_full.NAME}</a>
и замените ее на 
 <a href="{catalog_full.URL}" class="{% IF catalog_full.ISSET_SUB %}open-close{% ENDIF %} {% IF catalog_full.CURRENT %}selected{% ENDIF %}">{catalog_full.NAME}</a>

#16 ogonek7777

ogonek7777

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

  • Пользователи
  • PipPipPipPip
  • 2 109 сообщений
  • ГородМосква

Отправлено 13 Октябрь 2016 - 13:37

Просмотр сообщенияStasya (11 Октябрь 2016 - 14:56) писал:

Функционал данного каталога подразумевает, что при клике по названию категории происходит переход в данную категорию, а при клике по стрелочке происходит раскрытие подкатегорий. Если Вы хотите убрать переход в категорию то Вам необходимо в файле forall.js найти блок 
jQuery.each(jQueryul.find('em.open-close'), function(){
	 jQuery(this).click(function(e){
	 activate(this, activationEffect);
	 return void(0);
	 });
и замените его на 
jQuery.each(jQueryul.find('.open-close'), function(){
	 jQuery(this).click(function(e){
	 event.preventDefault()
	 activate(this, activationEffect);
	 return void(0);
	 });
Далее в шаблоне HTML найдите строку 
<a href="{catalog_full.URL}" {% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}>{catalog_full.NAME}</a>
и замените ее на 
<a href="{catalog_full.URL}" class="{% IF catalog_full.ISSET_SUB %}open-close{% ENDIF %} {% IF catalog_full.CURRENT %}selected{% ENDIF %}">{catalog_full.NAME}</a>
Супер! Я абсолютно счастлива!))

#17 ogonek7777

ogonek7777

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

  • Пользователи
  • PipPipPipPip
  • 2 109 сообщений
  • ГородМосква

Отправлено 16 Октябрь 2016 - 16:44

-

#18 Stasya

Stasya

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

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

Отправлено 17 Октябрь 2016 - 10:05

Просмотр сообщенияogonek7777 (16 Октябрь 2016 - 16:44) писал:

-

Скажите, пожалуйста, у Вас еще остались какие либо вопросы?

#19 ogonek7777

ogonek7777

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

  • Пользователи
  • PipPipPipPip
  • 2 109 сообщений
  • ГородМосква

Отправлено 17 Октябрь 2016 - 13:40

Просмотр сообщенияStasya (17 Октябрь 2016 - 10:05) писал:

Скажите, пожалуйста, у Вас еще остались какие либо вопросы?
СПС решила откатом)
Обратно в Каталог товаров


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

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

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