ayuda botonera menu css

Dundee · #1 (**permalink**) 04/02/2010, 04:49

Hola gente , he comprado una plantilla muy chula que utiliza css y javascript .
Estoy intentado averiguar como funciona el menú de arriba que hace lo siguiente:
Cuando entras en un enlace (contacto, quienes etc etc..) se queda un botón de color rojo encima de dicho elemento del menú (o enlace), he intentado averiguar como hace esto sin éxito. Al principio creía que era el javascript que viene vinculado en el html , pero despúes de borrar estos includes (o como se llamen en javascript) el menú sigue funcionando con este efecto, por lo que deduzco que todo lo hace el CSS.
Alguien tiene alguna idea de como consigue esto:
Este es el código html (fijarse que la clase current que es lo responsable de que salga el botón rojo está solo en "about us", pero a medida que pinchas en otro enlace cambia la clase current a este nuevo enlace, ya que viendo el código html del navegador veo como cambia la clase de item de menú).
HEAD

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="layout.css" rel="stylesheet" type="text/css" />
<link href="menu.css" rel="stylesheet" type="text/css" />

</head>

Código:

<div class="menu">
        	<ul>
                <li><a href="index.html" >Main page</a></li>
                <li><a href="index-1.html" class="current">About us</a></li>
                <li><a href="index-2.html">Portfolio</a></li>
                <li><a href="index-3.html">Plantings</a></li>
                <li class="last"><a href="index-4.html">Contacts</a></li>
            </ul>
        </div>

Y el css de .current es este (pongo todo el header por si algo se me escapa):
/*header*/

Código:

#header {font-size:0.8125em; color:#FFFFFF }
#header .logo{ margin:42px 0 0 0; position:absolute }
#header .menu{padding:72px 0 0 400px}
#header .menu1{margin:37px 0 0 400px; position:absolute}


#header ul{margin:0; padding:0; list-style:none;}
#header ul li{ margin:0; display:inline}
#header ul .last a{background:none}
#header ul li a{color:#2b2b2b; font-weight:bold; background:url(images/bg_menu.gif) top right no-repeat; text-decoration:none; width:99px; text-align:center; display:block; float:left; line-height:26px; padding-right:9px} 
#header ul li a:hover { color:#fff; text-decoration:none; background:url(images/bg_menu-act.gif) top left no-repeat;}
#header ul li .current{ color:#fff; text-decoration:none; background:url(images/bg_menu-act.gif) top left no-repeat;  }

#header ul .last a{width:99px; padding-right:0}

Mil gracias por la ayuda

daPhyre · #2 (**permalink**) 06/02/2010, 21:33

Si logré entender tu pregunta, es por esto: <li><a href="index-1.html" class="current">About us</a></li>

Solo debes poner esa clase al link que quieres que se vea "presionado".

Dundee · #3 (**permalink**) 07/02/2010, 04:48

Cita:

Iniciado por daPhyre

Si logré entender tu pregunta, es por esto: <li><a href="index-1.html" class="current">About us</a></li>

Solo debes poner esa clase al link que quieres que se vea "presionado".

Si gracias eso lo se; pero el tema es que esa clase esta puesta solamente en about us y en cambio el botoncito se muestra cada vez que pasas encima de un enlace del menú, ya sea about us , contacto etc etc.. y no se como se puede cambiar sin javascript de forma automática el class='current' de item de menú.

un saludo y gracias

daPhyre · #4 (**permalink**) 07/02/2010, 15:16

¿Te refieres entonces al :hover? ¿Cuando pasa el puntero por encima de cada uno de los links?

Dundee · #5 (**permalink**) 07/02/2010, 16:53

Cita:

Iniciado por daPhyre

¿Te refieres entonces al :hover? ¿Cuando pasa el puntero por encima de cada uno de los links?

Efectivamente , atrás pegue el código del css, pero lo del hover esta así:

Código:

