Foros del Web » Creando para Internet » CSS »

ayuda botonera menu css

Estas en el tema de ayuda botonera menu css en el foro de CSS en Foros del Web. Hola gente , he comprado una plantilla muy chula que utiliza css y javascript . Estoy intentado averiguar como funciona el menú de arriba que ...
  #1 (permalink)  
Antiguo 04/02/2010, 04:49
Avatar de Dundee  
Fecha de Ingreso: junio-2002
Ubicación: El Médano
Mensajes: 1.310
Antigüedad: 15 años, 5 meses
Puntos: 8
ayuda botonera menu css

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
__________________
Videotutoriales de Drupal

Última edición por Dundee; 09/02/2010 a las 14:29
  #2 (permalink)  
Antiguo 06/02/2010, 21:33
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: ayuda botonera menu css

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".
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #3 (permalink)  
Antiguo 07/02/2010, 04:48
Avatar de Dundee  
Fecha de Ingreso: junio-2002
Ubicación: El Médano
Mensajes: 1.310
Antigüedad: 15 años, 5 meses
Puntos: 8
Respuesta: ayuda botonera menu css

Cita:
Iniciado por daPhyre Ver Mensaje
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
__________________
Videotutoriales de Drupal
  #4 (permalink)  
Antiguo 07/02/2010, 15:16
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: ayuda botonera menu css

¿Te refieres entonces al :hover? ¿Cuando pasa el puntero por encima de cada uno de los links?
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #5 (permalink)  
Antiguo 07/02/2010, 16:53
Avatar de Dundee  
Fecha de Ingreso: junio-2002
Ubicación: El Médano
Mensajes: 1.310
Antigüedad: 15 años, 5 meses
Puntos: 8
Respuesta: ayuda botonera menu css

Cita:
Iniciado por daPhyre Ver Mensaje
¿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
__________________
Videotutoriales de Drupal
  #6 (permalink)  
Antiguo 07/02/2010, 19:18
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: ayuda botonera menu css

En verdad no comprendo tu pregunta, lo siento.
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #7 (permalink)  
Antiguo 07/02/2010, 20:12
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.826
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: ayuda botonera menu css

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?
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #8 (permalink)  
Antiguo 08/02/2010, 03:19
Avatar de Dundee  
Fecha de Ingreso: junio-2002
Ubicación: El Médano
Mensajes: 1.310
Antigüedad: 15 años, 5 meses
Puntos: 8
Respuesta: ayuda botonera menu css

Cita:
Iniciado por Ag666 Ver Mensaje
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
__________________
Videotutoriales de Drupal
  #9 (permalink)  
Antiguo 08/02/2010, 13:29
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: ayuda botonera menu css

Me supongo que es por que en cada HTML, .current está puesto en un elemento distinto, y eso hace este efecto. ¿Revisaste los HMTLs?
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #10 (permalink)  
Antiguo 08/02/2010, 13:44
Avatar de Dundee  
Fecha de Ingreso: junio-2002
Ubicación: El Médano
Mensajes: 1.310
Antigüedad: 15 años, 5 meses
Puntos: 8
Respuesta: ayuda botonera menu css

Cita:
Iniciado por daPhyre Ver Mensaje
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ú.
__________________
Videotutoriales de Drupal
  #11 (permalink)  
Antiguo 08/02/2010, 15:36
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.826
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: ayuda botonera menu css

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
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #12 (permalink)  
Antiguo 08/02/2010, 18:01
 
Fecha de Ingreso: octubre-2005
Mensajes: 407
Antigüedad: 12 años, 2 meses
Puntos: 2
Respuesta: ayuda botonera menu css

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
__________________
DJJJ
  #13 (permalink)  
Antiguo 08/02/2010, 22:14
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: ayuda botonera menu css

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...
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #14 (permalink)  
Antiguo 09/02/2010, 09:46
Avatar de Dundee  
Fecha de Ingreso: junio-2002
Ubicación: El Médano
Mensajes: 1.310
Antigüedad: 15 años, 5 meses
Puntos: 8
Respuesta: ayuda botonera menu css

Cita:
Iniciado por daPhyre Ver Mensaje
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.
__________________
Videotutoriales de Drupal
  #15 (permalink)  
Antiguo 09/02/2010, 11:38
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.826
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: ayuda botonera menu css

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.
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #16 (permalink)  
Antiguo 09/02/2010, 14:27
Avatar de Dundee  
Fecha de Ingreso: junio-2002
Ubicación: El Médano
Mensajes: 1.310
Antigüedad: 15 años, 5 meses
Puntos: 8
Respuesta: ayuda botonera menu css

Cita:
Iniciado por Ag666 Ver Mensaje
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 [email protected]
__________________
Videotutoriales de Drupal
  #17 (permalink)  
Antiguo 09/02/2010, 16:12
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.826
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: ayuda botonera menu css

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
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #18 (permalink)  
Antiguo 09/02/2010, 18:07
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: ayuda botonera menu css

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.


Etiquetas: botones
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 19:30.