tim21701

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

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

tim21701    497

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

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

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Smallbear    79

list-style-type: none;

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
tim21701    497

list-style-type: none;

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

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

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
tim21701    497

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

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

Изображение

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
JohnPingvin    0

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
tim21701    497

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

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

Всё.

В итоге:

Изображение

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
tim21701    497

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

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

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

Изображение

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

Изображение

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

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

Совет.

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

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

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

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

Изображение

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
gdi31    5

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
JohnPingvin    0

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
phantom    0

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Acden    6

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

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

Поделиться сообщением


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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
kopaweb19    14

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

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

Поделиться сообщением


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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
kopaweb19    14

Вот что прописал в 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/, если кто знает как так изобразить, изобразите пожалуйста =)

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
kopaweb19    14

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


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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
fllik    7

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
fllik    7

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

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

Изменено пользователем afwollis
overquote DELETED

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
fllik    7

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
AM27    5

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
master114    1

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

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

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

Category Superfish

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

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

Поделиться сообщением


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

Для публикации сообщений создайте учётную запись или авторизуйтесь

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

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти


  • Последние посетители   0 пользователей онлайн

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