Вопрос как выделить активный пункт меню protostar

  • 32 Ответов
  • 1322 Просмотров

0 Пользователей и 1 Гость просматривают эту тему.

*

stendapuss

  • Живу я здесь
  • ******
  • 829
  • 19
Шаблон protostar. Joomla 3.5.1
Есть меню в нем, пункт меню в нем подпункты. Надо выделить этот пункт и при переходе на подпункт выделить подпункт.
Пробовал:
Код
.active {
background-color: #ffffff;
}
.nav-child
{
background-color: #ffffff;
}
.item-131 {
background-color: #ffffff;
}
Выделяются все подпункты хором.
Надо типа, левое меню:
http://www.mani-mani-net.com/retseptiprigotovlenie/maso/svinina
Прописывал так же:
Код
 #article-index ul li a.active{color: #030962;}
#article-index ul li a.active{background-color: #ffffff;
Спасибо.

*

Grigory S.

  • Завсегдатай
  • *****
  • 664
  • 69
  • (с)
Код: css
#article-index ul li.active a{
    color: #030962;
    background-color: #ffffff;
}
Не задав правильный вопрос, невозможно получить правильный ответ.
Для "спасибок" существует кнопочка "+".

*

stendapuss

  • Живу я здесь
  • ******
  • 829
  • 19
Код: css
#article-index ul li.active a{
    color: #030962;
    background-color: #ffffff; В protostar не работает, в beez_2 работает. Может что еще прописать надо?
}

*

Grigory S.

  • Завсегдатай
  • *****
  • 664
  • 69
  • (с)
Если вы не переопределяли шаблон модуля меню, то должно работать, по умолчанию добавляется два класса к li активного пункта меню, current и active.
Не задав правильный вопрос, невозможно получить правильный ответ.
Для "спасибок" существует кнопочка "+".

*

stendapuss

  • Живу я здесь
  • ******
  • 829
  • 19
Не переопределяли, был сайт на Joomla 2.5, обновил до 3.5.1. Шаблон поставил  protostar.
Не работает.

*

Grigory S.

  • Завсегдатай
  • *****
  • 664
  • 69
  • (с)
Как я вижу, id вы взяли с сайта который скинули? (#article-index)
Сайт на локалке?
Не задав правильный вопрос, невозможно получить правильный ответ.
Для "спасибок" существует кнопочка "+".

*

stendapuss

  • Живу я здесь
  • ******
  • 829
  • 19

*

Grigory S.

  • Завсегдатай
  • *****
  • 664
  • 69
  • (с)
Зайдите в настройки модуля, который выводит это меню, в последней вкладке укажите ID меню, например mymenu, затем в CSS добавьте

Код: css
#mymenu li.active a{
    color: #030962;
    background-color: #fff;
}
Не задав правильный вопрос, невозможно получить правильный ответ.
Для "спасибок" существует кнопочка "+".

*

stendapuss

  • Живу я здесь
  • ******
  • 829
  • 19
Нет, выделяется все меню подраздела. Допустим пункт главного меню
Рецепты приготовления, заходим рецепты из мяса (подменю Рецепты приготовления.) выделяется все подменю раздела рецепты. А надо чтоб выделился раздел рецепты и отдельным цветом рецепты из мяса.

*

Shustry

  • Moderator
  • *****
  • 6426
  • 733
  • Рисую дизайны
Код: css
#mymenu > .active > a{
    color: #030962;
    background-color: #fff;
    display: inline-block;

}
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!

*

Shustry

  • Moderator
  • *****
  • 6426
  • 733
  • Рисую дизайны
Вообще, для конкретного пункта класс current используется обычно.
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!

*

stendapuss

  • Живу я здесь
  • ******
  • 829
  • 19
Код: css
#mymenu > .active > a{
    color: #030962;
    background-color: #fff;
    display: inline-block;

}
Не работает, заходишь мясо рецепты (подпункт рецепты). Выделяется Рецепты  (главный пункт раздел рецепты)

*

Shustry

  • Moderator
  • *****
  • 6426
  • 733
  • Рисую дизайны
Код: css
#mymenu .current a{
    color: #030962;
    background-color: #fff;
    display: inline-block;
}

