А Можно Поменять Верхнее Меню С Каталогом Местами

Добрый вечер!
Вопрос:
А можно поменять верхнее меню с каталогом товаров местами.
Очень хочется каталог в верхнее меню с раскрывающимся списком подкатегорий и подподкатегорий.
А меню верхнее сбоку, чтобы сбоку были контакты, доставка и тд и тп
Как показал опрос - это удобнее для покупателей

Пример простой и самый известный М-видео http://www.mvideo.ru/

Так удобно, что нет слов
А у нас еще покапаться надо, чтобы найти нужное


Заранее очень, благодарна

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

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

Изменить нужно шаблон "сияние"
Очень жду ответа.
Спасибо.
Осталось только воплотить в жизнь

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

Все разобралась. не надо

Не получается прописать третий уровень и четвертый помогите. И нужно сделать так, чтобы 3-ий уровень был виден не сразу, при наведении на 2-ой, а потом при условии наведения на определенную категорию. А то у меня выпадает все подряд

Можно еще один вопрос. Получается, что выплывающее меню наезжает на каталог товаров. Как это исправить?

А когда, кто-нибудь ответит на последние два вопроса? Про уровни и про наезжающее всплывающее меню на каталог.?????
Очень жду!!!

Кстати, при данном фиксированном меню каталога. Категории каталога, которые скрыты в бэк-офисе, все равно высвечиваются, что с ними делать, чтобы их не было видно на сайте?

Цитата

По поводу вашего вопроса - (наезжающее всплывающее меню на каталог) не совсем ясно что именно вы имеете в виду. Укажите пример( ваш сайт )
Скорее всего массив catalog_full обходит условие скрытия категории. что и подразумевает под собой название массива(catalog_full). так что думаю внятная реализация данного меню не получиться. ИМХО
Ну и если двигаться по вопросам то -
  
  Стилизация скрытия(раскрытия) происходит примерно след способом
  

   #nav li.level2 ul {
	display:none;
   }

   #nav li.level2:hover ul {
	 display:block;
   }
  

Vaccina (05 Апрель 2011 - 02:45) писал:

В этом массиве используется много переменных, в том числе и скрыта ли категория или нет:

{catalog_full.HIDE}

Для скрытия не угодных категорий модифицируем вышеуказанный 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%}
  <!-- /Каталог товаров -->

До вот такого:

  <!-- По моему этот класс был прописан не во всех дизайн-шаблонах, поэтому допишем его для удобства здесь -->
  <style>.hide {display:none;}</style>

  <!-- Каталог товаров -->
  {%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 %}
		{% IF catalog_full.HIDE %}hide{% 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%}
  <!-- /Каталог товаров -->

MariG (22 Март 2011 - 21:38) писал:

А на этот вопрос можете ответить. Заранее спасибо.


Спасибо за предыдущие ответы. Сделала, все получилось. Теперь скрытые категории не выявлены на сайте.

А что касается наезжающего всплывающего меню на меню каталога бокового вот ссылка сайта, посмотрите: http://3grushki.ru/c...РИНАДЛЕЖНОСТИ-1
Получается, что всплывающее меню закрывает главное меню, когда раскрывается

Отвечаю на вопрос

Цитата

Это можно сделать следующим образом
Редактируете свой файл стилей main.css

находите участок кода

  #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;}
 

Ниже вставляете

/* Скрываем по умолчанию 2й, 3й, 4й уровни */
ul li.level2, ul li.level3, ul li.level4 {
 display:none;
}
/* Отображаем 2й, 3й, 4й уровни */
ul li.level1:hover ul li.level2, ul li.level2:hover ul li.level3, ul li.level3:hover ul li.level4, ul li.level3:hover ul li.level4 {
 display:block;
}
/* 5й и последующие уровни... Можно писать таких стилей сколько угодно, до бесконечности... */
 

Добрый вечер!
Опять вернусь к данной теме.
Все прописала, все получилось. НО....
после того, как прописала последнее (про уровни). Опять стали видимыми категории каталога, которые  скрыты на сайте. Но не все, а только частично. И заметила это только сейчас.
Наверно,е что-то еще надо прописать уже к новому последнему коду.
Заранее спасибо

Попробуйте в шаблоне "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 %}
		{% IF catalog_full.HIDE %}hide{% 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%}
  <!-- /Каталог товаров -->

заменить на

 <!-- Каталог товаров -->
  {%IFNOT catalog_full_empty%}
	{%FOR catalog_full%}
	  {% IF catalog_full.FIRST %}<ul id="nav">{% ENDIF %}
	 {% IFNOT catalog_full.HIDE %}
	  <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>
		 {% ENDIF %} 
	  {% IF catalog_full.ISSET_SUB=0 %} {% IFNOT catalog_full.HIDE %} </li> {% ENDIF %} {% ENDIF %}
	  {% IF catalog_full.LAST %}{%FOR out%}</ul>{%IFNOT catalog_full.out.LAST%} {% IFNOT catalog_full.HIDE %} </li> {% ENDIF %} {%ENDIF%}{%ENDFOR%}{% ENDIF %}
	{%ENDFOR%}
  {%ENDIF%}
  <!-- /Каталог товаров -->

вышеуказанный код будет работать только в случае если в скрытых категориях нет вложенных категорий

Еще как вариант можно попробовать добавить в файл стилей

ul li.hide {
 display:none !important;
}

Поможите и мне!
Мне тоже нужно меню с многоуровневым подменю.
Сделал Шаг 2 и 3, а вот с 1-м шагом засада.
У меня в HTML коде не было таких строк, как в примере и я вставил кусок кода из 14 поста.
А вот дальше что делать не пойму.
Как создать через админку/сайт/настройка меню нужное подменю?
Посмотрите плз, что я делаю не так

Выше предполагалось, что много уровнем будет не меню навигации, а каталог товаров.

Vaccina (20 Май 2011 - 12:22) писал:

Понятно,  а возможно ли сделать меню многоуровневым, как у меня на сайте-эскизе http://voda-ogon.ru/Baikal.html

К сожалению такое меню не удастся реализовать.

Vaccina (20 Май 2011 - 20:38) писал:

А можно поинтересоваться, почему не получится? Если поменять каталог товаров местами с верхним меню, например, и сделать каталог с раскрывающимся меню. Такой вариант не возможен? Очень бы хотелось получить помощь в этой теме.