Отключен JavaScript

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

Добавление Собственного Меню!

Автор GiikCraft, 23 авг. 2013 14:03

меню пластик дизайн

Вперед

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

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

#1 GiikCraft

Новичок

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

ГородМинск

Отправлено 23 Август 2013 - 14:03

Добрый день, интересует один вопрос - прошу помощи

Есть собственное меню, написал сам. Собственно в чём вопрос, можете написать ту часть кода где в шаблоне пластик и находиться меню. Требуется что-бы вместо обычного меню отображалось моё - на css. Но что-то не выходит, не понимаю в чём проблема. Возможно мне надо дать моему меню переменную (id или class) "header" или что-то ещё?... До этого просто пытался заменить кусочек кода меню в шаблоне на своё меню - результат был мягко говоря не очень. Заранее спасибо за помощь

Наверх

#2 Сake

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

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

Отправлено 24 Август 2013 - 01:56

Пожалуйста, сообщите номер вашего аккаунта. В стандартной реализации пластика - данное меню выполнено из нескольких изображений. Кусочки изображения в последствии используются в следующих стилях (main.css)

#panelsite div.leftcol {
	background: url("{ASSETS_IMAGES_PATH}panel-bg.png") no-repeat scroll 0 0 transparent;
	width: 12px;
}
#panelsite div.centercol {
	background: url("{ASSETS_IMAGES_PATH}panel-bgx.png") repeat-x scroll 0 0 transparent;
	width: 747px;
}
#panelsite div.rightcol {
	background: url("{ASSETS_IMAGES_PATH}panel-bg.png") no-repeat scroll -12px 0 transparent;
	color: #686868;
	font: 14px Verdana,Geneva,sans-serif;
	width: 241px;
}
#panelsite div.centercol .search {
	background: url("{ASSETS_IMAGES_PATH}searchbg.jpg") no-repeat scroll 0 0 transparent;
	float: left;
	height: 41px;
	margin: 11px 0 0;
	padding: 10px 0 0;
	width: 749px;
}
#panelsite div.centercol .search input.text {
  background: url("{ASSETS_IMAGES_PATH}searchbg.jpg") no-repeat scroll 0 -10px transparent;
  color: #B7B7B7;
  cursor: default;
  float: left;
  font: italic 12px/30px Verdana,Geneva,sans-serif;
  height: 30px;
  padding: 0 5px 0 131px;
  width: 546px;
}

Вы можете поступить в данном случае следующим образом:

1) Реализовать такие же кусочки и заменить изображения в разделе редактора тем.

2) Удалить в выше приведенных классах свойство background, тем самым убрав изображения, после в классе

#panelsite {
	height: 104px;
	width: 100%;
}

задать данное свойство с указанием одного цельного изображения меню. Например

#panelsite {
	height: 104px;
	width: 100%;
	background: url("{ASSETS_IMAGES_PATH}menuimg.jpg") no-repeat center center;
}

Наверх

#3 GiikCraft

Новичок

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

ГородМинск

Отправлено 28 Август 2013 - 19:02

Сake (24 Август 2013 - 01:56) писал:

#panelsite div.leftcol {
background: url("{ASSETS_IMAGES_PATH}panel-bg.png") no-repeat scroll 0 0 transparent;
width: 12px;
}
#panelsite div.centercol {
background: url("{ASSETS_IMAGES_PATH}panel-bgx.png") repeat-x scroll 0 0 transparent;
width: 747px;
}
#panelsite div.rightcol {
background: url("{ASSETS_IMAGES_PATH}panel-bg.png") no-repeat scroll -12px 0 transparent;
color: #686868;
font: 14px Verdana,Geneva,sans-serif;
width: 241px;
}
#panelsite div.centercol .search {
background: url("{ASSETS_IMAGES_PATH}searchbg.jpg") no-repeat scroll 0 0 transparent;
float: left;
height: 41px;
margin: 11px 0 0;
padding: 10px 0 0;
width: 749px;
}
#panelsite div.centercol .search input.text {
background: url("{ASSETS_IMAGES_PATH}searchbg.jpg") no-repeat scroll 0 -10px transparent;
color: #B7B7B7;
cursor: default;
float: left;
font: italic 12px/30px Verdana,Geneva,sans-serif;
height: 30px;
padding: 0 5px 0 131px;
width: 546px;
}

