Cargando...
Rango
Sexo
Mensajes
Última visita
Miembro desde

Foro Nube » Servicios » Soporte Foroactivo

Foro Cerrado
Este foro se encuentra cerrado de forma indefinida. Puedes utilizarlo para revisar material antiguo que desees recuperar.

[PEDIDO] Como poner el menu activo con sombra?

Creado por ,

Mensaje [Página 1 de 1.]

Publicado el Lun 1 Sep - 20:25

avatar
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

A 0 usuarios le gusta esto

Publicado el Lun 1 Sep - 22:10

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

A 0 usuarios le gusta esto

Firma

Rupia
Gerente estructural y reguladora - Líder de moderación
Equipo de Foro Nube

Publicado el Lun 1 Sep - 22:17

avatar
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.

A 0 usuarios le gusta esto

Publicado el Lun 1 Sep - 22:18

avatar
Prueba ponerle :focus c:

a:focus{
 tu formato
}

A 0 usuarios le gusta esto

Publicado el Lun 1 Sep - 22:24

avatar
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.

A 0 usuarios le gusta esto

Publicado el Lun 1 Sep - 22:33

avatar
Soporte
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.

A 0 usuarios le gusta esto

Publicado el Lun 1 Sep - 22:37

avatar
@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.

A 0 usuarios le gusta esto

Publicado el Lun 1 Sep - 22:56

avatar
Administrador
¡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; }

A 0 usuarios le gusta esto

Firma

Bret
Representante de la comunidad - Coordinador
Equipo de Foro Nube

Publicado el Lun 1 Sep - 23:43

avatar
Lo he tratado pero no me funciona.

A 0 usuarios le gusta esto

Publicado el Lun 1 Sep - 23:45

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

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

A 0 usuarios le gusta esto

Firma

Bret
Representante de la comunidad - Coordinador
Equipo de Foro Nube

Publicado el Lun 1 Sep - 23:58

avatar
Si, miralo aqui:

A 0 usuarios le gusta esto

Publicado el Mar 2 Sep - 0:14

avatar
Soporte
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.

A 0 usuarios le gusta esto

Firma

Tubilok
Programador y maquetador - Soporte
Equipo de Foro Nube

Publicado el Mar 2 Sep - 0:14

avatar
Administrador
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).

A 0 usuarios le gusta esto

Firma

Bret
Representante de la comunidad - Coordinador
Equipo de Foro Nube

Publicado el Mar 2 Sep - 0:48

avatar
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://illiweb.com/fa/empty.gif);
background-repeat: repeat-x;
color: #fff;
min-height: 200px;
text-align: left;
}

A 0 usuarios le gusta esto

Publicado el Mar 2 Sep - 0:53

avatar
Soporte
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.

A 0 usuarios le gusta esto

Publicado el Mar 2 Sep - 0:59

avatar
@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.

A 0 usuarios le gusta esto

Publicado el Mar 2 Sep - 1:06

avatar
No me funciona en "Perfil" y "Mensajeria"

A 0 usuarios le gusta esto

Publicado el Mar 2 Sep - 9:33

avatar
Soporte
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');
  }
});

A 0 usuarios le gusta esto

Publicado el Mar 2 Sep - 22:51

avatar
Perfecto, funciona al maximo. Muchas gracias.

Ya pueden cerrar tema.

A 0 usuarios le gusta esto
Contenido patrocinado

Publicado

A 0 usuarios le gusta esto

Con la tecnología de Foroactivo y punBB