Отключен JavaScript

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

Выпадающее Меню- Каталог Шаблон Движение

Автор Dimon74, 23 окт. 2014 23:23

выпадающее меню горизонтальное меню горизонтальный каталог

Вперед

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

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

#1 Dimon74

Новичок

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

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

Здравствуйте, умные люди, очень нужно установить горизонтальный раскрывающийся каталог как тут http://www.nadommebel.com/ На протяжении недели перерыл все ветки форума, но ничего не подходит для шаблона Движение, на шаблоне сияние получалось установить меню
Огромная при ОГРОМНАЯ просьба детально описать все шаги, а не тыкать по старым темам, как тут http://forum.storela...ch__1#entry2072 или здесь http://forum.storela...ео/#entry79725. Для вас может это элементарно, а мне самому не разобраться
Основные моменты
1) Сам код меню
2)При наведении курсора на кнопку все товары, раскрывается меню каталог с подкатегориями
3) При нажатии на каталог отображается полный список
Очень надеюсь на доходчивый ответ, заранее спасибо.

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

Наверх

#2 Vaccina

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

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

Отправлено 24 Октябрь 2014 - 01:47

В шаблоне HTML после:

   <!-- Верхний блок навигации -->
			<div class="menu_block_dropdown">
			  <div class="et_categ_box">
				<div id="et_categ_box_scroll">
				  <div class="img_link_wrapper"><a class="image-link" href="http://{NET_DOMAIN}/"></a></div>
				  {% FOR menu %}
					{% FOR header %}
					  {% FOR links %}
						 <div class="cat-name"><a href="{menu.header.links.URL}" class="main_category {% IF menu.header.links.SELECTED %}selected{%ENDIF%}" {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></div>
					  {% ENDFOR %}
					{% ENDFOR %}
				  {% ENDFOR %}
				</div> 
			  </div>
			</div>
			<!-- end Верхний блок навигации -->

вставьте:

<!-- Выпадающий каталог -->
			<div class="menu_block_dropdown mainmenu">
			  <div class="et_categ_box">
				<div id="et_categ_box_scroll">
	  {%IFNOT catalog_full_empty%}
	  {%FOR catalog_full%}
	   {% IF catalog_full.FIRST %}<ul class="nav">{% ENDIF %}
								 <li class="cat-name
												 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 class="main_category" 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> 
			  </div>
			</div>
			<!-- end Выпадающий каталог -->

в самый конец main.css вставьте:

.mainmenu {
	clear: both;
}
.mainmenu .nav li {
	position: relative;
}
.mainmenu .nav ul {
	display: none;
	position: absolute;
	left: 0;
	top: 47px;
	background: #000;
	width: 200px;
}
.mainmenu .nav li:hover > ul {
	display: block;
}
.mainmenu .nav ul li a {
	display: block;
	width: auto;
}
.mainmenu .nav ul li {
	float: none;
}
.mainmenu .nav ul ul {
	left: 200px;
	top: 0;
}
.mainmenu .nav ul ul ul {
	left: 400px;
	top: 0;
}

Наверх

#3 Dimon74

Новичок

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

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

Большое спасибо, то что надо.
Как сделать, что бы подкатегории отображались не на "родительском" уровне, а с верха нового столбика.

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

Наверх

#4 Ирина345

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

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

Отправлено 24 Октябрь 2014 - 16:26

Dimon74 (24 Октябрь 2014 - 07:57) писал:

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

Наверх

#5 Vaccina

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

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

Отправлено 25 Октябрь 2014 - 01:00

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

.cat-name, .sub-cat-name, .subsub-cat-name {
	display: block;
	float: left;
	left: 0;
	position: relative;
	top: 0;
}

замените на:

.cat-name, .sub-cat-name, .subsub-cat-name {
	display: block;
	float: left;
	left: 0;
	top: 0;
}

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

.mainmenu .nav li {
	position: relative;
}

замените на:

.mainmenu .nav:first-child > li {
	position: relative;
}

Наверх

#6 Dimon74

Новичок

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

Отправлено 27 Октябрь 2014 - 10:42

Спасибо, уже почти рядом.

1)Теперь надо что бы дочерний элемент( подкатегория) выводилась не одной строчкой, а целым блоком по высоте родителя, или набором блоков. Чтобы при переходе от нижней строчки в категории меню не закрывалось. как вот тут http://www.nadommebel.com/

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

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