#header ul li a:hover { color:#fff; text-decoration:none; background:url(images/bg_menu-act.gif) top left no-repeat;}
#header ul li .current{ color:#fff; text-decoration:none; background:url(images/bg_menu-act.gif) top left no-repeat;  }

Lo que no entiendo es que si current está puesta en "about us" como se cambia automáticamente de item de menú (li) al pasar encima de uno de ellos.

Un salu2

daPhyre · #6 (**permalink**) 07/02/2010, 19:18

En verdad no comprendo tu pregunta, lo siento.

ArturoGallegos · #7 (**permalink**) 07/02/2010, 20:12

se refiere a que segun la pagina en que se encuentre el boton correspondiente en el menu esta con un estilo diferente

y con css que yo sepa no se puede... debe ser con java, php o asp

si puedes darnos un link a tu sitio?

Dundee · #8 (**permalink**) 08/02/2010, 03:19

Cita:

Iniciado por Ag666

se refiere a que segun la pagina en que se encuentre el boton correspondiente en el menu esta con un estilo diferente

y con css que yo sepa no se puede... debe ser con java, php o asp

si puedes darnos un link a tu sitio?

Bueno disculparme si no he sido del todo claro , voy a intentarlo otra vez:
Existe una clase que tiene como background una imagen ; tambien tenemos
una lista menu en la cabecera .
La clase .current esta puesta sobre un elemento del menú (en concreto about us) , pero en cambio segun me sitúe en una página u otra (pinchando en uno u otro de los elementos del menú ) el botón se muestra encima de este.

boton1 boton2 boton3 boton4
.current está en botón2 declarada , pero si pincho en botón4 , current aparece declarada en este (en botón4) , puedo afirmar esto porque viendo el código que tira el navegador puedo ver que class='current' va cambiando de item según pinche en uno u otro.

Espero que mi explicación haya sido mejor

daPhyre · #9 (**permalink**) 08/02/2010, 13:29

Me supongo que es por que en cada HTML, .current está puesto en un elemento distinto, y eso hace este efecto. ¿Revisaste los HMTLs?

Dundee · #10 (**permalink**) 08/02/2010, 13:44

Cita:

Iniciado por daPhyre

Me supongo que es por que en cada HTML, .current está puesto en un elemento distinto, y eso hace este efecto. ¿Revisaste los HMTLs?

No, eso no es , por eso me extraña tanto (atrás pegue el html pero lo vuelvo a pegar):

Código:

<div class="menu">
        	<ul>
                <li><a href="index.html" >Main page</a></li>
                <li><a href="index-1.html" class="current">About us</a></li>
                <li><a href="index-2.html">Portfolio</a></li>
                <li><a href="index-3.html">Plantings</a></li>
                <li class="last"><a href="index-4.html">Contacts</a></li>
            </ul>
        </div>

Como vees .current esta solo en About us y se cambia dinámicamente a medido que pincho en cualquiera de los otros items del menú.

ArturoGallegos · #11 (**permalink**) 08/02/2010, 15:36

Ok pregunta fácil y rápida
¿tu sitio está hecho totalmente a mano (html + css) o utilizas algún administrador de contenidos? (wordpress, joomla, dotnetnuke etc.)

Si usas algún administrador de contenido estos manejan algo de programación interna que hace el cambio de estilos según la pagina.

Si tu sitio está totalmente a mano, cada que tu elaboras una nueva página debes cambiar .current en el menú según la pagina que creaste

DJJJ · #12 (**permalink**) 08/02/2010, 18:01

hola, no se si entiendo lo que dices a lo que tienes

Cita:

#header {font-size:0.8125em; color:#FFFFFF }
#header .logo{ margin:42px 0 0 0; position:absolute }
#header .menu{padding:72px 0 0 400px}
#header .menu1{margin:37px 0 0 400px; position:absolute}

