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>