#panelsite {
height: 104px;
width: 100%;
}

задать данное свойство с указанием одного цельного изображения меню. Например

#panelsite {
height: 104px;
width: 100%;
background: url("{ASSETS_IMAGES_PATH}menuimg.jpg") no-repeat center center;
}

Нет, я говорю не про всю верхнюю панель а именно о белом месте над поиском - месте стандартного меню. Так вот, как туда вставить свою меню...

Наверх

#4 Taisia

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

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

Отправлено 28 Август 2013 - 20:08

так как вы не написали номер своего аккаунта нам довольно трудно помочь вам.
Напишите пожалуйста номер вашего аккаунта.

Наверх

#5 GiikCraft

Новичок

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

ГородМинск

Отправлено 30 Август 2013 - 14:52

Taisia (28 Август 2013 - 20:08) писал:

SL-231787

Наверх

#6 Сake

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

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

Отправлено 31 Август 2013 - 03:08

Код верхнего меню в "Пластик" реализован в виде списка ul li и выглядит он так

<div class="menuheader">
		 <ul>
		 {% FOR menu %}
			 {% FOR header %}
			 {% FOR links %}
				 <li {% IF menu.header.links.first %}class="main"{% ENDIF %}><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="current"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li>
			 {% ENDFOR %}
			 {% ENDFOR %}
		 {% ENDFOR %}
		 </ul>
	 </div>

вы можете заменить данный код на ваш код меню. Пожалуйста, сообщите ваш код меню.

Наверх

#7 GiikCraft

Новичок

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

ГородМинск

Отправлено 07 Сентябрь 2013 - 12:33

Сake (31 Август 2013 - 03:08) писал:

Код верхнего меню в "Пластик" реализован в виде списка ul li и выглядит он так

<div class="menuheader">
		 <ul>
		 {% FOR menu %}
			 {% FOR header %}
			 {% FOR links %}
				 <li {% IF menu.header.links.first %}class="main"{% ENDIF %}><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="current"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li>
			 {% ENDFOR %}
			 {% ENDFOR %}
		 {% ENDFOR %}
		 </ul>
	 </div>

вы можете заменить данный код на ваш код меню. Пожалуйста, сообщите ваш код меню.

Уже пробовал до того как написал сюда, не выходит...

Наверх

#8 miyako

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

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

Отправлено 08 Сентябрь 2013 - 11:37

GiikCraft (07 Сентябрь 2013 - 12:33) писал:

Уже пробовал до того как написал сюда, не выходит...

Можете объяснить что именно у Вас не получается? Какой результат после проделанных изменений?

Наверх

#9 GiikCraft

Новичок

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

ГородМинск

Отправлено 11 Сентябрь 2013 - 20:04

miyako (08 Сентябрь 2013 - 11:37) писал:

Можете объяснить что именно у Вас не получается? Какой результат после проделанных изменений?

Результат вы можете увидеть на прикреплённом скриншоте в 1 сообщении... Меню просто не отображается...

Наверх

#10 Vaccina

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

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

Отправлено 12 Сентябрь 2013 - 01:35

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

<div class="menuheader">
				 <ul>
				 {% FOR menu %}
						 {% FOR header %}
						 {% FOR links %}
								 <li {% IF menu.header.links.first %}class="main"{% ENDIF %}><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="current"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li>
						 {% ENDFOR %}
						 {% ENDFOR %}
				 {% ENDFOR %}
				 </ul>
		 </div>

Наверх

#11 wickedslim

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

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

Отправлено 28 Январь 2014 - 13:55

Добрый день, реально реализовать следующее:
1. сделать каталог(меню) как тут http://shark74.ru/ с переключением
если нет то
2. добавить отдельное меню или каталог слева (см. прикрепленное изображение) в место красного прямоугольника

аккаунт SL-229100

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

Наверх

#12 miyako

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

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

Отправлено 29 Январь 2014 - 09:07

wickedslim (28 Январь 2014 - 13:55) писал:

Найдите код в шаблоне HTML -

			 <div class="pad-box">
			 <ul class="leftmenu">

после него добавьте следующий код -

