Подсветка выбранной категории в списке категорий товаров. CSS или PHP?

[Carl_Salos 0]

В магазине есть список категорий товаров, при наведении курсора на ту или иную категорию она меняет вид (как бы "загорается").

Александр, не подскажете ли, можно ли сделать так, чтобы в этом меню разделов (т.е. в списке категорий) выбранная категория (в которую я только что перешел и в которой уже нахожусь) так и оставалась "подсвеченной", т.е. точно так же, как она "подсвечивалась" при наведении? Таким образом подсвеченная категория в боксе "категории/разделы" указывала бы посетителю ГДЕ ИМЕННО он сейчас находится.

Я не уверен, можно ли это выполнить лишь посредством CSS, либо же нужно произвести серьезные модификации categories.php или другого php-файла? Заранее спасибо за Ваш ответ!

[support 447]

Какой у тебя шаблон по умолчанию?

[Carl_Salos 0]

Извиняюсь, что задержался с ответом (или с вопросом?). Я пользую шаблон vamshop_table (Bububu попал "в яблочко").

[support 447]

Так вопрос уже решён?

[Carl_Salos 0]

Вопрос, к сожалению, все еще не решен.

Полез я в свой stylesheets.css (в табличном шаблоне vamshop_table) разбираться где же этот SPAN, про который Bububu говорил, и ничего не нашел. Вот у меня что есть:

.moduleRow {
 	font-family: Verdana, Arial, sans-serif;
 	font-size: 11px;
 	line-height: 1.5;
 	background-color: #9FF45A;
	border-color: #007DC2;
	border: 1px solid;
}
.moduleRowOver { 
	background-color: #F8C001;
      color: #000000; 
	border: 1px solid;
	border-color: #007DC2;
	font-family: Verdana, Arial, sans-serif;
    font-size: 11px;
    line-height: 1.5; 

	}

.moduleRowSelected { 
	background-color: #FFFFFF;
	border: 1px solid;
	border-color: #86C21D;
}

[/code]
"Подсвечивается" раздел стилем ".moduleRowOver ".  Но я в упор не вижу чем же подсветить "выбранный" раздел? 
Александр, помоги, пожалуйста. Ты ведь знаешь? Заранее спасибо.
P.S.: А своим "Bububu попал в Яблочко" я имел ввиду не то, что вопрос решен, а то, что он угадал, что я пользуюсь табличным шаблоном.

[support 447]

Так а как ты хочешь подсветить?

По умолчанию текущая категория выделяется жирным шрифтом b .... /b

[Carl_Salos 0]

У меня и так все ссылки жирные в меню разделов. А "подсветить" хотелось бы цветом фона и рамки (как категория подсвечивается при наведении), таким образом посетитель сможет просто взглянуть на меню категорий и по подсвеченной категории (фон другого цвета и рамка) он поймет где он сейчас находится...

Ну по умолчанию как: меню категорий - ничего не подсвечено. Навожу мышку на какую-либо категорию

- она подсвечивается при наведении. Нажимаю - попадаю в выбранную категорию. И в этой выбранной категории в меню категорий опять ничего не подчсвечено. А хотелось бы, чтобы эта категория (в которую я только что попал) была уже подсвечена (как бы "активна").

Может это просто невозможно сделать? Но я просто предположил, что КАК-ТО с помощью CSS или PHP это сделать реально.

[Carl_Salos 0]

Спасибо, Bububu! Я тебе отослал в личные сообщения URL сайта. Сюда адрес магазина не публикую, т.к. он пока в разработке :)

[support 447]

Carl_Salos

Попробуй в файле /templates/vamshop_table/source/inc/vam_show_category.inc.php заменить:

<b>
[/code]

на:
[code]
<div>

и:

</b>
[/code]

на:
[code]
</div>

В затем в /templates/vamshop_table/stylesheet.css просто сделать нужный фон, цвет, рамку и т.д.