#header ul{margin:0; padding:0; list-style:none;}
#header ul li{ margin:0; display:inline}
#header ul .last a{background:none}
#header ul li a{color:#2b2b2b; font-weight:bold; background:url(images/bg_menu.gif) top right no-repeat; text-decoration:none; width:99px; text-align:center; display:block; float:left; line-height:26px; padding-right:9px}
#header ul li a:hover { color:#fff; text-decoration:none; background:url(images/bg_menu-act.gif) top left no-repeat;}
#header ul li .current{ color:#fff; text-decoration:none; background:url(images/bg_menu-act.gif) top left no-repeat; }

#header ul .last a{width:99px; padding-right:0}

agregale debajo esto

Código HTML:

#header ul li a:active { color:#fff; text-decoration:none; background:url(images/bg_menu-act.gif) top left no-repeat;  }

repito no se si lo que quieres es que cuandos selecciones un enlace te aparezca de la forma que sale el que tienes por defecto marcado

saludos

daPhyre · #13 (**permalink**) 08/02/2010, 22:14

Usa JavaScript... Tengo una teoría.

Si me dices que tiene un solo HTML, entonces eso significa que ha de estar usando AJAX para cargar las demás páginas. Si esto es cierto, el mismo JavaScript se ha de encargar de poner y quitar la clase .current a los demás elementos.

Si esto es cierto, la respuesta está en el código JavaScript, seguramente con un document.[...].class='current' o similar...

Dundee · #14 (**permalink**) 09/02/2010, 09:46

Cita:

Iniciado por daPhyre

Usa JavaScript... Tengo una teoría.

Si me dices que tiene un solo HTML, entonces eso significa que ha de estar usando AJAX para cargar las demás páginas. Si esto es cierto, el mismo JavaScript se ha de encargar de poner y quitar la clase .current a los demás elementos.

Si esto es cierto, la respuesta está en el código JavaScript, seguramente con un document.[...].class='current' o similar...

Puedo dar fe de que NO usa JAVASCRIPT , por eso me esta dando dolores de cabeza porque no se como cojones hace esto solo con el css.

ArturoGallegos · #15 (**permalink**) 09/02/2010, 11:38

Parece que estamos jugando adivinanzas jejeje, sería conveniente que nos permitieras ver tu sitio en acción. Y en definitiva usa algo de java por lo menos, el CSS es solo para dar presentación (estilos) pero no es dinámico como para cambiar algo en el HTML.

Aunque tú no lo veas debe haber algo extra que se te está escapando y al paso que vamos solo son adivinanzas.

Pd: no me has respondido si usas algo administrador de contendidos o es HTML puro totalmente a mano.

Dundee · #16 (**permalink**) 09/02/2010, 14:27

Cita:

Iniciado por Ag666

Parece que estamos jugando adivinanzas jejeje, sería conveniente que nos permitieras ver tu sitio en acción. Y en definitiva usa algo de java por lo menos, el CSS es solo para dar presentación (estilos) pero no es dinámico como para cambiar algo en el HTML.

Aunque tú no lo veas debe haber algo extra que se te está escapando y al paso que vamos solo son adivinanzas.

Pd: no me has respondido si usas algo administrador de contendidos o es HTML puro totalmente a mano.

Me imagino que cuando quieres decir java te refieres a javascript (:: , de todas formas no hay nada de javascript ni en el header ni en el body ; el código del sitio lo he pegado entero arriba , y no lo puedo enseñar puesto que lo tengo en local.

Un saludo y mil gracias a tod@s

ArturoGallegos · #17 (**permalink**) 09/02/2010, 16:12

pues la verda no veo nada que pueda estar haciendo el cambio, de hecho tal cual muestras tu codigo podria asegurarte que si creas una nueva pagina, con esta no funcionaria el efecto... hasta que no agreges la clase manualmente sobre el nuevo elemento del menu.

pd: y si con java me referia a javascript ya sea incrustado en el HTML o en un *.js

jomaruro · #18 (**permalink**) 09/02/2010, 18:07

Hola:

Visto lo visto, si no hay javascript, ni AJAX, ni PHP, ni ASP, el cambio no es de modo dinámico, cada HTML tiene su clase .current definida donde la necesita.

Saludos.