Jump to content

Recommended Posts

Всем привет. Прошу помощи - не могу разобраться со стилем меню. Реализовать хочу так, чтобы при наведение курсора кнопка категории меняла цвет на 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>

 

 

Link to post
Share on other sites

Потому что класс 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 не применяется. Господа, может кто нибудь возьмется за реализацию, укажите цену только. 
Link to post
Share on other sites

Может я не правильно делаю или недопонимаю. К 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 >

Link to post
Share on other sites

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

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

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...