Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

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


Recommended Posts

Нашел небольшой пример по созданию меню на 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 weeks later...

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

Дело в том, что мне надо товары разбить в две категории, например 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 weeks later...

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

как сделать чтобы при выборе пункта, цветовая гамма пункта была другой? Ну на примере, есть два цвета - серый и синий, при наведении становиться синим, а при выборе опять серый, мзменяется только шрифт (если был установлен отличный от исходного), а хотелось бы, чтобы и сам фон был отличным, короче 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;
      }
Надіслати
Поділитися на інших сайтах


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


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

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

Надіслати
Поділитися на інших сайтах


  • 1 month later...

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

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

Змінено користувачем afwollis
overquote DELETED
Надіслати
Поділитися на інших сайтах


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

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

Надіслати
Поділитися на інших сайтах


  • 8 months later...

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

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

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

Надіслати
Поділитися на інших сайтах


  • 2 months later...

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

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

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

Category Superfish

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

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

Надіслати
Поділитися на інших сайтах


Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
  • Зараз на сторінці   0 користувачів

    • Ні користувачів, які переглядиють цю сторінку
×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.