Отключен JavaScript

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

1

Правое Меню Категорий-Картинками

Автор Ribkanadom, 11 янв. 2013 18:02

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

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

#1 Ribkanadom

Новичок

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

Отправлено 11 Январь 2013 - 18:02

Доброго времени суток.
В теме http://forum.storela...ваний-категори/
поднимался вопрос о создании меню с помощью картинок категорий. Но, к сожалению приведенный там способ не работает (вроде все так сделала).
Есть ли еще способы?
http://ribkanadom.ru

Наверх

#2 Koderhan

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

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

Отправлено 11 Январь 2013 - 18:58

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

В файле HTML.
Найти код:

<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 />

Заменить:

<ul>
					 <li class="cat-item">
						 <style>
						 .cat {
							 display: block;
							 height: 96px;
							 background: url("полный путь до картинки");
						 }
						
						 .cat:hover {/*стили каторые будут применяться при выделение категории*/
							 display: block;
							 height: 96px;
							 background: url("полный путь до картинки");
							 color:black;/*цвет текста категории*/
						 }
						 .cat a {
							 position: relative;
							 width: 100%;
							 height: 100%;
							 background:none;
						 }
						 .cat a:hover {
							 position: relative;
							 width: 100%;
							 height: 100%;
							 background:none;
						 }
						 </style>
						 <div class="cat">
						 <a href="Адрес до категории">
								 Категория1
						 </a>
						 </div>
						 </li>
						 <li class="cat-item">
						 <style>
						 .cat {
							 display: block;
							 height: 96px;
							 background: url("полный путь до картинки");
						 }
						
						 .cat:hover {/*стили каторые будут применяться при выделение категории*/
							 display: block;
							 height: 96px;
							 background: url("полный путь до картинки");
							 color:black;/*цвет текста категории*/
						 }
						 .cat a {
							 position: relative;
							 width: 100%;
							 height: 100%;
							 background:none;
						 }
						 .cat a:hover {
							 position: relative;
							 width: 100%;
							 height: 100%;
							 background:none;
						 }
						 </style>
						 <div class="cat">
						 <a href="Адрес до категории">
								 Категория2
						 </a>
						 </div>
						 </li>
						 <li class="cat-item">
						 <style>
						 .cat {
							 display: block;
							 height: 96px;
							 background: url("полный путь до картинки");
						 }
						
						 .cat:hover {/*стили каторые будут применяться при выделение категории*/
							 display: block;
							 height: 96px;
							 background: url("полный путь до картинки");
							 color:black;/*цвет текста категории*/
						 }
						 .cat a {
							 position: relative;
							 width: 100%;
							 height: 100%;
							 background:none;
						 }
						 .cat a:hover {
							 position: relative;
							 width: 100%;
							 height: 100%;
							 background:none;
						 }
						 </style>
						 <div class="cat">
						 <a href="Адрес до категории">
								 Категория3
						 </a>
						 </div>
						 </li>
				 </ul><br />

В файле main.csstemplate.
Найти код:

.leftmenu li li a:hover {
background: url({ASSETS_IMAGES_PATH}lm-bg.jpg) repeat-x left bottom;
}

Заменить:

.leftmenu li li a:hover {
background: none;
}

Соответственно вам достаточно будет написать свои пути к категориям и файлам с изображениями.

Наверх

#3 Ribkanadom

Новичок

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

Отправлено 11 Январь 2013 - 21:40

Большое спасибо! Код работает за одним недостатком. Хоть я и вставляю для каждой категории разные ссылки на изображения, как Вы и указали, изображение для всех категорий получается одно и тоже и зависит от последней прописанной в коде категории. Тоесть если я ставлю:
картинка1
картинка2
картинка3,
в итоге на сайте отображается
картинка3
картинка3
картинка3

И я немного не поняла, Вы сказали заменить код в файле main.csstemplate. А на что заменить? Мне кажется, или Вы указали одинаковый код в обоих случаях?

P.S. подкатегорий у меня нет

Наверх

#4 Koderhan

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

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

Отправлено 11 Январь 2013 - 22:03

