Mercado: верхнее меню после нестандартных правок отображается некорректно

[10 ноября 2016 г.]    Российская сборка Magento 2.49.12
Magento 2: модули и услуги
#1 Алексей Лазарев
  • Группа: Пользователь
  • Сообщений: 143
  • Регистрация: 19.11.2011

17.04.2012 20:03

Здравствуйте, уже третий день пытаюсь решить проблему (написал на все известные форумы по css, но там разводят руками) :

При выборе раздела в верхнем меню, раздел окрашивается в чёрный цвет (становится как-бы "посещенный"), смена цвета в коде стиля меняет также цвет пункта верхнего меню - то есть получается они взаимосвязаны, можно ли каким-либо образом убрать выделение чёрным цветом в открытом меню? (на картинке эта область выделена красной линией) или может быть есть шанс кастомизировать эту область? И откуда она вообще там взялась? Буду очень благодарен за пояснения ... Спасибо за внимание!


Код стиля меню:

.nav-container { }
#nav { text-transform: uppercase; position: relative; }
 
/* All Levels */ /* Style consistent throughout all nav levels */
#nav li { text-align:left;      }
#nav li.over { z-index:998;}
#nav li.over.parent { border-bottom:8px solid #090909; }
#nav a,
#nav a:hover { display:block; line-height:1.3em; text-decoration:none; }
#nav span { display:block; cursor:pointer; white-space:nowrap; }
#nav li ul span { white-space:normal; }
 
/* 0 Level */
#nav li { float:left; margin: 3px 5px 3px 0; padding:5px 8px; }
#nav > li > a > span { font-weight: normal; font-size: 14px;}
#nav li.level0 { background:#818181; }
#nav li.level0:hover { background:#090909; }
#nav a { float:left; color: #2A2A2A; font-weight:bold; font-size: 12px; }
#nav > li:hover > ul { left:0; }
#nav li.over.parent{ margin:3px 5px -5px 0; }
#nav li.over,
#nav li.active { background:#090909; }
#nav ul.chield > li { display:block; float:left; padding: 0 15px 0 0; border-right: 4px solid #373737; }
#nav .chield {width: 968px; border: 1px solid #252525; }
#nav .clearence {float:right; background:#818181!important; margin-right:0; }
#nav .clearence:hover {  background:#090909!important;}
#nav .clearence a { color: #fff; }
 
/* 1st Level */
#nav ul li {float:none; margin:0; padding:0; }
#nav ul li,
#nav ul li.active,
#nav ul li.over { padding-bottom:1px; text-transform:none; }
#nav ul li.parent { }
#nav ul li.last { padding-bottom:0; }
#nav ul li.active { }
#nav ul a,
#nav ul a:hover { float:none; padding:0; background:none; }
#nav ul a:hover { text-decoration:underline; }
#nav > li > ul > li > a { }
#nav > li > ul > li.parent > a span { font-size: 11px; padding: 0 0 1px 0; text-transform: uppercase; }
#nav ul li a { font-weight:normal; }
 
/* 2nd Level */
#nav li:hover #nav  ul,
#nav div {left: 100px;}
#nav  ul,
#nav div { top: 34px; left:-10000px; padding:3px 0 15px; background:#FFFFFF; font-size:11px; }
#nav > li > ul >li { width: 120px; margin:0 15px 0 0; }
#nav div ul { position:static; width:auto; border:none; padding:0; }
 
#nav ul.level0 { position:absolute; z-index: 1500; padding: 20px 15px 15px; }
 
/* 3rd+ Level */
#nav ul ul,
#nav ul div { top:5px; padding: 5px 0px; }
 
#nav ul li a { padding:3px 0; }
#nav ul li a:hover { padding:3px 0;}
 
/* Show menu */
#nav li ul.shown-sub,
#nav li div.shown-sub { left:-1px; z-index:999; }
#nav li .shown-sub ul.shown-sub,
#nav li .shown-sub li div.shown-sub { left:100px; }








Код файла top.phtml отвечающий за вывод меню

<?php
/**
 * $this->renderCategoriesMenuHtml() supports optional arguments:
 * int Level number for list item class to start from
 * string Extra class of outermost list items
 * string If specified wraps children list in div with this class
 */
?>
<?php $_menu = $this->renderCategoriesMenuHtml(0,'level-top') ?>
<div class="nav-container">
    <ul id="nav">
        <li class="level0 first homelink"><a href="<?php echo $this->getBaseUrl(); ?>"><span><?php echo $this->__('Home') ?></span></a></li>
        <?php if($_menu): ?>
            <?php echo $_menu ?>
        <?php endif ?>
        <?php $additionalLink = themeOptions('additionalLink'); ?>
        <?php $additionalLinkUrl = themeOptions('additionalLinkUrl'); ?>
        <?php if($additionalLinkUrl && $additionalLink): ?>
            <li class="level0 clearence"><a href="<?php echo $additionalLinkUrl ?>" title="<?php echo $additionalLink ?>"><span><?php echo $additionalLink ?></span></a></li>
        <?php endif ?>        
    </ul>
</div>

Прикрепленные изображения

  • Прикрепленное изображение: 6d73c908a93bec8b807f51c44509f29a.jpg


#2 Дмитрий Федюк
  • Администратор
  • Иконка
  • Группа: Администратор
  • Сообщений: 8885
  • Регистрация: 20.02.2010

17.04.2012 20:33

Данный форум предназначен для накопления информации и её повторного использования, поэтому надо писать: тема Mercado студии Eight Theme:
http://8theme.com/site_demo#mercado


#3 Дмитрий Федюк
  • Администратор
  • Иконка
  • Группа: Администратор
  • Сообщений: 8885
  • Регистрация: 20.02.2010

17.04.2012 20:39

Причём на официальном демо-сайте темы описанной вами проблемы у верхнего меню нет: там вообще другой фоновый цвет у меню.
Получается, вы уже вносили нестандартные правки в верхнее меню?

#4 Алексей Лазарев
  • Группа: Пользователь
  • Сообщений: 143
  • Регистрация: 19.11.2011

17.04.2012 20:41

Естественно вносил, просто изменил цвет фона меню и размер шрифта ...

Даже сейчас если на демо сайте выбрать категорию и сменить цвет фона меню - появится чёрная область ...

#5 Дмитрий Федюк
  • Администратор
  • Иконка
  • Группа: Администратор
  • Сообщений: 8885
  • Регистрация: 20.02.2010

17.04.2012 20:44

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

#6 Алексей Лазарев
  • Группа: Пользователь
  • Сообщений: 143
  • Регистрация: 19.11.2011

17.04.2012 20:49

Это я понимаю, только суть в другом - если изменить цвет посредством css - конечно будет всё в порядке, только остается не понятно откуда взялась это столь незамысловатая чёрная фигура ... уж явно не средствами css ... я пытался её отыскать, как и многие другие люди разбирающиеся в css. Возможно она наследуется из каких то системных файлов мадженто?

#7 Дмитрий Федюк
  • Администратор
  • Иконка
  • Группа: Администратор
  • Сообщений: 8885
  • Регистрация: 20.02.2010

17.04.2012 20:53

Нет, там всё правится на CSS, фигура самая обычная для меню подобной структуры. Любой верстальщик-фрилансер поправит.

#8 Алексей Лазарев
  • Группа: Пользователь
  • Сообщений: 143
  • Регистрация: 19.11.2011

17.04.2012 20:55

Понятно ...

Поделиться темой: