seplay Опубликовано 26 апреля, 2014 Жалоба Поделиться Опубликовано 26 апреля, 2014 Всем привет. Прошу помощи - не могу разобраться со стилем меню. Реализовать хочу так, чтобы при наведение курсора кнопка категории меняла цвет на 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> Цитата Ссылка на сообщение Поделиться на другие сайты
just_simao Опубликовано 27 апреля, 2014 Жалоба Поделиться Опубликовано 27 апреля, 2014 Потому что класс ACTIVE надо добавлять не для LI, а к ссылке - A. В коде ведь именно ссылке Вы присваиваете класс ACTIVE Цитата Ссылка на сообщение Поделиться на другие сайты
seplay Опубликовано 27 апреля, 2014 Автор Жалоба Поделиться Опубликовано 27 апреля, 2014 Потому что класс 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 не применяется. Господа, может кто нибудь возьмется за реализацию, укажите цену только. Цитата Ссылка на сообщение Поделиться на другие сайты
just_simao Опубликовано 27 апреля, 2014 Жалоба Поделиться Опубликовано 27 апреля, 2014 <li {if $category->id == $c->id}class="active"{/if}> и класс для него #catalog_menu li.active { } Цитата Ссылка на сообщение Поделиться на другие сайты
seplay Опубликовано 27 апреля, 2014 Автор Жалоба Поделиться Опубликовано 27 апреля, 2014 Не работает Цитата Ссылка на сообщение Поделиться на другие сайты
seplay Опубликовано 28 апреля, 2014 Автор Жалоба Поделиться Опубликовано 28 апреля, 2014 Может я не правильно делаю или недопонимаю. К 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 > Цитата Ссылка на сообщение Поделиться на другие сайты
seplay Опубликовано 29 апреля, 2014 Автор Жалоба Поделиться Опубликовано 29 апреля, 2014 Задача реализована. Just_simao благодарность за помощь.Вообщем-то решение было проще, все от отсутствия опыта. Достаточно было padding применить к <a>, чтобы он не разъезжался применить display block и задать свойства уже к <a>. Цитата Ссылка на сообщение Поделиться на другие сайты
Рекомендуемые сообщения
Присоединяйтесь к обсуждению
Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.