Foros del Web » Creando para Internet » CSS »

navbar con boton activo

Estas en el tema de navbar con boton activo en el foro de CSS en Foros del Web. hola que tal, les cuento que estoy tratando de hacer un navbar que cuando le de click al enlase en el navbar se vea direrente ...
  #1 (permalink)  
Antiguo 07/10/2009, 14:22
 
Fecha de Ingreso: agosto-2009
Mensajes: 292
Antigüedad: 8 años, 3 meses
Puntos: 5
navbar con boton activo

hola que tal, les cuento que estoy tratando de hacer un navbar que cuando le de click al enlase en el navbar se vea direrente a los demas botones

Código:
#navbar li, #navbar a {
	display:block;
	height:30px;
	text-align:center;
}

#navbar li {
	float:left;
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
	margin:0;
	padding:0;
	position:relative;
	top:0;
}

#navbar-noticias {
	background:url(images/navbar-bg.jpg);
	height:30px;
	left:0;
	padding:0;
	width:200px;
}

#navbar-noticias a:hover {
	background:url(images/navbar-bg.jpg) 0 -30px;
	height:30px;
	left:0;
	width:200px;
}

#navbar-noticias .selected {
	background:url(images/navbar-bg.jpg) 0 -30px;
	height:30px;
	left:0;
	width:200px;
}

#navbar-comunidad {
	background:url(images/navbar-bg.jpg) -200px 0;
	height:30px;
	left:0;
	width:200px;
}

#navbar-comunidad a:hover {
	background:url(images/navbar-bg.jpg) -200px -30px;
	height:30px;
	left:0;
	width:200px;
}

#navbar-comunidad .selected {
	background:url(images/navbar-bg.jpg) -200px -30px;
	height:30px;
	left:0;
	width:200px;
}

#navbar-chat {
	background:url(images/navbar-bg.jpg) -400px 0;
	height:30px;
	left:0;
	width:200px;
}

#navbar-chat a:hover {
	background:url(images/navbar-bg.jpg) -400px -30px;
	height:30px;
	left:0;
	width:200px;
}

#navbar-chat .selected {
	background:url(images/navbar-bg.jpg) -400px -30px;
	height:30px;
	left:0;
	width:200px;
}

#navbar-buscador {
	background:url(images/navbar-bg.jpg) -600px 0;
	height:30px;
	left:0;
	width:200px;
}

#navbar-buscador a:hover {
	background:url(images/navbar-bg.jpg) -600px -30px;
	height:30px;
	left:0;
	width:200px;
}

#navbar-buscador .selected {
	background:url(images/navbar-bg.jpg) -600px -30px;
	height:30px;
	left:0;
	width:200px;
}

#navbar-contacto {
	background:url(images/navbar-bg.jpg) -800px 0;
	height:30px;
	left:0;
	width:200px;
}

#navbar-contacto a:hover {
	background:url(images/navbar-bg.jpg) -800px -30px;
	height:30px;
	left:0;
	width:200px;
}

#navbar-contacto .selected {
	background:url(images/navbar-bg.jpg) -800px -30px;
	height:30px;
	left:0;
	width:200px;
}
Código HTML:
 <ul id="navbar">  
        <li id="navbar-noticias"><a href="/index.php"></a></li>
        <li id="navbar-comunidad"><a href="#"></a></li>
        <li id="navbar-chat"><a href="/inicio/chat.php"></a></li>
        <li id="navbar-buscador"><a href="/inicio/buscador.php"></a></li>
        <li id="navbar-contacto"><a href="/inicio/contacto.php"></a></li>
      </ul> 
quiero que el .selected y el a:hover se vean igual pero no se que estoy haciendo mal, cuando le doy click al enlace se vuelve a su estado original,,,

aqui esta la pagina para que vean el navbar pk-network.co.cc

saludos y muchas gracias de antemano
  #2 (permalink)  
Antiguo 07/10/2009, 16:23
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: navbar con boton activo

Habría varias formas. Una que se me ocurre es que la página donde muestras las noticias le añadas en el html:
<body id="noticias">
<!-- resto de la página -->
y que en el css añadieses a tu declaración:
#noticias #navbar-noticias a, #navbar-noticias a:hover {/*lo que ya tienes declarado*/}

A la que uses para "comunidad":
<body id="comunidad">

css:
#comunidad #navbar-comunidad a; #navbar-comunidad a:hover {...}

Y así para el resto de las páginas.

Si no paso algo por alto, creo que debería funcionar.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 07/10/2009, 16:59
 
Fecha de Ingreso: agosto-2009
Mensajes: 292
Antigüedad: 8 años, 3 meses
Puntos: 5
Respuesta: navbar con boton activo

hola que tal, muchas gracias por responder.

prove lo que me dijiste pero al parecer no funciona, talves porque mi web es dinamica y agregando el <body id="noticias">, <body id="comunidad">, etc me queda asi

Código PHP:
<body>
...
...
...
<
body id="noticias">
...
...
...
<
body
he visto el codigo fuente de otras paginas web´s que utilizan esta tecnica del boton activo, y cuando estas en esa pagina, se cambia el codigo asi

Código PHP:
<li id="module_navlist_2nd"><class="selected" href="/centers/all-about-wii"></a></li
enves de asi

Código PHP:
<li id="module_navlist_2nd"><a href="/centers/all-about-wii"></a></li
saludos
  #4 (permalink)  
Antiguo 07/10/2009, 17:08
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: navbar con boton activo

Añadir una clase de forma dinámica sólo lo podrás hacer con un lenguaje de programación o de script, obviamente.
Lo que te dice kseso? es esto.
Mira cómo está hecho, que no es difícil si sabes algo de HTML y CSS.
__________________
Visita mi nueva web idplus.org
  #5 (permalink)  
Antiguo 07/10/2009, 18:23
 
Fecha de Ingreso: agosto-2009
Mensajes: 292
Antigüedad: 8 años, 3 meses
Puntos: 5
Respuesta: navbar con boton activo

Cita:
Iniciado por Mikmoro Ver Mensaje
Añadir una clase de forma dinámica sólo lo podrás hacer con un lenguaje de programación o de script, obviamente.
Mira cómo está hecho, que no es difícil si sabes algo de HTML y CSS.
kiubo Mikmoro

acabo de chequar el enlace que me pasaste pero no me sirve de ese modo porque la pagina es dinamica y si utilizo el <body id="opcion2"> me kedarian 2 body y por eso no serviria,,,

como podria añadir la clase de forma dinamica???

saludos!!!
  #6 (permalink)  
Antiguo 08/10/2009, 01:11
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: navbar con boton activo

Cita:
Iniciado por WinderJerter Ver Mensaje
como podria añadir la clase de forma dinamica???
Con javascript.
__________________
Visita mi nueva web idplus.org
  #7 (permalink)  
Antiguo 08/10/2009, 15:18
 
Fecha de Ingreso: agosto-2009
Mensajes: 292
Antigüedad: 8 años, 3 meses
Puntos: 5
Respuesta: navbar con boton activo

hola k tal,,, oye bro tambien se puede hacer con php, oye no me puedes dar un ejemplo esk estoy verde para eso

saludos!!!
  #8 (permalink)  
Antiguo 08/10/2009, 16:47
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: navbar con boton activo

No, lo siento, sé muy poco de PHP. Quizá en el foro del mismo nombre te puedan ayudar.
__________________
Visita mi nueva web idplus.org
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:50.