Por usabilidad, siempre es recomendable dejarle claro al usuario dónde está parado dentro del sitio. Existen varias maneras de hacerlo, desde dejar evidente en el </strong> en qué sección se está, pasando por mostrar un pequeño mapa de navegación desde y hasta dónde está ubicado (<em>Inicio > Quiénes Somos > Empleados</em> por ejemplo) o dejar seleccionado en el menú de navegación dónde uno está parado, con una clase especial. En este caso, en sitios pequeños a medianos, recomiendo utilizar un pequeño y simple truco que involucra <strong>HTML</strong> y <strong>CSS</strong>.</p> <p>Hagamos un layout muy simple. En este caso, un menú con listas y un contenido sólo para que no esté tan vacío (reciclaré el <strong>HTML</strong> de un <a href="http://www.csslab.cl/2007/03/02/columnas-de-igual-alto/">post anterior</a>):</p> <p class="codehtml"> <div id="menulateral"><br />      <ul><br />           <li><a href="#" class="selected1">Item Uno</a></li><br />           <li><a href="#" class="selected2">Item Dos</a></li><br />           <li><a href="#" class="selected3">Item Tres</a></li><br />      </ul><br /> </div><br /> <div id="contenido"><br />      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ut risus hendrerit sem adipisc………</p><br /> </div> </p> <p>Como se dieron cuenta, cada ítem del menú tiene una <strong>class=“selected”</strong> con diferencias numéricas consecutivas (este es mi criterio, utilicen el que más les convenga) . El truco está en darle al <strong><body></strong> un <strong>ID</strong> específico, en este caso será uno para cada sección de nuestro menú, en total 3. Con este <strong>ID</strong>, mediante <strong>CSS</strong> le daremos un estilo para cada class <strong>selected</strong>, así si nos encontramos ubicados por ejemplo en el <strong>HTML</strong> con el <strong>id=“item2”</strong>, gatillará que la class <strong>selected2</strong> de ese <strong>ID</strong> será desplegada. ¿Se entendió? Mejor sigo con el código <strong>CSS</strong> para que quede más claro:</p> <p class="codecss"> body#item1 a.selected1, body#item2 a.selected2, body#item3 a.selected3 {<br />      text-decoration: none;<br />      padding-left: 10px;<br /> } </p> <p>Entonces, nuevamente, tenemos 3 páginas <strong>HTML</strong> cada una con un <strong>ID</strong> diferente, de acuerdo con la sección en que estamos. Cada <strong><a></strong> del menú tiene una <strong>class</strong> diferente también, para poder diferenciarlas. La idea es con el <strong>CSS</strong> poder manejar el estilo para mostrar al usuario que estamos ubicados en esa parte del sitio sin tener que tocar el <strong>HTML</strong>, basta con dejar las classes siempre puestas, pero con diferentes <strong>ID’s</strong> en el <strong>< body></strong>.</p> <p><a href='/ejemplos/menu_selected/1'>Ver HTML final</a> (view source para más detalles)</p> <p><a href="/ejemplos/menu_selected/test.css">Ver Hoja de Estilos Final</a></p> </div></div> <div class="pagination"> <div class="pagination__title"> <span class="pagination__title-h">Leer otros artículos</span> <hr /> </div> <div class="pagination__buttons"> <span class="button previous"> <a href="/2007/03/19/diseno-para-moviles-referencia/"> <span class="button__icon">←</span> <span class="button__text">Diseño para móviles: referencia</span> </a> </span> <span class="button next"> <a href="/2007/03/09/clearfix-el-widget/"> <span class="button__text">.clearfix: el widget</span> <span class="button__icon">→</span> </a> </span> </div> </div> </div> </div> <footer class="footer"> <div class="footer__inner"> <div class="copyright copyright--user"> <span>© CSSLab 2005 ~ 2022. Todos los derechos reservados.<br> Escrito y mantenido por Jorge Epuñan desde 🇨🇱.</span> </div> </div> </footer> <script src="/assets/main.js"></script> <script src="/assets/prism.js"></script> <script src="//static.codepen.io/assets/embed/ei.js" async></script> </div> </body> </html>