resaltar el menú de navegación de la página actual

23

Puede establecer la identificación del cuerpo de la página en algún valor que represente la página actual. Luego, para cada elemento en el menú, establece una clase específica para ese elemento de menú. Y dentro de su CSS se puede establecer una regla que pondrá de relieve el elemento de menú en concreto ...

Eso probablemente no tiene mucho sentido, así que aquí está un ejemplo:

<body id="index"> 
<div id="menu"> 
<ul> 
    <li class="index"  ><a href="index.html">Index page</a></li> 
    <li class="page1"  ><a href="page1.html">Page 1</a></li> 
</ul> 
</div> <!-- menu --> 
</body>

En el page1.html , debe establecer la identificación del cuerpo en: id="page1".

Por último, en el CSS que tienen algo como lo siguiente:

#index #menu .index, #page1 #menu .page1 { 
    font-weight: bold; 
}

Usted tendría que modificar la ID para cada página, pero el CSS sigue siendo el mismo, lo cual es importante que el CSS a menudo se almacena en caché y puede requerir una actualización forzada para actualizarse.

No es dinámico, pero es un método que es simple de hacer, y puede simplemente include el menú html desde un archivo de plantilla utilizando PHP o similar.

Fuente

2011-01-07 14:39:25 icabod

+0

Suena como una buena idea, simple. Pero, ¿cómo alertar al id cada página? En el lado del servidor? – hguser

+0

Para uno de mis sitios, las páginas eran html estáticas: este método simplemente simplificaba las actualizaciones (ya que el menú estaba en un archivo incluido, solo necesitaba modificarlo una vez si añadía una página nueva). Sin embargo, sí, necesitaría alguna forma de configurar la identificación del cuerpo en el lado del servidor. Cómo lo hace depende en gran medida de cómo ejecuta su sitio. Mi blog de Wordpress, por ejemplo, usa un tema que establece una 'clase' en la etiqueta del cuerpo de acuerdo con la página que se está viendo. – icabod

+0

Este enfoque significa que debe tener un elemento de cuerpo en cada vista. No muy elegante. Es casi seguro que necesita JS para hacer esto de forma dinámica. jQuery lo hace bastante fácil. Mira mi respuesta a continuación. –

0

Me normalmente manejar esto por el lado del servidor de las cosas (PHP, ASP.NET, etc.). La idea es que cuando se carga la página, el lado del servidor controla el mecanismo (tal vez estableciendo un valor CSS) que se refleja en el HTML resultante que el cliente ve.

Fuente

2011-01-07 14:30:21 Didaxis

+0

¿Puedes darnos más detalles? – hguser

0

Intente utilizar

a:active{ 
font-weight: bold; 
}

en tu archivo css.

Fuente

2011-01-07 14:30:36 Diablo

+0

'a: active' selecciona un enlace que actualmente está siendo cliqueado (o seleccionado), así que no creo que sea lo que busca el poster original. – icabod

+0

En realidad, icabod tiene razón. No funciona o no es lo que quería. Cuando hago clic en el enlace, se mostrará una nueva página, todos los estilos vienen a los valores predeterminados. – hguser

0

Puede usar Javascript para analizar su DOM y resaltar el enlace con la misma etiqueta que las primeras etiquetas h1. Pero creo que es overkill =)

Sería mejor establecer un var que contiene el título de su página, y utilizarlo para agregar una clase en el enlace correspondiente.

Fuente

2011-01-07 14:34:59 Habax

+0

Hola Habax; recuerde que está respondiendo una pregunta anterior, por lo que el autor de la pregunta original probablemente ya hace tiempo resolvió su problema de una forma u otra. Para que su respuesta sea útil, debería ser una buena respuesta para otros lectores que buscan en el sitio soluciones a problemas similares; entonces recomiendo agregar más explicaciones y detalles, tal vez con enlaces a documentación oficial, para realmente justificar por qué esta técnica es la mejor solución para este tipo de problema. –

3

Me parece que necesita un código actual como este ".css menú actual", estoy pidiendo el mismo código que funciona como un encanto, podría intentar algo como esto todavía podría ser alguna configuración

a:link, a:active { 
    color: blue; 
    text-decoration: none; 
} 

a:visited { 
    color: darkblue; 
    text-decoration: none; 
} 

a:hover { 
    color: blue; 
    text-decoration: underline; 
} 