Наверх

#7 Vaccina

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

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

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

1. Как вариант, задать спискам одинаковую высоту, в style.css находим:

.mainmenu .nav ul {
	background: none repeat scroll 0 0 #000;
	display: none;
	left: 0;
	position: absolute;
	top: 47px;
	width: 200px;
}

изменяем на:

.mainmenu .nav ul {
	background: none repeat scroll 0 0 #000;
	display: none;
	height: 450px;
	left: 0;
	position: absolute;
	top: 47px;
	width: 200px;
}

2.В style.css найдите:

.promo_block {
	background: #778899;
	top: -45px !important;
}

замените на:

.promo_block {
	background: rgba(119, 136, 153, 0.5);
	top: -45px !important;
}

подобное изменение проделать и со сл.блоком стилей:

.nav-container {
	background: #778899;
	bottom: 0;
	display: block;
	float: left;
	margin-bottom: 0;
	position: relative;
	width: 100%;
}

Наверх

#8 Дикий ангел

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

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

Отправлено 28 Октябрь 2014 - 11:21

Перестал отображаться 3 уровень выпадающего меню. Что делать?

Наверх

#9 Дикий ангел

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

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

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

Жду ответа

Наверх

#10 Дикий ангел

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

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

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

Подскажите, как сделать подкатегории в 2 столбика? а то вниз очень далеко листать

Наверх

#11 Danil

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

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

Отправлено 28 Октябрь 2014 - 16:22

Дикий ангел (28 Октябрь 2014 - 16:03) писал:

Подскажите, как сделать подкатегории в 2 столбика? а то вниз очень далеко листать

В style.css найдите код

#nav ul {
position: absolute;
width: 15em;
top: 0px;
left: -10000px;
border: 0;
padding: 0;
background: #B2B2B2;
font-size: 12px;
margin-left: 67px;
}

замените на

#nav ul {
position: absolute;
width: 30em;
top: 0px;
left: -10000px;
border: 0;
padding: 0;
background: #B2B2B2;
font-size: 12px;
margin-left: 67px;
}

так же найдите

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

замените на

#nav ul li {
float: left;
border-bottom: 1px solid #FFF;
width:50%;
}

Наверх

#12 Дикий ангел

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

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

Отправлено 28 Октябрь 2014 - 16:42

Получилось! Но что мне делать с 3 уровнем каталога? он отображается некорректно:
1. на него не получается перейти, его наверно ближе надо перенести влево или что с ним делать?
2. выходит не весь список, на данный момент должно было открыться 15 подкатегорий вместо двух
http://st.miravtodop...en_kataloga.jpg

Наверх

#13 Alekseys

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

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

Отправлено 28 Октябрь 2014 - 16:56

Дикий ангел (28 Октябрь 2014 - 16:42) писал:

Здравствуйте. В style.css замените

#nav li.over ul li.over ul {
left: 15em;
}

на

#nav li.over ul li.over ul {
left: 9em;
}

Наверх

#14 Дикий ангел

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

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

Отправлено 28 Октябрь 2014 - 17:37

Alekseys (28 Октябрь 2014 - 16:56) писал:

Здравствуйте. В style.css замените

#nav li.over ul li.over ul {
left: 15em;
}

на

#nav li.over ul li.over ul {
left: 9em;
}

Не помогло

Наверх

#15 Danil

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

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

Отправлено 28 Октябрь 2014 - 20:50

Дикий ангел (28 Октябрь 2014 - 17:37) писал:

Не помогло

Изменения произвели, проверьте пожалуйста.

Наверх

#16 Dimon74

Новичок

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

Отправлено 28 Октябрь 2014 - 22:21

