Отключен JavaScript

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

5

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

Автор MariG, 16 марта 2011 22:40

Авторизуйтесь для ответа в теме

Сообщений в теме: 545

#461 pin

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

Пользователи
71 сообщений

ГородМосква

Отправлено 17 Февраль 2014 - 18:26

Vaccina (15 Февраль 2014 - 04:11) писал:

в main.css найдите:

#nav li.over ul {
left: 200px;
}

замените на:

#nav li.over ul {
left: 0px;
top: 45px;
}

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

#nav ul li {
border-bottom: 1px solid #FFFFFF;
float: none;
}

замените на:


#nav ul li {


	background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
	border: medium none;
	float: none;
	width: 100%;
}

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

#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 {
background: url("http://www.airfresh.ru/images/main_menu_bg.gif") repeat-x scroll 0 0 #2F8BBA;
border: 1px solid #020202;
display: inline-block;
text-align: center;
width: 33%;
}

Здравствуйте! Почти всё получилось спасибо! Подскажите мне пожалуйста как сделать горизонтальные подкатегории второго уровня а при наведении на подкатегорию например сплит системы, что-бы вертикально открывались подкатегории 3 - го уровня. У меня на сайте горизонтальный каталог. прилагаю фото как сейчас и как хотелось бы видеть. За ранее спасибо!

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

Наверх

#462 Vaccina

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

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

Отправлено 18 Февраль 2014 - 03:11

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

Наверх

#463 pin

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

Пользователи
71 сообщений

ГородМосква

Отправлено 18 Февраль 2014 - 10:35

Vaccina (18 Февраль 2014 - 03:11) писал:

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

Уважаемая Vaccina, огромное Вам спасибо! Вы мне очень помогайте. Я как понял Вы работаете только ночью и я успеваю вносить только одно изменения на сайт. Я попробую создать новую тему для завершения работы с каталогом. Если мне никто не поможет, буду Вам очень признателен если Вы посмотрите. СПАСИБО!

Наверх

#464 Ольга

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

Пользователи
96 сообщений

ГородМосква

Отправлено 24 Февраль 2014 - 11:23

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 стили для него, дабы не делать лишней работы

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

Здравствуйте! Я поэтапно сделала шаг 1 и шаг 2; в итоге получилось то, что мне не нужно вообще. (файл "окно"). Мне нужно верхнее меню с под категориями (файл "форум").

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

Наверх

#465 Сake

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

Модератоpы
5 979 сообщений

Отправлено 25 Февраль 2014 - 01:19

Судя по прикрепленным вами изображениям - вы хотите реализовать простое выпадающее меню. Инструкция которую вы используете вам не подойдет, так-как эта инструкция для каталога товаров, а у вас простое меню навигации. Необходимую вам инструкцию вы можете найти в следующих темах форума
http://forum.storela...еню/#entry37916
http://forum.storela...еню/#entry27791
http://forum.storela...еню/#entry73948

Наверх

#466 Flor@@

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

Пользователи
1 959 сообщений

Отправлено 27 Февраль 2014 - 10:26

Выпадающие подменю верхнего меню оба при разрешении экрана менее 959px в ширину, попадают под фотографии и картинки и слайдер и даже под тексты описаний на страницах, необходимо поправить z-index, Помогите, пожалуйста.

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

Сообщение отредактировал Flor@@: 27 Февраль 2014 - 10:29

Наверх

#467 Taisia

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

Модератоpы
1 289 сообщений

Отправлено 27 Февраль 2014 - 11:40

найдите в коде файла стилей код

@media only screen and (max-width: 959px) {
		#megamenu{display:block!important}
		.left-menu {width: 100%;}
}

и замените его на код

@media only screen and (max-width: 959px) {
		#megamenu{display:block!important}
		.left-menu {width: 100%;}
.content.container{z-index:0;}
.accordion_main{display:none;}
}

Наверх

#468 Flor@@

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

Пользователи
1 959 сообщений

Отправлено 27 Февраль 2014 - 11:52

Taisia (27 Февраль 2014 - 11:40) писал:

@media only screen and (max-width: 959px) {
	 #megamenu{display:block!important}
	 .left-menu {width: 100%;}
}

замените его на код

@media only screen and (max-width: 959px) {
	 #megamenu{display:block!important}
	 .left-menu {width: 100%;}
.content.container{z-index:0;}
.accordion_main{display:none;}
}

супер-пупер))))))))))))) спасибище!!!!!!!!!!!!!!!!

1. только при умееньшении ширины экрана до 865 пикселей, второе горизонтальное верхнее меню: глючит раздел Рекомендуем, начинает мигать при наведении..

2. как в самом верхнем меню (акк 245786) сделать так, чтобы названия категорий переносились по словам, скрин:

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

Наверх

#469 Ольга

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

Пользователи
96 сообщений

