Здравствуйте.
Требуется сделать подсветку пункта меню в зависимости от того, на какой странице пользователь. Т.е. вставить в <li>
параметр class="current"
, если мы находимя на той или иной странице.
Так же прошу обратить внимание на data-hover=""
в теге <li>
Код меню (подключается в index.php)
.menu_buttons {
margin: 11px 0 0 133px;
font-family: Raleway, Arial, sens-serif;
font-size: 20px;
text-transform: uppercase;
font-weight: 500;
}
.menu_buttons * {
box-sizing: border-box;
}
.menu_buttons li {
display: inline-block;
list-style: outside none none;
margin: 0 0.5em;
padding: 0;
}
.menu_buttons a {
padding: 0.5em 0;
color: rgba(255, 255, 255, 0.5);
position: relative;
letter-spacing: 1px;
text-decoration: none;
}
.menu_buttons a:before,
.menu_buttons a:after {
position: absolute;
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
}
.menu_buttons a:before {
bottom: 0;
display: block;
height: 3px;
width: 0%;
content: "";
background-color: #50986d;
}
.menu_buttons a:after {
left: 0;
top: 0;
padding: 0.5em 0;
position: absolute;
content: attr(data-hover);
white-space: nowrap;
max-width: 0%;
overflow: hidden;
}
.menu_buttons a:hover:before,
.menu_buttons .current a:before {
opacity: 1;
width: 100%;
}
.menu_buttons a:hover:after,
.menu_buttons .current a:after {
max-width: 100%;
}
/*---------------*/
body {
padding: 50px;
background: #333;
}
<ul class="menu_buttons">
<li class="current"><a href="#" data-hover="main">main</a>
</li>
<li><a href="#" data-hover="archive">archive</a>
</li>
<li><a href="#" data-hover="feedback">feedback</a>
</li>
</ul>
Спасибо за внимание.