<div id="tabs">
<ul>
		 <li><h2><a href="#tabs-1">Меню 1</a><h2></li>
		 <li><h2><a href="#tabs-2">Меню 2</a></h2></li>
		 <li><h2><a href="#tabs-3">Меню 3</a></h2></li>
</ul>
<div id="tabs-1">
<li class="categories"><h2><a href="{CATALOG_URL}" class="indexPage">Каталог товаров 1</a></h2>
				 <ul>
				 {%IFNOT catalog_empty %}
					 {% FOR catalog %}
					 {% IFNOT catalog.HIDE %}
						 <li class="cat-item">
						 <a href="{catalog.URL}"
							 {% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("20")}px"{% ENDIF %}
							 {% IF catalog.CURRENT %}class="selected"{% ENDIF %}
						 >{catalog.NAME}</a>
						 </li>
					 {% ENDIF %}
					 {% ENDFOR %}
				 {% ENDIF %}
				 </ul><br />
				 </li>
</div>
<div id="tabs-2">
<li class="categories"><h2><a href="{CATALOG_URL}" class="indexPage">Каталог товаров 2</a></h2>
				 <ul>
				 {%IFNOT catalog_full_empty %}
					 {% FOR catalog_full %}
					 {% IF catalog_full.HIDE %}
						 <li class="cat-item">
						 <a href="{catalog_full.URL}"
							 {% IF catalog_full.LEVEL>0%}style="padding-left:{catalog_full.LEVEL | multiply("20")}px"{% ENDIF %}
							 {% IF catalog_full.CURRENT %}class="selected"{% ENDIF %}
						 >{catalog_full.NAME}</a>
						 </li>
					 {% ENDIF %}
					 {% ENDFOR %}
				 {% ENDIF %}
				 </ul><br />
				 </li>
</div>
<div id="tabs-3">
<li class="categories"><h2><a href="{CATALOG_URL}" class="indexPage">Каталог товаров 3</a></h2>
				 <ul>
				 {%IFNOT catalog_empty %}
					 {% FOR catalog %}
					 {% IFNOT catalog.HIDE %}
						 <li class="cat-item">
						 <a href="{catalog.URL}"
							 {% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("20")}px"{% ENDIF %}
							 {% IF catalog.CURRENT %}class="selected"{% ENDIF %}
						 >{catalog.NAME}</a>
						 </li>
					 {% ENDIF %}
					 {% ENDFOR %}
				 {% ENDIF %}
				 </ul><br />
				 </li>
</div>
</div>

В main.css в конце файла добавьте стили -

.leftmenu #tabs-1,.leftmenu #tabs-2,.leftmenu #tabs-3{border:0px !important; padding:0px !important;}
.leftmenu #tabs li{background: none !important;border:0px !important;margin:0px !important;}
.leftmenu #tabs ul{background:blue;}
.leftmenu #tabs li h2 a{font-size:14px;padding:2px !important;}
.leftmenu #tabs,.leftmenu #tabs ul{background:none;padding:0 !important;border:0px !important;}
.categories {background: none !important;}

В конец main.js добавьте код -

$(function(){
$("#tabs").tabs();
});

Результат на скриншоте. Первое меню - это меню нескрытых категорий, второе меню - меню скрытых категорий. (в каждой категории, если открыть на редактирование можно установить скрытые категории). Третье меню тоже самое что и первое. Его можно изменить в зависимости от конкретных категорий, которые нужно выводить только в третьем меню. Уточните какие именно категории нужно вывести в третьем меню.

Меню можно будет стилизовать.

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

Наверх

#13 wickedslim

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

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

Отправлено 29 Январь 2014 - 10:14

немного сложновато)) попробую разобраться, в планах сделать 2е меню это бренды(пока не знаю как), 3е меню цели(будет 3 ссылки)

Наверх

#14 miyako

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

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

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

wickedslim (29 Январь 2014 - 10:14) писал:

Если будет ссылки на какие-то конкретные страницы, а не категории, то нужно будет код -

<div id="tabs-3">
<li class="categories"><h2><a href="{CATALOG_URL}" class="indexPage">Каталог товаров 3</a></h2>
								 <ul>
								 {%IFNOT catalog_empty %}
										 {% FOR catalog %}
										 {% IFNOT catalog.HIDE %}
												 <li class="cat-item">
												 <a href="{catalog.URL}"
														 {% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("20")}px"{% ENDIF %}
														 {% IF catalog.CURRENT %}class="selected"{% ENDIF %}
												 >{catalog.NAME}</a>
												 </li>
										 {% ENDIF %}
										 {% ENDFOR %}
								 {% ENDIF %}
								 </ul><br />
								 </li>
