Перейти к публикации
Поиск в
  • Дополнительно...
Искать результаты, содержащие...
Искать результаты в...

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


 Поделиться

Рекомендованные сообщения

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

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

ИзображениеИзображение

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

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

Ссылка на комментарий
Поделиться на других сайтах

list-style-type: none;

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

Ссылка на комментарий
Поделиться на других сайтах


list-style-type: none;

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

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

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

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

Вопрос закрыт.
Ссылка на комментарий
Поделиться на других сайтах

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

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

Изображение

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

Ссылка на комментарий
Поделиться на других сайтах

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

Создаёте в любом графическом редакторе изображение (или берёте ниже мой), желательно в формате *.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;
}
Всё.

В итоге:

Изображение

Ссылка на комментарий
Поделиться на других сайтах

Всё.

В итоге:

Изображение

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


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

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

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

Изображение

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

Изображение

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

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

Совет.

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

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

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

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

Изображение

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

Ссылка на комментарий
Поделиться на других сайтах

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

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

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

Ссылка на комментарий
Поделиться на других сайтах


  • 2 недели спустя...

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

Дело в том, что мне надо товары разбить в две категории, например 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- уже не наигрался. Может подскажет кто, в каком хоть направлении копать или как можно иначе решить проблему с двумя группами товаров

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

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

Ссылка на комментарий
Поделиться на других сайтах


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

  • +1 1
Ссылка на комментарий
Поделиться на других сайтах


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

Тоже ищу такое решение.
Ссылка на комментарий
Поделиться на других сайтах


  • 4 недели спустя...

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

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

Ссылка на комментарий
Поделиться на других сайтах


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

post-5733-0-58516300-1303202380_thumb.jpg

Ссылка на комментарий
Поделиться на других сайтах


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

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

Ссылка на комментарий
Поделиться на других сайтах


Вот что прописал в 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;
      }
Ссылка на комментарий
Поделиться на других сайтах


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

Ссылка на комментарий
Поделиться на других сайтах


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


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

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

Ссылка на комментарий
Поделиться на других сайтах


  • 1 месяц спустя...

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

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

Изменено пользователем afwollis
overquote DELETED
Ссылка на комментарий
Поделиться на других сайтах


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

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

Ссылка на комментарий
Поделиться на других сайтах


  • 8 месяцев спустя...

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

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

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

Ссылка на комментарий
Поделиться на других сайтах


  • 2 месяца спустя...

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

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

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

Category Superfish

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

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

Ссылка на комментарий
Поделиться на других сайтах


Создайте аккаунт или войдите в него для комментирования

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

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас
 Поделиться

  • Сейчас на странице   0 пользователей

    • Нет пользователей, просматривающих эту страницу.
×
×
  • Создать...

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.