Да. Извините ошибся с кодом ".leftmenu li li a:hover ".Сейчас уже исправил.
А что касается одинаковых картинок, то тут можно задать каждой категории уникальный класс с стилями.
Пример:

	<ul>
		<li class="cat-item">
			<style>
				.cat1 {
					display: block;
					height: 96px;
					background: url("http://files.storeland.ru/web/upload/sitefiles/4/386/385538/solenaya.jpg");
				}
				.cat1:hover {/*стили каторые будут применяться при выделение категории*/
					display: block;
					height: 96px;
					background: url("http://files.storeland.ru/web/upload/sitefiles/4/386/385538/solenaya.jpg");
					color:black;/*цвет текста категории*/
				}
				.cat1 a {
					position: relative;
					width: 100%;
					height: 100%;
					background:none;
				}
				.cat1 a:hover {
					position: relative;
					width: 100%;
					height: 100%;
					background:none;
				}
			</style>
			<div class="cat2">
				<a href="http://ribkanadom.ru/catalog/%D1%81%D0%BE%D0%BB%D0%B5%D0%BD%D0%BD%D0%B0%D1%8F">
					Соленая
				</a>
			</div>
		</li>
		<li class="cat-item">
			<style>
				.cat2 {
					display: block;
					height: 96px;
					background: url("http://files.storeland.ru/web/upload/sitefiles/4/386/385539/svezhaya.jpg");
				}
				.cat2:hover {/*стили каторые будут применяться при выделение категории*/
					display: block;
					height: 96px;
					background: url("http://files.storeland.ru/web/upload/sitefiles/4/386/385539/svezhaya.jpg");
					color:black;/*цвет текста категории*/
				}
				.cat2 a {
					position: relative;
					width: 100%;
					height: 100%;
					background:none;
				}
				.cat2 a:hover {
					position: relative;
					width: 100%;
					height: 100%;
					background:none;
				}
			</style>
			<div class="cat2">
				<a href="http://ribkanadom.ru/catalog/%D0%A1%D0%B2%D0%B5%D0%B6%D0%B5%D0%BC%D0%BE%D1%80%D0%BE%D0%B6%D0%B5%D0%BD%D0%BD%D0%B0%D1%8F">
					Свежемороженая
				</a>
			</div>
		</li>

	</ul>

Наверх

#5 Ribkanadom

Новичок

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

Отправлено 12 Январь 2013 - 11:17

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

Наверх

#6 miyako

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

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

Отправлено 12 Январь 2013 - 11:54

Ribkanadom (12 Январь 2013 - 11:17) писал:

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

Замените код:

  <ul>
				<li class="cat-item">
						<style>
								.cat1 {
										display: block;
										height: 96px;
										background: url("http://files.storeland.ru/web/upload/sitefiles/4/386/385538/solenaya.jpg");
								}
								.cat1:hover {/*стили каторые будут применяться при выделение категории*/
										display: block;
										height: 96px;
										background: url("http://files.storeland.ru/web/upload/sitefiles/4/386/385538/solenaya.jpg");
										color:black;/*цвет текста категории*/
								}
								.cat1 a {
										position: relative;
										width: 100%;
										height: 100%;
										background:none;
								}
								.cat1 a:hover {
										position: relative;
										width: 100%;
										height: 100%;
										background:none;
								}
						</style>
						<div class="cat2">
								<a href="http://ribkanadom.ru/catalog/%D1%81%D0%BE%D0%BB%D0%B5%D0%BD%D0%BD%D0%B0%D1%8F">
										Соленая
								</a>
						</div>
				</li>
				<li class="cat-item">
						<style>
								.cat2 {
										display: block;
										height: 96px;
										background: url("http://files.storeland.ru/web/upload/sitefiles/4/386/385539/svezhaya.jpg");
								}
								.cat2:hover {/*стили каторые будут применяться при выделение категории*/
										display: block;
										height: 96px;
										background: url("http://files.storeland.ru/web/upload/sitefiles/4/386/385539/svezhaya.jpg");
										color:black;/*цвет текста категории*/
								}
								.cat2 a {
										position: relative;
										width: 100%;
										height: 100%;
										background:none;
								}
								.cat2 a:hover {
										position: relative;
										width: 100%;
										height: 100%;
										background:none;
								}
						</style>
						<div class="cat2">
								<a href="http://ribkanadom.ru/catalog/%D0%A1%D0%B2%D0%B5%D0%B6%D0%B5%D0%BC%D0%BE%D1%80%D0%BE%D0%B6%D0%B5%D0%BD%D0%BD%D0%B0%D1%8F">
										Свежемороженая
								</a>
						</div>
				</li>
		</ul>

