Перейти к содержанию
Официальный форум поддержки Simpla

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

Всем привет. Прошу помощи - не могу разобраться со стилем меню. Реализовать хочу так, чтобы при наведение курсора кнопка категории меняла цвет на N-цвет и при активности данной категории N-цвет сохранялся.  Для преобразовании цвета при наведение можно смело использовать li:hover, но вот активным он не остается да и вообще игнорирует команду active для LI

 

#catalog_menu .accordion .active - это реализует цвет текста, но к нему не могу поставить отступы т.к. меню разъезжается. 

 

Цель сего предприятия, сделать меню что-то типа как на http://www.hobbycenter.ru/

Вот мое rc-shopping.ru

 

 

#catalog_menu {
    margin-bottom: 20px;
}
#catalog_menu li {
    padding: 18px 0 18px 5px;
    border-top: 1px solid #f3f2f2;
    background-color: #E7E7E7;
}
#catalog_menu li > ul {
    padding:0;
    border:none;
}
#catalog_menu li > ul > li {
    border:none;
    padding: 10px 0 10px 15px;
    background:none;
}
 
#catalog_menu .accordion .active {
color: #f4f4f4;
}
 
#catalog_menu a:hover {
       color: #DA041F;
}
#catalog_menu a {
    font-size:10px;
    text-transform: uppercase;
    color: #191919;
}

 

 
<div id="catalog_menu">
               {* Рекурсивная функция вывода дерева категорий *}
               {function name=categories_tree}
               {if $categories}
               {foreach $categories as $c}
               {* Показываем только видимые категории *}
               {if $c->visible}
                      
             <li>
                  <a href="catalog/{$c->url}" data-category="{$c->id}" {if $category->id == $c->id}class="active"{/if}>{$c->name}</a>
          <span class=menu> {if $c->image}<img src="{$config->categories_images_dir}{$c->image}" alt="{$c->name}">{/if} </span>
                 {if $c->subcategories} 
                  <ul>
                     {categories_tree categories=$c->subcategories}
                  </ul>
                  {/if}
               </li>
               {/if}
               {/foreach}
               {/if}
               {/function}
               <ul class="accordion" id="accordion-1">
                  {categories_tree categories=$categories}
               </ul>
            </div>
            </div>

 

 

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

Потому что класс ACTIVE надо добавлять не для LI, а к ссылке - A. В коде ведь именно ссылке Вы присваиваете класс ACTIVE

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

Потому что класс ACTIVE надо добавлять не для LI, а к ссылке - A. В коде ведь именно ссылке Вы присваиваете класс ACTIVE

 

Вы совершенно правы, но данное решение подсвечивает все что находится внутри <a> </a> а для реализации задачи требуется подсветить <li> так-как именно к "catalog_menu li" применен padding который как раз и должен заливаться при наведении курсора и в активном состоянии. 

 

Говоря проще, active применить к тексту возможно, а именно .accordion .active, а вот как подсветить li? 

 

<li> <span class="menu"> {if $c->image}<img src="{$config->categories_images_dir}{$c->image}" alt="{$c->name}">{/if}</span>

       <a href="catalog/{$c->url}" data-category="{$c->id}" {if $category->id == $c->id}class="active"{/if}>{$c->name}</a>
                  {if $c->subcategories}
                 <ul>
                     {categories_tree categories=$c->subcategories}
                  </ul> {/if} </li>
 
Я пробовал задать класс <li class =блаблабла но имя для Li задается автоматически accordion-parent-li, к нему так-же active не применяется. Господа, может кто нибудь возьмется за реализацию, укажите цену только. 
Ссылка на сообщение
Поделиться на другие сайты

Может я не правильно делаю или недопонимаю. К li присваивается автоматически класс accordion-parent-li, возможно по этому игнорируется #catalog_menu li.active { }? На сайте разработчика меню есть несколько вариантов вида меню как раз с необходимым функционалом, попробую узреть. 
 
Вообщем пробовал так:

<li {if $category->id == $c->id}class="active"{/if}>
{$c->name}<span class="menu"> {if $c->image}<img src="{$config->categories_images_dir}{$c->image}" alt="{$c->name}">{/if}</span>
<a href="catalog/{$c->url}" data-category="{$c->id}" </a>
                  {if $c->subcategories}
                 <ul>
                     {categories_tree categories=$c->subcategories}
                  </ul> {/if} </li>

_______________________________

<div id="catalog_menu">
<ul class="accordion" id="accordion-1">
<li>
<span class="menu"> <img src="files/categories/car.png" alt="РАДИОУПРАВЛЯЕМЫЕ МАШИНЫ"></span>
<a href="catalog/radioupravlyaemye-mashiny" data-category="18" >РАДИОУПРАВЛЯЕМЫЕ МАШИНЫ</a>
<ul><li >

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

Задача реализована. Just_simao благодарность за помощь.

Вообщем-то решение было проще, все от отсутствия опыта. Достаточно было padding применить к <a>, чтобы он не разъезжался применить display block и задать свойства уже к <a>.

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

Присоединяйтесь к обсуждению

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

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

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

Загрузка...
×
×
  • Создать...