[PEDIDO] Como poner el menu activo con sombra?

Hola, en la navbar de este foro pues tienen el CSS para que cuando estas en comunidad por ejemplo se quede con fondo oscuro. Quiero saber como hacer eso pero para Invision, es que estoy tratando pero no me sale por mas que intento xD

Ehhhh... ¡esta no es la zona de soporte, te has colado! Muevo a ella, ahora mismo viene algún listo a responderte.

Gracias por moverlo, es que me perdi xD

A ver si alguien me contesta, es que estoy aprendiendo un poco mas de Invision pero es un poco complicado.

Prueba ponerle :focus c:

a:focus{
 tu formato
}

Scatty Vas Normandy escribió:Prueba ponerle :focus c:

a:focus{
 tu formato
}

Lo intente y no me sale como quiera, ya habia intentado con active y me salio, pero cuando implemento el codigo es como si no estuviera.

No sé si quieres sólo el efecto CSS o quieres el código que indica dónde se encuentra el usuario en cada momento poniendo activo el botón correspondiente.

Tubilok escribió:No sé si quieres sólo el efecto CSS o quieres el código que indica dónde se encuentra el usuario en cada momento poniendo activo el botón correspondiente.

Ambos si es posible, el CSS lo e realizado, lo que no tengo es el codigo para que funcione como debe.

¡Hola!

Agrega el siguiente código a los JavaScript de tu foro. Recuerda que debes marcar la página para que se utilice en todas las páginas del foro.

Código:

$(function() {
   var enlaceAlIndice = ''; // Si tienes portal como página principal de tu foro, pon "forum". Si no, déjalo en blanco.
   $('#submenu a.mainmenu').each(function() {
      if($(this).attr('href') == location.pathname) {
         $(this).addClass('enlaceActivo');
         return false;
      }
   });
   if(!$('#submenu a.mainmenu.enlaceActivo').length) {
      $('#submenu a.mainmenu[href="/'+enlaceAlIndice+'"]').addClass('enlaceActivo');
   }
});

Ahora solo te falta agregar el CSS que desees. Los enlaces activos tienen el siguiente selector:

Código:

#submenu a.mainmenu.enlaceActivo

Entonces para agregar, por ejemplo, un fondo a los que están activos (como aquí) harías lo siguiente:

Código:

#submenu a.mainmenu.enlaceActivo { background-color: red; }

Lo he tratado pero no me funciona.

Faxter escribió:Lo he tratado pero no me funciona.

¿Seguro que tienes Invision? ¿Tienes las plantillas editadas? ¿Tienes otros JavaScripts instalados?

Si, miralo aqui:

Normal, tienes una etiqueta script y otra style dentro de tu JavaScript. Borra las etiquetas script, el contenido de la etiqueta style copialo en tu CSS y prueba otra vez.

He comprobado si he cometido algún error en el JavaScript pero está bien programado, pero ahora cuando voy a tu foro veo que tienes un código JavaScript mal programado. Debes eliminar los códigos JS problemáticos (ve probando uno a uno hasta encontrar el problemático y luego me lo pasas por aquí a ver si es algo simple y te lo puedo arreglar).

Aqui dejo el JS y el CSS, ustedes diganme xD

JS, el que me dieron pero a ver si tengo algun error, que posiblemente no puse algo aqui y por eso no es efectivo.

Código:

$(function() {
  var enlaceAlIndice = ""
  $('#submenu a.mainmenu').each(function() {
      if($(this).attr('href') == location.pathname) {
        $(this).addClass('enlaceActivo');
        return false;
      }
  });
  if(!$('#submenu a.mainmenu.enlaceActivo').length) {
      $('#submenu a.mainmenu[href="/'+enlaceAlIndice+'"]').addClass('enlaceActivo');
  }
});

CSS

Código:

#submenu a.mainmenu.enlaceActivo { background-color: red; }

#submenu {
background: rgba(151,155,160,0.24);
border-radius: 0;
color: #FFF;
display: inline-block;
font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: 700;
height: 35px;
left: 5px;
line-height: 37px;
margin: 5px 3px 5px 0;
padding: .5em 0 .65em;
position: absolute;
right: 0;
text-align: center;
text-shadow: rgba(0,0,0,0.2) 0 -1px 0;
text-transform: uppercase;
top: 28%;
width: 1338px;
}
#submenu ul li a:hover {
background-color: rgba(0,0,0,.1);
box-shadow: inset rgba(0,0,0,0.15) 0 1px 3px, rgba(255,255,255,0.05) 0 0 0 1px, rgba(255,255,255,0.1) 0 1px 0;
border-radius: 5px
}

#submenu a.mainmenu.enlaceActivo { background-color: red; }
div#logostrip {
background-color: #303B4A;
background-image: url(http://2img.net/i/fa/empty.gif);
background-repeat: repeat-x;
color: #fff;
min-height: 200px;
text-align: left;
}

Pon el punto y coma en la segunda línea: var enlaceAlIndice = "";
Y te aseguro que funciona porque lo acabo de probar en tu foro.

Tubilok escribió:Pon el punto y coma en la segunda línea: var enlaceAlIndice = "";
Y te aseguro que funciona porque lo acabo de probar en tu foro.

Correcto, eso era lo que fallaba xD

Ahora a ponerme con el aspecto y quitarle eso rojo, muchismas gracias.

No me funciona en "Perfil" y "Mensajeria"

Mmmm, creo que el código de Bret no funcionaría en esos casos, prueba con este:

Código:

$(function() {
  var enlaceAlIndice = '';
  $('#submenu a.mainmenu').each(function() {
      if($(this).attr('href').indexOf(location.pathname) == 0) {
        $(this).addClass('enlaceActivo');
        return false;
      }
  });
  if(!$('#submenu a.mainmenu.enlaceActivo').length) {
      $('#submenu a.mainmenu[href="/'+enlaceAlIndice+'"]').addClass('enlaceActivo');
  }
});

Perfecto, funciona al maximo. Muchas gracias.

Ya pueden cerrar tema.