Skip to content

Commit 5584aaa

Browse files
zanileezanilee
committed
MAGETWO-34180: Active item in Nivagation menu is not highlighted
1 parent 88ef1e1 commit 5584aaa

File tree

3 files changed

+104
-41
lines changed

3 files changed

+104
-41
lines changed

‎app/code/Magento/Theme/Block/Html/Topmenu.php

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77

88
use Magento\Framework\View\Block\IdentityInterface;
99
use Magento\Framework\View\Element\Template;
10+
use Magento\Framework\Registry;
1011

1112
/**
1213
* Html page top menu block
@@ -27,6 +28,22 @@ class Topmenu extends Template implements IdentityInterface
2728
*/
2829
protected $_menu;
2930

31+
/**
32+
* Core registry
33+
*
34+
* @var Registry
35+
*/
36+
protected $registry;
37+
38+
public function __construct(
39+
Registry $registry,
40+
Template\Context $context,
41+
array $data = []
42+
) {
43+
$this->registry = $registry;
44+
parent::__construct($context, $data);
45+
}
46+
3047
/**
3148
* Init top menu tree structure
3249
*
@@ -266,11 +283,17 @@ protected function _getMenuItemClasses(\Magento\Framework\Data\Tree\Node $item)
266283
$classes[] = 'level' . $item->getLevel();
267284
$classes[] = $item->getPositionClass();
268285

286+
$currentCategoryName = $this->registry->registry('current_category')->getName();
287+
269288
if ($item->getIsFirst()) {
270289
$classes[] = 'first';
271290
}
272291

273-
if ($item->getIsActive()) {
292+
if ($item->getIsActive() && $currentCategoryName != $item->getName()) {
293+
$classes[] = 'has-active';
294+
}
295+
296+
if ($currentCategoryName == $item->getName()) {
274297
$classes[] = 'active';
275298
}
276299

‎lib/web/css/source/lib/_navigation.less

Lines changed: 62 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
// _____________________________________________
99

1010
.main-navigation(
11-
@_nav__indent-side: 20px,
11+
@_nav__indent-side: 15px,
1212
@_nav-background-color: @navigation__background,
1313
@_nav-border: @navigation__border,
1414
@_nav-level0-font-size: @navigation-level0-item__font-size,
@@ -24,24 +24,32 @@
2424
@_nav-level0-item-text-decoration: @navigation-level0-item__text-decoration,
2525

2626
@_nav-level0-item-background-color-active: @navigation-level0-item__active__background,
27-
@_nav-level0-item__active__border-left: @navigation-level0-item__active__border-left,
27+
@_nav-level0-item__active__border-color: @navigation-level0-item__active__border-color,
28+
@_nav-level0-item__active__border-style: @navigation-level0-item__active__border-style,
29+
@_nav-level0-item__active__border-width: @navigation-level0-item__active__border-width,
2830
@_nav-level0-item-color-active: @navigation-level0-item__active__color,
2931
@_nav-level0-item-text-decoration-active: @navigation-level0-item__active__text-decoration,
3032

3133
@_submenu-background-color: @submenu__background,
3234
@_submenu-border: @submenu__border,
33-
@_submenu-padding: @submenu__padding,
3435
@_submenu-font-size: @submenu__font-size,
3536
@_submenu-font-weight: @submenu__font-weight,
36-
@_submenu-item-padding: @submenu-item__padding,
37+
@_submenu-line-height: @submenu-item__line-height,
38+
@_submenu-item__padding-top: @submenu__padding-top,
39+
@_submenu-item__padding-right: @submenu__padding-right,
40+
@_submenu-item__padding-bottom: @submenu__padding-bottom,
41+
@_submenu-item__padding-left: @submenu__padding-left,
3742

3843
@_submenu-item-background-color: @submenu-item__background,
3944
@_submenu-item-border: @submenu-item__border,
4045
@_submenu-item-color: @submenu-item__color,
4146
@_submenu-item-text-decoration: @submenu-item__text-decoration,
4247

4348
@_submenu-item-background-color-active: @submenu-item__active__background,
44-
@_submenu-item__active__border-left: @submenu-item__active__border-left,
49+
@_submenu-item__active__border: @submenu-item__active__border,
50+
@_submenu-item__active__border-color: @submenu-item__active__border-color,
51+
@_submenu-item__active__border-style: @submenu-item__active__border-style,
52+
@_submenu-item__active__border-width: @submenu-item__active__border-width,
4553
@_submenu-item-color-active: @submenu-item__active__color,
4654
@_submenu-item-text-decoration-active: @submenu-item__active__text-decoration
4755
) {
@@ -53,6 +61,16 @@
5361
margin: 0;
5462
padding: 0;
5563
}
64+
li {
65+
margin: 0;
66+
}
67+
a {
68+
display: block;
69+
.css(padding-top, @_submenu-item__padding-top);
70+
.css(padding-right, @_submenu-item__padding-right);
71+
.css(padding-bottom, @_submenu-item__padding-bottom);
72+
.css(padding-left, @_submenu-item__padding-left);
73+
}
5674
a,
5775
a:hover {
5876
.css(color, @_nav-level0-item-color);
@@ -61,30 +79,32 @@
6179
.level0 {
6280
.font-size(@_nav-level0-font-size);
6381
.css(border-top, @_nav-level0-item-border);
64-
margin: 0;
6582
> .level-top {
6683
.css(background, @_nav-level0-item-background-color);
6784
.css(font-weight, @_nav-level0-font-weight);
6885
.css(line-height, @_nav-level0-item-line-height);
6986
.css(padding, @_nav-level0-item-padding);
7087
.css(text-transform, @_nav-level0-text-transform);
71-
display: block;
7288
}
7389
> .level1 {
7490
font-weight: @font-weight__semibold;
75-
.ui-menu {
76-
padding-left: @_nav__indent-side;
77-
}
7891
}
79-
&.active {
92+
&.active,
93+
&.has-active { // ToDo UI: remove "has_active" here, when mobile navigation default open state is implemented
8094
> a:not(.ui-state-active) {
8195
.css(background, @_nav-level0-item-background-color-active);
82-
.css(border-left, @_nav-level0-item__active__border-left);
96+
.css(border-color, @_nav-level0-item__active__border-color);
97+
.css(border-style, @_nav-level0-item__active__border-style);
98+
.css(border-width, @_nav-level0-item__active__border-width);
8399
.css(color, @_nav-level0-item-color-active);
84100
.css(text-decoration, @_nav-level0-item-text-decoration-active);
85-
padding-left: @_nav__indent-side - @navigation-item__active__border-width;
101+
span:not(.ui-menu-icon) {
102+
margin-left: -@_submenu-item__active__border;
103+
}
86104
}
87105
}
106+
}
107+
li.level0 {
88108
&:last-child {
89109
.css(border-bottom, @_nav-level0-item-border);
90110
}
@@ -95,21 +115,24 @@
95115
.css(border, @_submenu-border);
96116
.css(font-size, @_submenu-font-size);
97117
.css(font-weight, @_submenu-font-weight);
118+
.css(line-height, @_submenu-line-height);
119+
left: auto !important;
98120
overflow-x: hidden;
121+
padding: 0;
99122
position: relative;
100-
transition: left .3s ease-out;
101123
top: auto !important;
102-
left: auto !important;
103-
padding: 10px 0;
124+
transition: left .3s ease-out;
104125
> li {
105126
> a {
106-
padding-right: @_nav__indent-side;
107127
padding-left: @_nav__indent-side;
108128
}
129+
&:last-child {
130+
margin-bottom: 0;
131+
}
109132
}
110-
> ul {
133+
ul {
111134
display: block;
112-
.css(padding, @_submenu-padding);
135+
.css(padding-left, @_submenu-item__padding-left);
113136
> li {
114137
margin: 0;
115138
a {
@@ -118,7 +141,6 @@
118141
.css(color, @_submenu-item-color);
119142
display: block;
120143
line-height: normal;
121-
.css(padding, @_submenu-item-padding);
122144
.css(text-decoration, @_submenu-item-text-decoration);
123145
}
124146
}
@@ -130,23 +152,21 @@
130152
.active {
131153
> a {
132154
.css(background, @_submenu-item-background-color-active);
155+
.css(border-color, @_submenu-item__active__border-color);
156+
.css(border-style, @_submenu-item__active__border-style);
157+
.css(border-width, @_submenu-item__active__border-width);
133158
.css(color, @_submenu-item-color-active);
134159
.css(text-decoration, @_submenu-item-text-decoration-active);
160+
padding-left: @_nav__indent-side - @_submenu-item__active__border;
135161
}
136162
}
137163
.level1 {
138164
&.active {
139165
> a {
140-
.css(border-left, @_submenu-item__active__border-left);
141-
padding-left: @_nav__indent-side - 8px;
166+
padding-left: @_nav__indent-side - @_submenu-item__active__border;
142167
}
143168
}
144169
}
145-
.level2 {
146-
&.active {
147-
font-weight: @font-weight__semibold;
148-
}
149-
}
150170
}
151171
}
152172
}
@@ -177,7 +197,9 @@
177197
@_nav-level0-item-text-decoration-hover: @navigation-desktop-level0-item__hover__text-decoration,
178198

179199
@_nav-level0-item-background-color-active: @navigation-desktop-level0-item__active__background,
180-
@_nav-level0-item__active__border: @navigation-desktop-level0-item__active__border,
200+
@_nav-level0-item__active__border-color: @navigation-desktop-level0-item__active__border-color,
201+
@_nav-level0-item__active__border-style: @navigation-desktop-level0-item__active__border-style,
202+
@_nav-level0-item__active__border-width: @navigation-desktop-level0-item__active__border-width,
181203
@_nav-level0-item-color-active: @navigation-desktop-level0-item__active__color,
182204
@_nav-level0-item-text-decoration-active: @navigation-desktop-level0-item__active__text-decoration,
183205

@@ -207,7 +229,9 @@
207229
@_submenu-item-text-decoration-hover: @submenu-desktop-item__hover__text-decoration,
208230

209231
@_submenu-item-background-color-active: @submenu-desktop-item__active__background,
210-
@_submenu-item__active__border: @submenu-desktop-item__active__border,
232+
@_submenu-item__active__border-color: @submenu-desktop-item__active__border-color,
233+
@_submenu-item__active__border-style: @submenu-desktop-item__active__border-style,
234+
@_submenu-item__active__border-width: @submenu-desktop-item__active__border-width,
211235
@_submenu-item-color-active: @submenu-desktop-item__active__color,
212236
@_submenu-item-text-decoration-active: @submenu-desktop-item__active__text-decoration
213237
) {
@@ -262,12 +286,16 @@
262286
.css(text-decoration, @_nav-level0-item-text-decoration-hover);
263287
}
264288
}
265-
&.active {
289+
&.active,
290+
&.has-active {
266291
> .level-top {
267292
.css(background, @_nav-level0-item-background-color-active);
268-
.css(border, @_nav-level0-item__active__border);
293+
.css(border-color, @_nav-level0-item__active__border-color);
294+
.css(border-style, @_nav-level0-item__active__border-style);
295+
.css(border-width, @_nav-level0-item__active__border-width);
269296
.css(color, @_nav-level0-item-color-active);
270297
.css(text-decoration, @_nav-level0-item-text-decoration-active);
298+
display: inline-block;
271299
}
272300
}
273301
&.parent:hover > .submenu {
@@ -312,7 +340,9 @@
312340
}
313341
.active > a {
314342
.css(background, @_submenu-item-background-color-active);
315-
.css(border, @_submenu-item__active__border);
343+
.css(border-color, @_submenu-item__active__border-color);
344+
.css(border-style, @_submenu-item__active__border-style);
345+
.css(border-width, @_submenu-item__active__border-width);
316346
.css(color, @_submenu-item-color-active);
317347
.css(text-decoration, @_submenu-item-text-decoration-active);
318348
}

‎lib/web/css/source/lib/variables/_navigation.less

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -23,26 +23,32 @@
2323
@navigation-level0-item__text-decoration: none;
2424

2525
@navigation-level0-item__active__background: '';
26-
@navigation-level0-item__active__border-left: @navigation-item__active__border-width solid @color-orange-red1;
26+
@navigation-level0-item__active__border-color: @color-orange-red1;
27+
@navigation-level0-item__active__border-style: solid;
28+
@navigation-level0-item__active__border-width: 0 0 0 8px;
2729
@navigation-level0-item__active__color: '';
2830
@navigation-level0-item__active__text-decoration: '';
2931

30-
@navigation-item__active__border-width: 8px;
31-
3232
@submenu__background: '';
3333
@submenu__border: '';
34-
@submenu__padding: 0 0 0 @indent__base;
34+
@submenu__padding-top: @indent__s;
35+
@submenu__padding-right: 0;
36+
@submenu__padding-bottom: @indent__s;
37+
@submenu__padding-left: 15px;
3538
@submenu__font-size: '';
3639
@submenu__font-weight: @font-weight__regular;
40+
@submenu-item__line-height: 1.3;
3741

38-
@submenu-item__padding: 8px 0;
3942
@submenu-item__background: '';
4043
@submenu-item__border: '';
4144
@submenu-item__color: @color-gray34;
4245
@submenu-item__text-decoration: '';
4346

4447
@submenu-item__active__background: '';
45-
@submenu-item__active__border-left: @navigation-level0-item__active__border-left;
48+
@submenu-item__active__border: 8px;
49+
@submenu-item__active__border-color: @color-orange-red1;
50+
@submenu-item__active__border-style: solid;
51+
@submenu-item__active__border-width: 0 0 0 @submenu-item__active__border;
4652
@submenu-item__active__color: '';
4753
@submenu-item__active__text-decoration: '';
4854

@@ -70,7 +76,9 @@
7076
@navigation-desktop-level0-item__hover__text-decoration: @navigation-desktop-level0-item__text-decoration;
7177

7278
@navigation-desktop-level0-item__active__background: '';
73-
@navigation-desktop-level0-item__active__border: '';
79+
@navigation-desktop-level0-item__active__border-color: @color-orange-red1;
80+
@navigation-desktop-level0-item__active__border-style: solid;
81+
@navigation-desktop-level0-item__active__border-width: 0 0 3px;
7482
@navigation-desktop-level0-item__active__color: @navigation-desktop-level0-item__hover__color;
7583
@navigation-desktop-level0-item__active__text-decoration: @navigation-desktop-level0-item__text-decoration;
7684

@@ -100,6 +108,8 @@
100108
@submenu-desktop-item__hover__text-decoration: @navigation-desktop-level0-item__text-decoration;
101109

102110
@submenu-desktop-item__active__background: '';
103-
@submenu-desktop-item__active__border: '';
111+
@submenu-desktop-item__active__border-color: @color-orange-red1;
112+
@submenu-desktop-item__active__border-style: solid;
113+
@submenu-desktop-item__active__border-width: 0 0 0 3px;
104114
@submenu-desktop-item__active__color: '';
105115
@submenu-desktop-item__active__text-decoration: '';

0 commit comments

Comments
 (0)