Покажите ссылку на сайт, или хотя бы разметку меню, что выводится, приложите.
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!

*

stendapuss

  • Живу я здесь
  • ******
  • 829
  • 19
Вот так, что то похожее получается. Только весь раздел рецепты не выделен.
Код
ul.menu li .active{border:1px solid red;
background-color: #ffffff;
}
Сайт по ссылке выше. Только сейчас на компе Шаблон protostar. Joomla 3.5.1. А там Joomla 2.5. шаблон beez_20

*

Shustry

  • Moderator
  • *****
  • 6426
  • 733
  • Рисую дизайны
Код: css
ul.menu .current  {border:1px solid red;
background-color: #ffffff;
}
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!

*

stendapuss

  • Живу я здесь
  • ******
  • 829
  • 19
Код: css
ul.menu .current  {border:1px solid red;
background-color: #ffffff;
}
Не работает

*

Shustry

  • Moderator
  • *****
  • 6426
  • 733
  • Рисую дизайны
Код: css
ul.menu .current a {border:1px solid red;
background-color: #ffffff;
}
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!

*

stendapuss

  • Живу я здесь
  • ******
  • 829
  • 19
Дописал, завтра еще посмотрю, вроде выделяется. только не так как хотелось.:
Код
ul.menu li .active {border:2px solid red; box-shadow: inset 0 0 2em rgba(0, 0, 255, 1);
}
#mymenu li.active a{
    color: #0a0a8a;
border-bottom: 2px solid #06067a;
    font-weight: bold;     
}
.nav-tabs {
    vertical-align: top;
    width: 200px;
}

*

stendapuss

  • Живу я здесь
  • ******
  • 829
  • 19
Код: css
ul.menu .current a {border:1px solid red;
background-color: #ffffff;
}
НЕ работает так. Не знаю почему.

*

Shustry

  • Moderator
  • *****
  • 6426
  • 733
  • Рисую дизайны
Работает.
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!

*

stendapuss

  • Живу я здесь
  • ******
  • 829
  • 19
Работает.
Да не так как надо.
Надо типа этого, выделено чтоб все было. Пункт меню, подпункт, и его подпункт
https://yadi.sk/i/Oo8kazWnqk8zu
сделал, но не так что то, да кода много
Код
ul.menu li .active {border:5px double #6E0312; box-shadow: inset 0 0 1em rgba(0, 0, 255, 1);	
}
#mymenu li.active a{
    color: #0a0a8a;
border-bottom: 1px solid #06067a;
background-color: rgba(0,0,0,0.2);
border: 1px solid #fff;;
    font-weight: bold;
    line-height: 24px;
    padding: 0 30px;
}
https://yadi.sk/i/6MQPlP4gqk9Ru
Что то не то.

*

Shustry

  • Moderator
  • *****
  • 6426
  • 733
  • Рисую дизайны
.active — выделены текущий и все потомки;
.current — только текущий.
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!

*

stendapuss

  • Живу я здесь
  • ******
  • 829
  • 19
.active — выделены текущий и все потомки;
.current — только текущий.
Сделал вот так, почти нормально. Только главный пункт не выделен. Как выделить?
Код
}
ul.menu li .active {border:5px double #6E0312; box-shadow: inset 0 0 1em rgba(0, 0, 255, 1);
}
ul.menu .current a {border:1px solid red;
background-color: #ffffff;
}
https://yadi.sk/i/9wGHZBeIqkCY9
В данном случае пункт меню рецепты (не выделен) подпункт мясо рецепты выделен в обшей рамке, рецепты говядина фон белый. Надо чтоб весь сайта и подпункты его  рецепты был выделен одним цветом.
« Последнее редактирование: 05.04.2016, 13:56:50 от stendapuss »

*

stendapuss

  • Живу я здесь
  • ******
  • 829
  • 19
 Как по ссылке выше.

*

Shustry

  • Moderator
  • *****
  • 6426
  • 733
  • Рисую дизайны
Я вообще в этом «меню» не пойму, где какие пункты начинаются, какие заканчиваются. Я понимаю, что проект делается без дизайна, как такового, но добавьте хотя бы отступы — вертикальные для всех пунктов и горизонтальные для вложенных списков. Соответственно, не понял по скрину, что конкретно ещё нужно выделить.
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!

*

stendapuss

  • Живу я здесь
  • ******
  • 829
  • 19
Я вообще в этом «меню» не пойму, где какие пункты начинаются, какие заканчиваются. Я понимаю, что проект делается без дизайна, как такового, но добавьте хотя бы отступы — вертикальные для всех пунктов и горизонтальные для вложенных списков. Соответственно, не понял по скрину, что конкретно ещё нужно выделить.
https://yadi.sk/i/j-xLNoymqkNmv

*

stendapuss

  • Живу я здесь
  • ******
  • 829
  • 19
Типа этого надо было https://yadi.sk/i/v8NgcN2Hqn2w7

*

Shustry

  • Moderator
  • *****
  • 6426
  • 733
  • Рисую дизайны
Код: css
/*первый уровень*/
ul.menu > .active {
background:#c00;
}
ul.menu > .active > a {
background:#0с0;
color:#fff;
}
ul.menu > .active > ul {
background:#f00;
padding:15px;
}

/*второй*/
ul.menu > .active > ul > .active {
background:#123;
}
ul.menu > .active > ul > .active > a{
background:#789;
color:#c00;
}
ul.menu > .active > ul > .active > ul{
background:#999;
padding:10px;
}

/*третий*/
ul.menu > .active > ul > .active > ul > .active {
background:#fff;
}
ul.menu > .active > ul > .active > ul > .active a{
background:#eee;
color:#000;
}
ul.menu > .active > ul > .active > ul > .active ul{
background:#666;
padding:5px;
}
Бесплатно консультирую по дизайну и вёрстке (только в личку сердечно прошу не стучать). Платно делаю дизайн, вёрстку и темплейты для Joomla. Работаю только за деньги. За большие. И долго. Но качественно.
---------------------------------------------------------
xmpp:joomla@conference.jabber.ru - наша конфа!

*

stendapuss

  • Живу я здесь
  • ******
  • 829
  • 19
Спасибо, а так неправильно? У вас раздел рецепты не выделен. Я тоже так делал, только без ul.menu > .active > ul > .active > ul > .active {
Код
}
ul.menu li .active {border:10px double #000; box-shadow: inset 0 0 1em rgba(250, 0, 255, 1);
}
ul.menu .current a {
line-height: 1.5;
color: #fff;
}
.nav-tabs {
    vertical-align: top;
    width: 200px;
}
li { margin:10px 12px;border:5px double #3527f5; box-shadow: inset 0 0 1em rgba(250, 250, 255, 1);  
}
.nav > .active > a{   
   border:5px double #3527f5; box-shadow: inset 0 00 2em rgba(250, 110, 255, 1);
   display: inline-block;
 }
ul.menu .active a {   
color:#000;
 }
Только в запарке что то прописал, не могу найти теперь. Цвет зеленый. FireBug пишет inline находиться. Короче не могу найти где цвет поменять.
Спасибо.

*

stendapuss

  • Живу я здесь
  • ******
  • 829
  • 19
Спасибо, а так неправильно? У вас раздел рецепты не выделен. Я тоже так делал, только без ul.menu > .active > ul > .active > ul > .active {
Код
}
ul.menu li .active {border:10px double #000; box-shadow: inset 0 0 1em rgba(250, 0, 255, 1);
}
ul.menu .current a {
line-height: 1.5;
color: #fff;
}
.nav-tabs {
    vertical-align: top;
    width: 200px;
}
li { margin:10px 12px;border:5px double #3527f5; box-shadow: inset 0 0 1em rgba(250, 250, 255, 1);  
}
.nav > .active > a{   
   border:5px double #3527f5; box-shadow: inset 0 00 2em rgba(250, 110, 255, 1);
   display: inline-block;
 }
ul.menu .active a {   
color:#000;
 }
Только в запарке что то прописал, не могу найти теперь. Цвет зеленый. FireBug пишет inline находиться. Короче не могу найти где цвет поменять.
Спасибо.
Нашел что накосячил. Дак ответите так делать можно, правильно?