ГородМосква

Отправлено 27 Февраль 2014 - 15:12

Сake (25 Февраль 2014 - 01:19) писал:

Судя по прикрепленным вами изображениям - вы хотите реализовать простое выпадающее меню. Инструкция которую вы используете вам не подойдет, так-как эта инструкция для каталога товаров, а у вас простое меню навигации. Необходимую вам инструкцию вы можете найти в следующих темах форума
http://forum.storela...еню/#entry37916
http://forum.storela...еню/#entry27791
http://forum.storela...еню/#entry73948

Здравствуйте!
ПРОШТУДИРОВАЛА все присланные ссылки. Или вы издеваетесь, или просто отмахиваетесь? Я не нашла ничего по поводу шаблона "пластик" - это раз, а второе: в html в строке поиск я не могу найти ни одно из ключевых фраз.
<div class="containerin" id="top-menu">
<ul class="pad-box cont620" id="mainmenu">
{% FOR menu %}
{% FOR header %}
{% FOR links %}
<li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li>
{% ENDFOR %}
{% ENDFOR %}
{% ENDFOR %}
</ul>
<div class="clr"></div>
</div>
<!-- end Верхний блок ...
Вот так, начинать не знаю с чего.

Наверх

#470 Vaccina

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

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

Отправлено 28 Февраль 2014 - 04:38

Вам больше подойдет из 3х инструкций выше эта:
http://forum.storela...еню/#entry28263

Разница данного меню с шаблона сияния с вашим всего лишь в классах(через классы стилизуется меню), вам необходимо менять саму начинку:

{% FOR menu %}
{% FOR header %}
{% FOR links %}
<li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li>
{% ENDFOR %}
{% ENDFOR %}
{% ENDFOR %}

структура их одинакова.

Укажите пожалуйста номер аккаунта в своем профиле на форуме, чтобы его не приходилось искать и\или переспрашивать.

Наверх

#471 Flor@@

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

Пользователи
1 959 сообщений

Отправлено 28 Февраль 2014 - 09:14

супер-супер!!!!!!!!!!!!!!!
1. но только при уменьшении ширины экрана до 865 пикселей, во втором горизонтальном верхнем меню: глючит раздел "Рекомендуем", начинает мигать при наведении... акк20306

2. как в самом верхнем меню (акк 245786) сделать так, чтобы названия категорий переносились по словам, скрин:

Наверх

#472 Ольга

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

Пользователи
96 сообщений

ГородМосква

Отправлено 28 Февраль 2014 - 12:27

Vaccina (28 Февраль 2014 - 04:38) писал:

Вам больше подойдет из 3х инструкций выше эта:
http://forum.storela...еню/#entry28263

Разница данного меню с шаблона сияния с вашим всего лишь в классах(через классы стилизуется меню), вам необходимо менять саму начинку:

{% FOR menu %}
{% FOR header %}
{% FOR links %}
<li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li>
{% ENDFOR %}
{% ENDFOR %}
{% ENDFOR %}

структура их одинакова.

Укажите пожалуйста номер аккаунта в своем профиле на форуме, чтобы его не приходилось искать и\или переспрашивать.

Я уже самостоятельно разобралась в начинки Html (вас не дождалась), у меня получилось в шапке: главная, инфо и о нас. А мои рубрики исчезли. Это первое. И второе, я может рано восстановила версию обратно из бекапа, но сайт работает и работу нельзя прервать: я в main.css не смогла догадаться что именно искать. Я уже пробовала menuheader, но вообщем тщетно. SL168953. Не думала, что уже вторую неделю буду в стопоре!!!

Наверх

#473 sengun

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

Модератоpы
1 139 сообщений

ГородНижний Новгород

Отправлено 28 Февраль 2014 - 19:26

Ольга (28 Февраль 2014 - 12:27) писал:

Я уже самостоятельно разобралась в начинки Html (вас не дождалась), у меня получилось в шапке: главная, инфо и о нас. А мои рубрики исчезли. Это первое. И второе, я может рано восстановила версию обратно из бекапа, но сайт работает и работу нельзя прервать: я в main.css не смогла догадаться что именно искать. Я уже пробовала menuheader, но вообщем тщетно. SL168953. Не думала, что уже вторую неделю буду в стопоре!!!

Здравствуйте.
Мы внесли изменения на ваш сайт, сделали выпадающее подпункты на пункты меню "Вопрос-Ответ" и "Автосервис".
В шаблоне HTML замените в строках

						<li><a href="ссылка на страницу 1">Подпункт Вопрос-Ответ 1</a></li>
						<li><a href="ссылка на страницу 2">Подпункт Вопрос-Ответ 2</a></li>
						<li><a href="ссылка на страницу 3">Подпункт Вопрос-Ответ 3</a></li>