</div>

заменить на -

<div id="tabs-3">
<li class="categories"><h2><a href="{CATALOG_URL}" class="indexPage">Каталог товаров 3</a></h2>
								 <ul>
				 <li><a href="ссылка на страницу">Название ссылки</a></li>
<li><a href="ссылка на страницу 2">Название ссылки 2</a></li>
<li><a href="ссылка на страницу 3">Название ссылки 3</a></li>
								 </ul><br />
								 </li>
</div>

Соответственно в коде указать необходимые ссылки вместо "ссылка на страницу" и отредактировать название ссылки

Наверх

#15 wickedslim

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

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

Отправлено 30 Январь 2014 - 08:51

Где почитать как работать со скрытыми категориями? после вставки кодов у меня получилось что то непонятное

sportpower18.ru

P.S. Разобрался, сейчас будут еще вопросы))

Наверх

#16 wickedslim

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

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

Отправлено 30 Январь 2014 - 09:37

Вот нашел что нужно подправить, когда заходишь в любую из категорий 2 или 3 меню, меню автоматом перескакивает в основное, как сделать что б оно оставалось?

Наверх

#17 Vaccina

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

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

Отправлено 31 Январь 2014 - 04:08

на данный момент у вас меню не фиксирует, на какой странице пользователь находится перейдя по пункту.
в main.css найдите:

#mainmenu li a:hover

замените на:

#mainmenu li a:hover, #mainmenu li a.selected

Наверх

#18 wickedslim

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

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

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

Vaccina (31 Январь 2014 - 04:08) писал:

#mainmenu li a:hover

замените на:

#mainmenu li a:hover, #mainmenu li a.selected

Немного не так работает, при выборе подпункта из меню2 и меню3, весь блок меню меняется на меню1( посмотрите http://sportpower18.ru/), а при возврате уже выделен пункт меню который просматривается

p.s. убрал

#mainmenu li a.selected

ибо когда заходишь на сайт, всегда выделена главная страница в меню

Наверх

#19 wickedslim

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

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

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

какие еще варианты могут быть?

Наверх

#20 wickedslim

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

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

Отправлено 07 Февраль 2014 - 22:21

проблема все еще актуальна

Наверх

Вперед

Обратно в Изменение общей стилистики

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

Вопросы работы сервиса StoreLand → Дизайн → Шаблон Пластик → Изменение общей стилистики → Адаптивный Дизайн К Шаблону Пластик Автор Гость_Acum56_* , 08 февр. 2024 Адаптивный, дизайн, Пластик	1 Ответ 86 Просмотров	MikDark 08 февр. 2024
Вопросы работы сервиса StoreLand → Дизайн → Шаблон Хобби → Каталог товаров → Картинка В Описании Категорий Для Мобильных Устройств Автор Гость_dwell_* , 19 янв. 2020 дизайн, картинка	Популярная тема 9 Ответов 1 453 Просмотров	RayLi 27 янв. 2020
Вопросы работы сервиса StoreLand → Другие вопросы → Изменение Url'a Ссылки Навигационного Меню Автор Гость_smoke_story_* , 05 нояб. 2019 Навигация, Меню и 4 еще...	3 Ответов 3 092 Просмотров	Vaccina 16 нояб. 2019
Вопросы работы сервиса StoreLand → Дизайн → Шаблон Город → Изменение общей стилистики → Изменение Части Дизайна Сайта Автор Гость_magazin_* , 24 февр. 2019 дизайн, редактирование	Популярная тема 14 Ответов 2 837 Просмотров	magazin 11 июня 2019
Вопросы работы сервиса StoreLand → Дизайн → Шаблон Веган → Изменение общей стилистики → Полностью Имзенить Цвета Автор Гость_5034317_* , 16 февр. 2019 цвета, стиль, дизайн, стилистика и 1 еще...	1 Ответ 2 090 Просмотров	Vaccina 19 февр. 2019

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

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

Добавление Собственного Меню!

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

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

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

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

Войти

Google поиск