There is a site without cms on pure html. Consists of the main blocks like head, sidebar, content and footer. There is a menu in the sidebar. If through the code editor put chrome on the class: active, the link is highlighted. The question is how and what (js or php or ...) select the menu item that the user is in now? And if the user goes two or three levels deep into the site, but the section of the site is the same, then how to be?

Here are the styles and menus (I honestly admit that they were taken from a githab and a little sawed):

#sidebar-button { color: #666 !important; line-height: 3em; text-align: center; display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; overflow: hidden; margin-left: 10%; width: 81%; margin-bottom: 3%; border: 1px solid #8c8c8c; border-radius: 10px 10px 10px 10px; } #sidebar-button:before { content: ""; position: absolute; z-index: -1; left: 50%; right: 50%; bottom: 0; background: #2098d1; height: 4px; -webkit-transition-property: left, right; transition-property: left, right; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } #sidebar-button:hover:before, #sidebar-button:focus:before, #sidebar-button:active:before { left: 0; right: 0; } 
 <div id="sidebar"> <ul style="width: 100%;padding-left: 0px; list-style: none;"> <li><a id="sidebar-button" href="/1/page.html">Пункт 1</a> </li> <li><a id="sidebar-button" href="/2/page1.html">Пункт 2</a> </li> <li><a id="sidebar-button" href="/3/page2.html">Пункт 3</a> </li> <li><a id="sidebar-button" href="/4/page3.html">Пункт 4</a> </li> <li><a id="sidebar-button" href="/5/page4.html">Пункт 5</a> </li> </ul> </div>

  • Or maybe I’ve done a lot here and the code as a whole is crooked and ugly? - slake

2 answers 2

Add to styles

 #sidebar-button.selected:before{left: 0; right: 0}

Or edit the line

 #sidebar-button:hover:before, #sidebar-button:focus:before, #sidebar-button:active:before { left: 0; right: 0; }

By adding there #sidebar-button.selected:before , separated by commas, like the rest

Then in the html pages in the menu, add to the menu class="selected" in the corresponding page menu items. It should look like this:

 <li><a id="sidebar-button" class="selected" href="/3/page2.html">Пункт 3</a></li>

From myself I will add that this code is clearly not for you, and besides, it is not valid. Better to try to learn css yourself and make everything easy and much better.

  • I forgot to clarify that the sidebar.html file is inserted (sort of include) in the main html. those. it is necessary to somehow somehow make the item active .. If only a few of these sidebars are made and in each note which item is active and which one is not and then connect to the main html, but this is probably not the right decision. - slake

Very bad code, didn’t you learn that the ID should be unique and not be repeated in any way in the code

 .sidebar ul {width: 100%;padding-left: 0px; list-style: none;} .sidebar ul li a {...} .sidebar ul li a:before {...} .sidebar ul li a:hover:before, .sidebar ul li a:focus:before, .sidebar ul li.active a:before {...} <div class="sidebar"> <ul> <li><a href="/1/page.html">Пункт 1</a></li> <li><a href="/1/page.html">Пункт 2</a></li> <li class="active"><a>Пункт 3</a></li> <li><a href="/1/page.html">Пункт 4</a></li> <li><a href="/1/page.html">Пункт 5</a></li> </ul> </div>

It is better to cling to li this class active

  • To be honest, no, not taught. The first time I heard about this. I read about it, really ID should be unique and not repeat. Thank you very much for your comment =) There is a question - if I <a> will put in <li>, then it turns out that only the text in this <li> will be clickable. And how to make it so that the whole <li> is clickable in this case? - slake
  • I recommend that you ask this question to a teacher or read a textbook on HTML and CSS. - Shnur