div.menuv { 
    float: left; 
    width: 10em; 
    padding: 1em; 
    font-size: small; 
} 


div.menuv ul, div.menuv li, div.menuv .menuv-current li { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    margin-bottom: 5px; 
    font-weight: normal; 
} 

div.menuv ul ul { 
    padding-left: 12px; 
} 

div.menuv a:link, div.menuv a:visited, div.menuv a:active, div.menuv a:hover { 
    display: block; 
    text-decoration: none; 
    padding: 2px 2px 2px 3px; 
    border-bottom: 1px dotted #999999; 
} 

div.menuv a:hover, div.menuv .menuv-current li a:hover { 
    padding: 2px 0px 2px 1px; 
    border-left: 2px solid green; 
    border-right: 2px solid green; 
} 

div.menuv .menuv-current { 
    font-weight: bold; 
} 

div.menuv .menuv-current a:hover { 
    padding: 2px 2px 2px 3px; 
    border-left: none; 
    border-right: none; 
    border-bottom: 1px dotted #999999; 
    color: darkblue; 
}

Fuente

2012-11-22 23:51:52 Mareno

1

<script id="add-active-to-current-page-nav-link" type="text/javascript"> 
    function setSelectedPageNav() { 
     var pathName = document.location.pathname; 
     if ($("nav ul li a") != null) { 
      var currentLink = $("nav ul li a[href='" + pathName + "']"); 
      currentLink.addClass("active"); 
     } 
    } 
    setSelectedPageNav(); 
</script>

Fuente

2013-04-04 18:17:20

+0

Eso posiblemente no funcionaría si estuvieras trabajando en un subdirectorio, pero tu menú usa enlaces relativos; por ejemplo, si tu página estuviera en 'example.com/site /', sería perfectamente válido para todos tus enlaces a ser 'a.html',' b.html', etc., pero la ruta de acceso sería '/ site/a.html', que no coincidiría? – icabod

+0

Esto funcionaría bien si tus enlaces de menú son de ruta completa y no relativos. Solo utiliza un selector de jquery para encontrar un elemento con el mismo enlace que la página en la que se encuentra dentro de su elemento de navegación. ¿Por qué dices que no funcionaría? En el ejemplo anterior, siempre y cuando sus elementos de enlace href = "/ site/a.html" funcionaría. –

+0

Como mencionas, requeriría que tus rutas estén llenas, no relativas. Eso no es un problema per se, pero podría hacer que el desarrollo sea un problema. Si desarrolla en Windows en, por ejemplo, 'C: \ webdev \ site1', y carga el archivo directamente en un navegador en lugar de a través de un httpd configurado,' document.location.pathname' da, por ejemplo, '/ C:/webdev/site1/index.html'. Confiar en un nombre de ruta completo puede causar todo tipo de problemas, cuando las rutas relativas funcionen igual de bien, mientras que proporciona portabilidad. – icabod

1

clases CSS están aquí

<style type="text/css"> 
.mymenu 
{ 
    background-color: blue; 
    color: white; 
} 
.newmenu 
{ 
    background-color: red; 
    color: white; 
} 
</style>

hacer su HTML como este, url Establecer como ID

<div class="my_menu" id="index-url"><a href="index-url">Index</a></div> 
    <div class="my_menu" id="contact-url"><a href="contact-url">Contac</a></div>

Aquí escribir javascript, poner esto Javascript después del código HTML.

function menuHighlight() { 
     var url = window.location.href; 
     $('#'+tabst).addClass('new_current'); 
    } 
    menuHighlight();

Fuente

2013-04-10 10:23:13 saravanabawa

0

Normalmente utilizo una clase para lograrlo. Es muy sencillo de aplicar a cualquier cosa, enlaces de navegación, hipervínculos, etc

En el documento inserto CSS:

.current, 
nav li a:hover { 
    /* styles go here */ 
    color: #e00122; 
    background-color: #fffff; 
}

Esto hará que el estado estacionario de los elementos de la lista tiene texto rojo y un fondo blanco. Adjunte esa clase de corriente a cualquier enlace en la página "actual" y mostrará los mismos estilos.

Im su inserción HTML:

<nav> 
    <ul> 
     <li class="current"><a href="#">Nav Item 1</a></li> 
     <li><a href="#">Nav Item 2</a></li> 
     <li><a href="#">Nav Item 3</a></li> 
    </ul> 
