navbar con boton activo

WinderJerter · #1 (**permalink**) 07/10/2009, 13:22

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

kseso? · #2 (**permalink**) 07/10/2009, 15:23

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">

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

WinderJerter · #3 (**permalink**) 07/10/2009, 15:59

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"><a 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

Mikmoro · #4 (**permalink**) 07/10/2009, 16:08

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.

WinderJerter · #5 (**permalink**) 07/10/2009, 17:23

Cita:

Iniciado por Mikmoro

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!!!

Mikmoro · #6 (**permalink**) 08/10/2009, 00:11

Cita:

Iniciado por WinderJerter

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

Con javascript.

WinderJerter · #7 (**permalink**) 08/10/2009, 14:18

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

saludos!!!

Mikmoro · #8 (**permalink**) 08/10/2009, 15:47

No, lo siento, sé muy poco de PHP. Quizá en el foro del mismo nombre te puedan ayudar.