и

						<li><a href="ссылка на страницу 4">Подпункт Автосервис 1</a></li>
						<li><a href="ссылка на страницу 5">Подпункт Автосервис 2</a></li>
						<li><a href="ссылка на страницу 6">Подпункт Автосервис 3</a></li>

тексты "Подпункт Вопрос-Ответ n" на нужные названия подпунктов, а тексты "ссылка на страницу n" замените на ссылки на те страницы, которые должны открываться при нажатии на соответствующие пункты меню.

Наверх

#474 Ольга

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

Пользователи
96 сообщений

ГородМосква

Отправлено 03 Март 2014 - 14:50

sengun (28 Февраль 2014 - 19:26) писал:

Здравствуйте.
Мы внесли изменения на ваш сайт, сделали выпадающее подпункты на пункты меню "Вопрос-Ответ" и "Автосервис".
В шаблоне HTML замените в строках

					 <li><a href="ссылка на страницу 1">Подпункт Вопрос-Ответ 1</a></li>
					 <li><a href="ссылка на страницу 2">Подпункт Вопрос-Ответ 2</a></li>
					 <li><a href="ссылка на страницу 3">Подпункт Вопрос-Ответ 3</a></li>

и

					 <li><a href="ссылка на страницу 4">Подпункт Автосервис 1</a></li>
					 <li><a href="ссылка на страницу 5">Подпункт Автосервис 2</a></li>
					 <li><a href="ссылка на страницу 6">Подпункт Автосервис 3</a></li>

тексты "Подпункт Вопрос-Ответ n" на нужные названия подпунктов, а тексты "ссылка на страницу n" замените на ссылки на те страницы, которые должны открываться при нажатии на соответствующие пункты меню.

Благодарю!!!

Наверх

#475 мистка

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

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

ГородМосква

Отправлено 08 Апрель 2014 - 20:42

и еще вот как установить эти выпадающие подменю в каталоге ниже как на скрине
спасибо! каталог встал на место , есть только одна проблемка последний товар стоит ниже чем другие ни какие изменения размера шрифта не ставят его в один ряд как исправить Аккаунт SL-278833

Наверх

#476 Vaccina

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

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

Отправлено 09 Апрель 2014 - 03:27

В main.css найдите:

#nav li.over ul {
	left: 130px;
}

замените на:

#nav li.over ul {
	left: 0;
}

в какой категории, товар встает неровно?

Наверх

#477 мистка

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

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

ГородМосква

Отправлено 09 Апрель 2014 - 08:10

еще один вопрос самый последний какое место отвечает за подсветку когда категория уже нажате вот скрин

и как сделать закругление и рамочку и полоску разделитель довести до конца вот скрин

Сообщение отредактировал злая я))): 09 Апрель 2014 - 08:56

Наверх

#478 Castiel

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

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

ГородНижний Новгород

Отправлено 09 Апрель 2014 - 10:19

злая я))) (09 Апрель 2014 - 08:10) писал:

еще один вопрос самый последний какое место отвечает за подсветку когда категория уже нажате вот скрин Прикрепленный файл

1.png

и как сделать закругление и рамочку и полоску разделитель довести до конца вот скрин Прикрепленный файл

1.png

Здравствуйте,

1. Черный цвет при активном пункте меню
В файле "main.css".
Найти:

#nav ul li.active a, #nav ul li.over a {
color: #FFF !important;
background: #333333;
}

2. Полоска до конца
Находим

#nav ul li {
float: none;
border-bottom: 1px solid #fff;
}

Заменяем

#nav ul li {
float: none;
border-bottom: 1px solid #fff;
width: 100%;
}

3. Округление нижних границ
Находим

#nav ul {
position: absolute;
width: 15em;
top: 36px;
left: -10000px;
border: 0;
padding: 0;
background-color: #442d25;
background: rgba(255, 140, 105, 0.7);
font-size: 9px;
}

Заменяем

#nav ul {
position: absolute;
width: 15em;
top: 36px;
left: -10000px;
border: 0;
padding: 0;
background-color: #442d25;
background: rgba(255, 140, 105, 0.7);
font-size: 9px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}

Чтобы полоска у последнего элемента была закругленной, вам необходимо добавить к нему класс "nav-last" и стили для него в main.css

.nav-last {
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}

Чтобы сделать рамку такую как вы указали не скриншоте необходимо переделать все ваше меню и объединить главный пункт с его подпунктами.

Наверх

#479 мистка

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

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

ГородМосква

Отправлено 09 Апрель 2014 - 10:32

а можно просто как то удалить последнюю полоску?

Наверх

#480 мистка

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

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

ГородМосква

Отправлено 09 Апрель 2014 - 10:38

и при наведеннии выходит за край как сравнять

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

Наверх

Обратно в Вопросы общие для всех шаблонов

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

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

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

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

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

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

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

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

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

Войти

Google поиск