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

жду ответа на сообщение №442.

ак. 20306

Вставил код выпадающего каталога http://f2296.storeland.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 стили для него, дабы не делать лишней работы  

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

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

Вам нужно сделать меню с выпадающими подпунктами?
В том сообщении, что выше прокомментировали Вы написано, что

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

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

Вам нужно сделать меню с выпадающими подпунктами?
В том сообщении, что выше прокомментировали Вы написано, что

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

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

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

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

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

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

а зачем вы второе меню сделали горизонтальное? Мы будем стилизовать выпадающее.
В шаблоне 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%}	
<!-- /Каталог товаров -->

и перенесите, поставив перед:

<div id="contentWrap">
<div id="content">

<table id="contentMainTb">
	 <tr>

далее заходим в main.css находим:

#nav li {
}

замените на:

#nav li {
background: url("http://www.airfresh.ru/images/main_menu_bg.gif") repeat-x scroll 0 0 #2F8BBA;
border: 1px solid #020202;
display: inline-block;
}

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

#nav li a {
color: #2F8BBA;
font-weight: bold;
line-height: normal;
padding: 0;
}

замените на:

#nav li a {
color: #FFFFFF;
font-weight: bold;
line-height: normal;
padding: 10px 20px;
text-decoration: underline;
}

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