Ты же в курсе как это делается в css или не совсем?

[support 447]

Bububu

Так возьми меню из vamshop шаблона.

т.е. возьми файл /templates/vamshop/source/boxes/categories.php и /templates/vamshop/source/inc/vam_show_categories.inc.php

А также стили из /templates/vamshop/stylesheet.css (ищи по boxCategories, там увидишь блок для бокса разделы) перепиши в табличный шаблон.

Либо есть CSS Menu в файлах.

Это меню также на css сделано, без js.

[Carl_Salos 0]

VaM, Bububu, господа!

Спасибо за предложенные варианты и активную помощь - сейчас читаю посты, лезу в личку и начинаю разбираться с написанной/присланной Вами информацией касательно данной проблемы. По получению каких-либо результатов - обязательно сообщу Вам здесь. Еще раз спасибо.

2 Bububu: JS - плохо? Что-же, в таком случае давайте от него откажемся. Знаю, эта шутка звучит глупо, но я бы даже от HTML и PHP отказался, если бы от этого все лучше заработало :)

[support 447]

Carl_Salos

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

Открывай файл /templates/vamshop_table/source/inc/vam_show_category.inc.php

В нём ищи код (у меня строки 54-63):

    if ( ($id) && (in_array($counter, $id)) ) {
      $categories_string .= '<b>';
    }

    // display category name
    $categories_string .= $foo[$counter]['name'];

    if ( ($id) && (in_array($counter, $id)) ) {
      $categories_string .= '</b>';
    }
[/code]

Меняй его на:
[code]
    if ( ($id) && (in_array($counter, $id)) ) {
      $categories_string .= '<span class="selected">';
    }

    // display category name
    $categories_string .= $foo[$counter]['name'];

    if ( ($id) && (in_array($counter, $id)) ) {
      $categories_string .= '</span>';
    }

т.е. по умолчанию активная категория выделяется жирным b ... /b Мы поменяли на span ... /span Просто так логичнее, есть больший простор для управления стилем тэга span. Затем в /templates/vamshop_table/stylesheet.css внизу добавляй стиль для тэга span class="selected", т.е. вот так примерно:

span.selected {
     background-color: #ffb3b5; 
}
[/code]
Всё, теперь фон у выделенной категории будет красный.
Это лишь пример, теперь ты просто можешь другие эффекты через css добавлять.
Рамки, отступы и т.д.

[Carl_Salos 0]

Александр, большое спасибо за подсказку - теперь я по крайней мере знаю, как можно воздействовать на список категорий. Я сделал все, как ты написал, но дело в том, что оно подсвечивает бэкграунд выбранной категории только за текстом, т.е. меняется фон текста, а не фон ячейки, в которой эта категория (текст ссылки на раздел) находится. Я сейчас продолжу разбираться с CSS, может быть получится найти как менять фон всей ячейки, но пока не могу быть уверен. В любом случае спасибо.

[support 447]

Так а что нужно, ячейку всю подсвечивать?

[Carl_Salos 0]

Не то, чтобы "экстренно нужно", но. мне кажется, это был бы самый интересный с точки зрения исполнения вариант. В любом случае, Александр, спасибо. Bububu - тоже спасибо. Вы вдвоем почти одновременно мне дали два чудесных несколько похожих друг на дружку варианта подсветки (VaM - подсветка фона текста, Bububu - подсветка самого текста). На одном из них я пока и остановился. Подсветить всю ячейку было бы здОрово, но то, что с Вашей помощью, господа, уже получилось - это уже, в принципе, весьма неплохое решение проблемы. Еще раз огромное Вам спасибо!

[o-lala 0]

чтобы не создавать еще одну тему ради одного ерундового вопроса, спрошу здесь.

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

help! )

[support 447]

В /templates/vamshop/stylesheet.css

Там где стили для бокса разделы (можно найти по Список разделов) добавляйте что-то вроде:

#categoriesBoxMenu .boxMenuSubCategory2 a, 
#categoriesBoxMenu .boxMenuSubCategory2 a:hover
   {
     color: red;
     font-size: 18px;
   }
[/code]
Это если версия магазина 1.38, если чуть более ранняя, то вместо boxMenuSubCategory2 просто boxMenuSubCategory

[support 447]

Это будут стили на второго уровня категорий, для третьего уровня - boxMenuSubCategory3 и т.д.

[o-lala 0]

спасибо, сейчас попробую. это версия 1.38 на денвере.

[matvey 0]

Саша, есть вопрос по подсветке категории в которой находишся в версии 1,39.

Там нет тега span что-бы прицепить к нему selected, но все таки он где-то ведь задается, потому как название категории и подкатегории в которой находишся выделяется жирным. Если править css, у меня получилось только выделить категорию и все подкатегории, что находятся в ней. Не подскажешь как?

И как сделать дизайн категорий и подкатегорий отличными друг от друга?

[support 447]

Выделенные категории имеют класс Current

У меня ж по умолчанию выделенные категории жирным выделяются, смотри в /templates/шаблон/stylesheet.css:

#categoriesBoxMenu #CatNavi .CurrentParent a 
   { 
     font-weight: bold; 
   }

#categoriesBoxMenu #CatNavi li a,
#categoriesBoxMenu #CatNavi .Current li a,
#categoriesBoxMenu #CatNavi .CurrentParent li a,
#categoriesBoxMenu #CatNavi .CurrentParent .Current li a 
   { 
     font-weight: normal; 
   }

#categoriesBoxMenu #CatNavi .Current a,
#categoriesBoxMenu #CatNavi .CurrentParent .Current a 
   { 
     font-weight: bold; 
   }
[/code]
Это как раз выделяется родительская и текущая категория жирным шрифтом.

[matvey 0]

Спасиб, разобрался. Немного замысловатое меню, но получилось нормально.

[support 447]

Да, замысловатое с первого взгляда, но оно, если можно так сказать, идеологически правильное:

1. Построено на списках (ul, li).

2. Имеет правильную вложенность.

3. Для каждого раздела свой CSS класс.

4. Для каждого активного раздела свой CSS класс.

5. Для каждой родительной категории свой CSS класс.

6. Для каждой активной родительской категории свой CSS класс.

Это значит, что через css можно добираться до любой категории, любого уровня, до любой отдельной категории, например категория X может по-своему выглядеть, а категория Y совсем по-другому, либо отдельный уровень категорий выглядеть не так как все, например можно выделить категорию с какими-то сезонными товарами, со скидками и т.д.

Чисто внешне, через css, можно делать тоже разные виды меню (так называемые drop-down, flyout, sliding doors и т.д.), не только в том виде как сейчас, просто как выглядит сейчас это вариант по умолчанию что называется.

Примеры css меню можно посмотреть на http://www.cssplay.co.uk/menus/

Вот там тоже меню строятся через css, а html-код в принципе одинаков везде.

Я постараюсь в будущем как раз написать пару заметок на тему этого и меню и примеров его использования.

Но тут конечно нужно css знать, без него никак.

[matvey 0]

Да меню отличнейшее - самое главное его легко контролировать и управлять. Вот небольшого мануала и несколько вариантов применения не помешает. Будем ждать! Я думаю такое меню интересно не только мне. Можно судить по просмотрам этой темы (Прочитано 765 раз). Если мне не изменяет память немало пользователей ищут этот священный Грааль :) , и я в том числе перепробовал все меню категорий, что есть в файлах, но они и рядом не лежали с данным меню.

Благодарю за ссылку, сохранил в избранное. От изобилия различных менюшек у меня аж глаза разбежались.

[support 447]

Да, будут примеры, только чуть позже, сейчас дописывают новый раздел vamshop.ru/manual

Вобщем, посмотрим, но обязательно будут примеры.