JSFiddle - React, Tailwind, and code Playground
HTML
<div id="sidebar">
<ul class="menu st">
<li>
<a href="index.html">Новости</a>
</li>
<li>
<a href="fiddle">Продукты</a>
</li>
<li>
<a href="pages/users.html">Получатели средств</a>
</li>
<li><a href="pages/questions.html">Часто задаваемые вопросы</a>
</li>
<li><a href="pages/contacts.html">Контакты</a>
</li>
</ul>
</div>
CSS
ul.menu, ul.menu ul {
list-style-type:none;
margin: 0;
padding: 0;
width: 270px;
}
ul.menu a {
display: block;
text-decoration: none;
font-size:17px;
font-weight:bold;
}
ul.menu li {
margin-top: 1px;
}
ul.menu li a, ul.menu ul.menu li a {
background: #CCC;
color: #036;
padding: 0.5em;
padding-left: 20px;
}
ul.menu li a:hover, ul.menu ul.menu li a:hover {
background: #F90;
}
ul.menu li ul li a, ul.menu ul.menu li ul li a {
background: #27408B;
color: white;
padding-left: 20px;
}
ul.menu li ul li a:hover, ul.menu ul.menu li ul li a:hover {
background: #aaa;
border-left: 5px #000 solid;
padding-left: 15px;
}
ul.menu ul.menu li a:hover {
border-left: 0;
padding-left: 0.5em;
}
ul.menu ul.menu {
border-left: 5px #f00 solid;
}
ul.menu a.active, ul.menu ul.menu li a.active, ul.menu a.active:hover, ul.menu ul.menu li a.active:hover {
text-decoration: underline;
background: #F90;
}
div.panel {
border: 1px #000 solid;
padding: 5px;
margin-top: 1px;
}
ul.menu div.panel a, ul.menu div.panel li a:hover {
display :inline;
color: #666;
background: none;
margin: 0;
padding: 0;
border: none;
font-weight: bold;
}
ul.menu div.panel a:hover {
color: #000;
text-decoration: underline;
}
JavaScript
var loc = document.location.toString();
// адрес данной страницы - http://fiddle.jsshell.net/_display/
$("li a").each(function(i) {
if (loc.indexOf($(this).attr('href'))>-1)
$(this).css("background-color", "#F90");
} );
// совпадение будет в <a href="fiddle">Продукты</a>