Puede esta navegación hacerse completamente en CSS

Estoy un poco atorado. He creado casi todo en la imagen de abajo. A lo que me ato es a tratar de descubrir cómo lo configuraría para que cuando un usuario haga clic en uno de los enlaces haga que la línea de abajo se ponga roja (después de que se cargue la siguiente página). Obviamente necesitaría usar Jquery para detectar la página y luego agregar css en línea, pero lo que estoy luchando es que quiero que esto sea lo más fácil posible para poder dar esta plantilla a otros y luego pueden agregar o eliminar elementos como necesario. Estaba tratando de averiguar si de alguna manera podría usar un elemento li para hacer esto, pero todavía no he encontrado la manera. ¿Alguien tiene alguna idea para ayudarme?Puede esta navegación hacerse completamente en CSS

enter image description here

Fuente

2012-03-23 atrljoe

Construye tu menú como este, en HTML:

<body id='Search' > 
    <div id='menu'> 
     <div class='bars'></div> 
     <a href='/home/' title='Home'>Home</a> 
     <a href='/community/' title='Community'>Community</a> 
     <a href='/search/' title='Search'>Search</a> 
     <a href='/contact/' title='Contact'>Contact</a> 
     <div class='bars shift'></div>    
    </div> 
</body>

Tenga en cuenta que el cuerpo de la etiqueta tiene una página específica id (como sugiere Cody). También tenga en cuenta que esta identificación debe ser la misma que el valor del atributo de título para el enlace del menú.

continuación, utilizar este CSS:

.bars {border-top:1px solid #CCC;border-bottom:1px solid #CCC;height:5px;} 
.shift {margin-top:-6px;} 
#menu {font-family:arial;font-size:12pt;text-align:center;}  
#menu a {display:inline-block;padding:7px;text-decoration:none;color:#000;} 
.active {border-bottom:5px solid red;}

Por último, anadir este jQuery para cada página:

$(document).ready(function(){ 
    var id = $('body').attr('id'); 
    $('#menu a').each(function() { 
     var title = $(this).attr('title'); 
     $(this).removeClass('active'); 
     if (title == id) $(this).addClass('active'); 
    }); 
});

Puede ver una demostración en vivo de violín here. (Para probar, simplemente cambie la identificación del elemento del cuerpo y presione ejecutar.)

EDITAR: Las ventajas de este método en comparación con el método de Cody Grays es que no necesita modificar el CSS cada vez que cambia el HTML cuando agrega, elimina o edita un elemento del menú. Por otro lado usa jQuery. Sin embargo, si desea una solución de CSS pura, solo elimine jQuery y el ID del elemento de cuerpo, y en su lugar aplique directamente la clase .active al enlace particular, dependiendo de la página en particular (similar a la sugerencia de jackJoe).

Esto se puede modificar fácilmente si debe usar elementos <li>.

Fuente

2012-03-24 00:13:36 Stefan

Al igual que puede introducir una identificación del cuerpo estáticamente de antemano o dinámicamente con la programación del lado del servidor, también puede aplicar la clase activa por adelantado o por el lado del servidor. – Stefan

Es bastante sencillo. Crear una clase para el estado "activo" y el estilo que:

<li class="active">Home</li>

y estilo que (depende de la estructura HTML, pero se entiende la idea)

CSS:

.active { 
    border-bottom: 3px red solid; 
}

Todo lo que necesita hacer es colocar la clase cuando se carga la página (lado del servidor, por ejemplo)

Fuente

2012-03-23 20:33:24 jackJoe

Puede hacerlo the way jackJoe suggests y configure el lado del servidor de la clase active en la página seleccionada actualmente, pero también puede hacerlo con CSS puro y un poco de planificación previa.

Esto implica establecer primero el atributo id para la etiqueta <body> de su página, que es una buena práctica para entrar de todos modos. Entonces, su archivo CSS se aprovechará de ese cuerpo id para determinar qué <li> debería aparecer como "activo".

Muestra código de la página:

<body id="main"> <!-- change this id for each page --> 
    <ul> 
     <li class="main-nav"><a href="#">Main</a></li> 
     <li class="community-nav"><a href="/community">Community</a></li> 
     <li class="search-nav"><a href="/search">Search</a></li> 
    </ul> 
</body>

Muestra CSS:

li.main-nav, 
li.community-nav, 
li.search-nav 
{ 
    background: #FFF; 
    /* your other awesome styles */ 
} 

#main li.main-nav, 
#community li.community-nav, 
#search li.search-nav 
{ 
    /* style the active tab differently */ 
    background: #F00; 
}

De esta manera, el código HTML para la sección de navegación puede estar completamente estática en cada página. No tiene que mostrarse en el lado del servidor ni modificarse dinámicamente en el lado del cliente.

Hay un buen reportaje sobre esta técnica disponible a través de trucos CSS: ID Your Body For Greater CSS Control and Specificity

Fuente

2012-03-23 20:40:13

Vine aquí para escribir esta técnica. Upvotes para usted, mi buen señor. –

Mira, no entiendo por qué las personas se molestan con basura como "¡no use selectores de ID en CSS!" Técnicas como esta son para qué ID es mejor. – BoltClock

El problema con su sugerencia es que cuando agrega un nuevo elemento al menú, también necesita agregar la nueva clase. Además, usar una clase "activa" en el elemento de menú te ayuda a separar el artículo en caso de que tengas subtemas. – jackJoe

Puede esta navegación hacerse completamente en CSS

Respuesta

Cuestiones relacionadas