</nav>

Fuente

2013-08-15 12:43:14

0

Por favor, mira el siguiente:

Aquí es lo que está funcionando:

1.) botones superiores del menú son visibles y resaltan correctamente

2.) sub botones de menú no son visibles hasta se hace clic en el menú superior

Esto es lo que necesita el trabajo:

1.) cuando se hace clic submenú, en busca de nueva página para mantener el submenú seleccionado abierta (voy a destacar el submenú seleccionado botón durante más aclaraciones sobre la navegación)

por favor ver el código aquí: http://jsbin.com/ePawaju/1/edit

o aquí: http://www.ceramictilepro.com/_6testingonly.php#

<head> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
</head>

¿Debo colocar este script en la sección principal? ¿Dónde está el mejor lugar?

<div class="left"> 
<nav class="vmenu"> 
    <ul class="vnavmenu"> 
     <li data-ref="Top1"><a class="hiLite navBarButton2" href="#">Home</a> 
     </li> 
    </ul> 
    <ul class="Top1 navBarTextSize"> 
     <li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">sub1</a> 
     </li> 
     <li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">sub2</a> 
     </li> 
     <li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">sub3</a> 
     </li> 
     <li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">sub4</a> 
     </li> 
    </ul> 
    <ul class="vnavmenu"> 
     <li data-ref="Top2"><a class="hiLite navBarButton2" href="#">Repairs</a> 
     </li> 
    </ul> 
    <ul class="Top2 navBarTextSize"> 
     <li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">1sub1</a> 
     </li> 
     <li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">2sub2</a> 
     </li> 
     <li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">3sub3</a> 
     </li> 
     <li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">4sub4</a> 
     </li> 
    </ul> 
</nav>

jQuery es nuevo para mí, cualquier ayuda sería apreciada enormemente :) submenú var;

$('.vnavmenu li').click(function() { 
var elems = $('.vmenu ul:not(.vnavmenu)').length; 
var $refClass = $('.' + $(this).attr('data-ref')); 
var visible = $refClass.is(':visible'); 

$('.vmenu ul:not(.vnavmenu)').slideUp(100, function() { 

    if (elems == 1) { 
     if (!visible) $refClass.slideDown('fast'); 
    } 

    elems--; 
}); 

if (visible) $('#breadcrumbs-pc').animate({ 
    'margin-top': '0rem' 
}, 100); 
else $('#breadcrumbs-pc').animate({ 
    'margin-top': '5rem' 
}, 100); 
});

Fuente

2013-10-05 21:19:40 user2844139

25

CSS:

.topmenu ul li.active a, .topmenu ul li a:hover { 
    text-decoration:none; 
    color:#fff; 
    background:url(../images/menu_a.jpg) no-repeat center top; 
}

JavaScript:

<script src="JavaScript/jquery-1.10.2.js" type="text/javascript"></script> 

<script type="text/javascript"> 
    $(function() { 
     // this will get the full URL at the address bar 
     var url = window.location.href; 

     // passes on every "a" tag 
     $(".topmenu a").each(function() { 
      // checks if its the same on the address bar 
      if (url == (this.href)) { 
       $(this).closest("li").addClass("active"); 
       //for making parent of submenu active 
       $(this).closest("li").parent().parent().addClass("active"); 
      } 
     }); 
    });   
</script>

código HTML:

<div class="topmenu"> 
    <ul> 
     <li><a href="Default.aspx">Home</a></li> 
     <li><a href="NewsLetter.aspx">Newsletter</a></li> 
     <li><a href="#">Forms</a></li> 
     <li><a href="#">Mail</a></li> 
     <li><a href="#">Service</a></li> 
     <li style="border:none;"><a href="#">HSE</a></li> 
     <li><a href="#">MainMenu2</a> 
      <ul> 
       <li>submenu1</li> 
       <li>submenu2</li> 
       <li>submenu3</li> 
      </ul> 
     </li> 
    </ul> 
</div>

Fuente

2014-04-23 13:09:46 Raj

+0

este es lo que estoy buscando.gracias por compartir :) – Abaij

+0

Esta es una de esas respuestas que votaré dos veces si pudiera. Gracias. – Jose

+0

¡Gracias! Impresionante solución simple y limpia – khurram

resaltar el menú de navegación de la página actual

Respuesta

Cuestiones relacionadas