Вертикальное МЕНЮ группы товаров

[tim21701]

Нашел небольшой пример по созданию меню на css (не реклама). Решил поиграться... Вот что получилось:

.......................Опера 11.01:..................................Internet Explorer 6:..........

Вроде всё хорошо, но вот трабл; что за "точечки-кружочки" в Опере, и как от них избавиться?

Может, где какой <li> или <ul> прописан в самом php или tpl? Помогите пожалуйста, уже мозг кипит :huh:

[Smallbear]

list-style-type: none;

возможно это где-то нужно прописать.Ну а вообще поищите по поводу маркированных списков,думаю в этом проблема

[tim21701]

list-style-type: none;

возможно это где-то нужно прописать.Ну а вообще поищите по поводу маркированных списков,думаю в этом проблема

Да, точно. Видно сказывается бессонная ночь :DУ меня в css этого определения даже и не было, а я о нём и не подумал...

Добавил к описанию #category ul - "

list-style-type:none;" и точки пропали. Спасибо огромное! :rolleyes:

Вопрос закрыт.

[tim21701]

Как любил говорить Киса Воробьянинов (из фильма "12 Стульев"); "Даа, уж!" ;)

Как то "странновато" он смотрится на iPad`е

(я имею ввиду ШРИФТ)

[JohnPingvin]

А поделитесь пожалуйста, как так прикручивать это?

[tim21701]

А поделитесь пожалуйста, как так прикручивать это?

Создаёте в любом графическом редакторе изображение (или берёте ниже мой), желательно в формате *.png с разрешением 180 на 64.

Делите его ровно пополам и закрашиваете подходящими цветами вашей темы. Верхняя часть - это состояние меню по дефолту. Нижняя - при наведении мыши.

И кидаете ваше изображение в папку catalog/view/theme/ВАША ТЕМА/image

.

Вот пример:

Далее, открываете файл со стилями вашей темы: catalog/view/theme/ВАША ТЕМА/stylesheet/stylesheet.css и находите в нём блок:

#category ul {
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 8px;
	padding-left: 12px;
	list-style: url('../image/bullet_1.png');
}

Меняете в нем строки на эти:

#category ul {
	margin-top: 0px;
	margin-bottom: 0px;
     margin-left: 0px;
     padding-left: 0px;
	list-style-type:none;
}

Затем, в самом конце, добавляем 4 блока нашего меню:

#category {
    width: 178px;
    margin: 0px;
    padding: 0px 0 0 0px;
    list-style-type:none;
}
#category li a {
    height: 32px;
    height: 23px;
    text-decoration: none;
}
#category li a:link, #category li a:visited {
    color: #3a75c4;
    display: block;
 	background:  url('../image/menu.png');
    z-index: 2;
    padding: 8px 0 0 5px;
}
#category li a:hover, #category li #category {
    color: #FFFFFF;
 	background:  url('../image/menu.png') 0 -32px;
    padding: 8px 0 0 5px;
}

Всё.

В итоге:

[gdi31]

Всё.

В итоге:

С одним этажом как у Вас сростается без проблем. А с тремя этажами как у меня получается вот так . Не подскажите что мне подправить?

[tim21701]

А с тремя этажами как у меня получается вот так..... Не подскажите что мне подправить?

Только что, попытался воссоздать то - что у Вас, сделал с настройками и шаблоном по дефолту.

Создал группу в веб камерах, закинул туда iPod. Получается, подгруппа "третьего уровня":

Прописал то - что описано выше... И всё корректно отображается:

Суда по Вашему скрину (category.png изменён), Вы файл со стилями уже наверняка изменяли(?)... Что-то, Вы там намудрили... :rolleyes:

Либо, уже какие-то настройки стилей для меню имеются. Вот и конфликтуют.

Совет.

1. Зайдите на эту страницу www.realcode.ru

2. Откройте файл со стилями, который идёт в архиве с ocStore v0.1.7 по умолчанию. Выделите весь текст и вставьте в левое окно.

3. Содержимое Вашего stylesheet.css скопируйте в правое.

4. Увидите разницу, и найдёте где ошибка.

Скрин - так, для примера.

[gdi31]

Только что, попытался воссоздать то - что у Вас, .............Скрин - так, для примера.

В оригинальном стиле шаблона у меня стояло - #category ul,#information ul {, разделил на два лагеря, всё срослось.

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

[JohnPingvin]

большое спасибо за инструкцию : )

[JohnPingvin]

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

[phantom]

Сделал по прописи – работает отлично! Но вот незадача, объясню!

Дело в том, что мне надо товары разбить в две категории, например Sony и Assus. Два модуля «Категории» я так понимаю поставить нельзя (или я ошибаюсь? или если да, то как?)

Хочу эту проблему решить при помощи модуля HTML модуль+, создал и стал настраивать меню!

Вот что получается - в категориях все отлично, а вот в HTML модуль+ - меню смещено вправо.

Стиль прописал точно так, как указано выше, только изменил название на id="menu7"

часть файла -

<div id="column_left">
    <div class="box">
  <div class="top"><img src="catalog/view/theme/default/image/category.png" alt="" />Категории</div>
  <div id="category" class="middle"><ul><li><a href="http://joom/index.php?route=product/category&path=20">Desktops</a></li>
  <li><a href="http://joom/index.php?route=product/category&path=35">Декоративная</a></li>'>http://joom/index.php?route=product/category&path=35">Декоративная</a></li>
 ...
  <li><a href="http://joom/index.php?route=product/category&path=34">MP3 Players</a></li>
  </ul></div>
  <div class="bottom"> </div>
</div>
    	  <div class="box">
  <div class="top">
		<img src="catalog/view/theme/default/image/brands.png" alt="" />TianDe</div>
		<div class="middle" style="text-align: left;"> 
    <div id="menu7">
	<ul>
		<li>
			<a href="http://joom/index.php?route=product/category&path=35">Декоративная косметика</a></li>
		<li>
			<a href="http://joom/index.php?route=product/category&path=35">Декоративная косметика</a></li>
	</ul>
</div>
  </div>

В чем дело не могу понять? С -CSS- уже не наигрался. Может подскажет кто, в каком хоть направлении копать или как можно иначе решить проблему с двумя группами товаров

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

Может сообщение не по теме, извините...

[AnotherStar]

Согласен с JohnPingvin. Если бы подкатегории имели смещение или выделялись внешним видом, было бы недурно =) Ну и комильфо если бы были меню разьезжалось вроде выпадающего списка =))

[Acden]

Согласен с JohnPingvin. Если бы подкатегории имели смещение или выделялись внешним видом, было бы недурно =) Ну и комильфо если бы были меню разьезжалось вроде выпадающего списка =))

Тоже ищу такое решение.

[artemareshin]

сделал как описано выше =) работает на ура, спасибо! маленькое дополнение хотелось бы:

как сделать чтобы при выборе пункта, цветовая гамма пункта была другой? Ну на примере, есть два цвета - серый и синий, при наведении становиться синим, а при выборе опять серый, мзменяется только шрифт (если был установлен отличный от исходного), а хотелось бы, чтобы и сам фон был отличным, короче select сделать...

[kopaweb19]

У меня вот так зделано меню. Подкатегории имеют другой фон, и одству с лева. На форуме както создавал тему, непомогли. Потом сам зделал

[artemareshin]

У меня вот так зделано меню. Подкатегории имеют другой фон, и одству с лева. На форуме както создавал тему, непомогли. Потом сам зделал

а как сделал? что правил? может меня тоже на мысль наведет? если не сложно скинь что в css правил...

[kopaweb19]

Вот что прописал в CSS

#category {


      background-color: #1f8ee3;
	  font-family: Arial;
	  margin-top: 0px;
	  margin-left: 0px;
	  padding:0px;
	  font-size: 14px;
	  width: 187px;
      }

#category ul {
      list-style: none;
      padding-left: 0px;
	  margin: 0px;
      border: none;
	  font-size: 12px;
	  width: 187px;
      }

#category li {
      border-bottom: 0px solid #90bade;
      margin: 0px;
	  margin-left: 0px;
	  padding-left: 0px;
      }
#category li a {
      display: block;
      padding: 10px 5px 10px 5px;
      background-color: #1f8ee3;
      color: #000;
      text-decoration: none;
      width: 100%;
	  padding-left: 20px;
   background-image: url(Fly_test_13_13.png);  
	  background-repeat:repeat-x;
	  font-size: 12px;
      }

html>body #category li a {
      width: auto;
      }

#category li a:hover {
      background-color: #1f8ee3;
      color: #fff;
      }
#category ul li li a{
      display: block;
      padding: 10px 5px 10px 25px;
      background-color: #b0afaf;
      color: #000;
      text-decoration: none;
	  padding-left: 20px;
   background-image: url(Fly_test_13_17.png);
	  background-repeat:repeat-x;
	}	
#category ul li li a:hover {
      background-color: #b0afaf;
      color: #fff;
      }	
html>body #category ul li li a {
      width: auto;
      }

#category ul li li a:hover {
      background-color: #b0afaf;
      color: #fff;
      }

[artemareshin]

случайно нашел чайт где так как я хочу сделанно меню http://www.broadwaypizza.ru/, если кто знает как так изобразить, изобразите пожалуйста =)

[kopaweb19]

Взять мой код и выправить там:

#category li a:hover {
      background-color: #1f8ee3;
color: #fff;
background-image: url(Fly_test_13_17.png);
          background-repeat:repeat-x;
      }

Вот и всё что нужно, непонимаю в чем сложности

[fllik]

а как поменять цвет ссылок например на чёрный и сделать шрифт по больше в Категории?

проблему решил!

[fllik]

Всё получилось Всё работает! Спасибо

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

Змінено 29 травня 2011 користувачем afwollis
overquote DELETED

[fllik]

появилась проблема всё работает но если названия категории состоит из 2 строчек то когда открываешь категорию а там подкатегоря то получается каша малаша!

кто может подсказать как исправить баг?

[AM27]

http://agu-men.ru/in...ute=common/home

как сделать чтобы из вертикального меню были выпадающие закладки с под категориями и на против категорий прилепить небольшие картинки ? реально вообще такое воплотить ? 1,5,1,3

заранее спасибо!

[master114]

Ничего из вышеуказанного не помогло (OC 1.5.2)

Перерыл весь форум и инет, хотел уже вручную прописывать меню в файле category.tpl

На буржуйском вовремя нашел следующий мод

Category Superfish

Работает на всех версиях. У меня заработало.

Устанавливается очень легко - копируем файлы и в админке в модулях включаем в нужном месте (если слева, то вертикальное выпадающее меню). Цвета редактируются в файлах css