Vaccina (28 Октябрь 2014 - 05:26) писал:

1. Как вариант, задать спискам одинаковую высоту, в style.css находим:

.mainmenu .nav ul {
background: none repeat scroll 0 0 #000;
display: none;
left: 0;
position: absolute;
top: 47px;
width: 200px;
}

изменяем на:

.mainmenu .nav ul {
background: none repeat scroll 0 0 #000;
display: none;
height: 450px;
left: 0;
position: absolute;
top: 47px;
width: 200px;
}

2.В style.css найдите:

.promo_block {
background: #778899;
top: -45px !important;
}

замените на:

.promo_block {
background: rgba(119, 136, 153, 0.5);
top: -45px !important;
}

подобное изменение проделать и со сл.блоком стилей:

.nav-container {
background: #778899;
bottom: 0;
display: block;
float: left;
margin-bottom: 0;
position: relative;
width: 100%;
}

Большое Спасибо, все работает, молоды.
Еще вопросик.
При сене шаблона пропали хиты продаж и новинки, в html вроде код прописан

Наверх

#17 Дикий ангел

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

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

Отправлено 28 Октябрь 2014 - 22:27

Danil (28 Октябрь 2014 - 20:50) писал:

Изменения произвели, проверьте пожалуйста.

Все хорошо, огромное спасибо!

Наверх

#18 Dimon74

Новичок

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

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

Dimon74 (28 Октябрь 2014 - 22:21) писал:

Все уже не надо, сам разобрался

Наверх

#19 admin

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

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

ГородСамара

Отправлено 19 Январь 2015 - 19:50

Добрый день!
Понравился новый дизайн Сторленда, решил кое-что перенять.
Долго менял верхнее меню для разных разрешений экрана, вроде как сделал.

1) Теперь нужно сделать меню выпадающее (на скрине).
С данными стилями не получается!

2) При прокрутке вниз верхняя плашка затемняется, нужно сделать так же.

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

Наверх

#20 Alekseys

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

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

Отправлено 19 Январь 2015 - 19:56

UltraMag (19 Январь 2015 - 19:50) писал:

Здравствуйте. Уточните пожалуйста номер аккаунта, на котором Вы производите изменения.

Наверх

Вперед

Обратно в Другое

Темы с аналогичным тегами выпадающее меню, горизонтальное меню, горизонтальный каталог

Вопросы работы сервиса StoreLand → Дизайн → Шаблон Лето → Изменение общей стилистики → Выпадающее Меню Категории Товаров Автор Гость_Grownchild_* , 18 апр. 2017 выпадающее меню, шапка и 1 еще... 1 2	Популярная тема 26 Ответов 3 792 Просмотров	SKI 16 мая 2017
Вопросы работы сервиса StoreLand → Дизайн → Шаблон Радость → Страница товара → Блок Модификации - Немного Сместить Выпадающее Меню Автор Гость_like.hornet.6_* , 17 авг. 2015 модификация, сместить и 1 еще...	5 Ответов 3 598 Просмотров	like.hornet.6 18 авг. 2015
Вопросы работы сервиса StoreLand → Дизайн → Шаблон Движение → Главная → Главная Страница Движение Автор Гость_Владимир Ал_* , 03 янв. 2015 шапка фон, выпадающее меню и 1 еще... 1 2 3 8 →	Популярная тема 152 Ответов 20 799 Просмотров	Ирина345 08 сент. 2015
Вопросы работы сервиса StoreLand → Дизайн → Шаблон Пластик → Выпадающий Горизонтальный Каталог Товаров Автор Гость_alleha61_* , 17 авг. 2013 Выпадающее меню	8 Ответов 1 686 Просмотров	alleha61 22 авг. 2013
Вопросы работы сервиса StoreLand → Дизайн → Другие вопросы дизайна → Как Сделать Выпадающее Меню Каталога Автор Гость_idurdyev_* , 07 июля 2013 каталог, меню, выпадающее меню	3 Ответов 2 669 Просмотров	miyako 08 июля 2013