на:

  <ul>
				<li class="cat-item">
						<style>
								.cat1 {
										display: block;
										height: 96px;
										background: url("http://files.storeland.ru/web/upload/sitefiles/4/386/385538/solenaya.jpg");
								}
								.cat1:hover {/*стили каторые будут применяться при выделение категории*/
										display: block;
										height: 96px;
										background: url("http://files.storeland.ru/web/upload/sitefiles/4/386/385538/solenaya.jpg");
										color:black;/*цвет текста категории*/
								}
								.cat1 a {
										position: relative;
										width: 100%;
										height: 100%;
										background:none;
								}
								.cat1 a:hover {
										position: relative;
										width: 100%;
										height: 100%;
										background:none;
								}
						</style>
						<div class="cat1">
								<a href="http://ribkanadom.ru/catalog/%D1%81%D0%BE%D0%BB%D0%B5%D0%BD%D0%BD%D0%B0%D1%8F">
										Соленая
								</a>
						</div>
				</li>
				<li class="cat-item">
						<style>
								.cat2 {
										display: block;
										height: 96px;
										background: url("http://ribkanadom.ru/web/upload/goods/images/68/6702/6701800/svezhemorozhennaja-a35910.jpg");
								}
								.cat2:hover {/*стили каторые будут применяться при выделение категории*/
										display: block;
										height: 96px;
										background: url("http://ribkanadom.ru/web/upload/goods/images/68/6702/6701800/svezhemorozhennaja-a35910.jpg");
										color:black;/*цвет текста категории*/
								}
								.cat2 a {
										position: relative;
										width: 100%;
										height: 100%;
										background:none;
								}
								.cat2 a:hover {
										position: relative;
										width: 100%;
										height: 100%;
										background:none;
								}
						</style>
						<div class="cat2">
								<a href="http://ribkanadom.ru/catalog/%D0%A1%D0%B2%D0%B5%D0%B6%D0%B5%D0%BC%D0%BE%D1%80%D0%BE%D0%B6%D0%B5%D0%BD%D0%BD%D0%B0%D1%8F">
										Свежемороженая
								</a>
						</div>
				</li>
		</ul>

По этому шаблону можно сделать и остальные пункты меню.

Наверх

#7 Ribkanadom

Новичок

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

Отправлено 12 Январь 2013 - 12:16

Спасибо! Проблема решилась после того как я три раза перезагрузила картинки на сайт.
Но вот все равно отображается последняя на всех категориях...

P.S. 3 года занимаюсь программированием, и первый раз встретила форум, на котором действительно помогают. Я просто в шоке. Спасибо!

Наверх

#8 miyako

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

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

Отправлено 12 Январь 2013 - 12:27

Ribkanadom (12 Январь 2013 - 12:16) писал:

Спасибо! Проблема решилась после того как я три раза перезагрузила картинки на сайт.
Появился еще вопрос:
никак не могу убрать вот это пространство;

пыталась изменить здесь, но в лево движение блока идет, а в право нет.

#footer .left ul li{
display: inline;
font: 10px Verdana, Geneva, sans-serif;
color: #333;
margin-right: 8px;
padding-right: 8px;
border-right: 1px solid #666;
}
#footer .left ul li.last{
border-right:0px;
}
ul.leftmenu {
margin-right: 0px;
margin-left: 0px;
}
.leftmenu ul {padding:0px}
.leftmenu li h2 {
font: bold 17px/20px Helvetica, "Trebuchet MS", Arial, sans-serif;
color: #069;
text-transform: uppercase;
} .leftmenu li h2 a {
color: #069;
} .leftmenu li li {
display:inline;
position: relative;
} .leftmenu li li a{
display: block;
padding: 5px 10px;
border-bottom: 0px solid #D6D6D6;
font: normal 13px/20px "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #999999;
text-decoration: none;
} .leftmenu li li a.selected{
font-weight:bold; color:#000;
} .leftmenu li li a:hover {
background: none;
}
.cat-item img {
	 left: 0px;
	 position: top;
	 top: 0px;
	 width: 120px;
}

P.S. 3 года занимаюсь программированием, и первый раз встретила форум, на котором действительно помогают. Я просто в шоке. Спасибо!

Если вы хотите сильно сместить левое меню вправо, то у пользователя с разрешением экрана в 1280 может не уместиться оно.
Вправо можно сместить максимум на 10 пикселей.

Наверх

#9 Ribkanadom

Новичок

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

Отправлено 12 Январь 2013 - 12:47

Да! Все получилось! Картинки отображаются нормально! Огромное спасибо.
По поводу отступа, действительно, открыла на другом компе, там гораздо уже отображение страницы.

Наверх

Обратно в Шаблон Сияние

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

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

Правое Меню Категорий-Картинками

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

Войти

Google поиск