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


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


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

#541 Vaccina

Vaccina

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

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

Отправлено 29 Октябрь 2014 - 03:07

#nav li.over ul {
left: 200px;
}
замените на:
#nav li:hover ul {
left: 200px;
}

далее найдите:
.product {
	border: 1px solid #cdcdcd;
	display: inline-block;
	padding: 5px;
	position: relative;
	transition: all 0.5s linear 0s;
	vertical-align: top;
	width: 200px;
	z-index: 100;
}
замените на:
.product {
	border: 1px solid #cdcdcd;
	display: inline-block;
	padding: 5px;
	position: relative;
	transition: all 0.5s linear 0s;
	vertical-align: top;
	width: 200px;
	z-index: 1;
}


#542 Наталья11111

Наталья11111

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

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

Отправлено 30 Октябрь 2014 - 02:05

Добрый вечер!

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

Заранее благодарю

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

  • Безымянный.png
  • Безымянный1.png


#543 Vaccina

Vaccina

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

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

Отправлено 30 Октябрь 2014 - 03:40

на данный момент не обнаружила у вас стилей выпадающего каталога, в main.css добавьте обратно стили:
#nav{padding:0 0 32px 7px; margin:0; }
/* Все уровни */
#nav li { text-align:left; position:relative; }
#nav li:hover { 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 { white-space:nowrap; cursor:pointer; }
#nav li ul a span { white-space:normal; }
/* 1й уровень вложенности */
#nav li {}
#nav li a{font-weight:bold; color:#CDCDCD; line-height:normal;}
#nav li a:hover { color:#333333; }
#nav li:hover 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:hover a { color:#FFF !important; background:#333333; }
/* 3й и последующие уровни... Можно писать таких стилей сколько угодно, до бесконечности... */
#nav ul ul { top:0px; }
/* Видимое меню */
#nav li:hover ul { left:200px; }
#nav li:hover ul li.over ul { left:15em; }
#nav li:hover ul ul { left:-10000px; }
#nav li:hover .indent-class{margin-left:230px;}
/********** Navigation > */

и уже их можно изменять как шрифт, так фон и прочее

#544 m-ya-v

m-ya-v

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

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

Отправлено 27 Ноябрь 2014 - 15:25

Добрый день! помогите, как сделать всплывающее меню в шаблоне Сияние, здесь уже столько всего написано...я потерялась...Надо на сайте http://green-profie.ru/   верхнее меню: ландшафтный дизайн - надо, чтобы под ним открывались еще 4 вкладки, пример во вложении
Распишите, пожалуйста, что за чем и в каком месте надо поменять...

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

  • a9f5ca95992a.jpg


#545 Vaccina

Vaccina

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

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

Отправлено 04 Декабрь 2014 - 06:44

подробная инструкция по данному вопросу имеется на нашем форуме:
http://forum.storela...еню/#entry28263

#546 Koderhan

Koderhan

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

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

Отправлено 16 Июнь 2016 - 02:01

Просмотр сообщенияsupport (17 Март 2011 - 22:39) писал:

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

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

Есть ошибка в коде. id nav выводится много раз в цикле.




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

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