Foros del Web » Creando para Internet » CSS »

cambios en un menu

Estas en el tema de cambios en un menu en el foro de CSS en Foros del Web. Hola, tengo un menu sencillo en css pero me gustaria que al pulsar en uno de los botones se quede marcado en la seccion en ...
  #1 (permalink)  
Antiguo 29/07/2006, 12:43
 
Fecha de Ingreso: mayo-2004
Mensajes: 398
Antigüedad: 13 años, 7 meses
Puntos: 0
cambios en un menu

Hola, tengo un menu sencillo en css pero me gustaria que al pulsar en uno de los botones se quede marcado en la seccion en la que esta, no se si me explico, como podria hacerlo? el menu es este

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
                <head>
                        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                        <title>Menu de prueba</title>
                        <style type="text/css">
<!--
    body {
        margin:0;
        padding:0;
        font: bold 11px/1.5em Verdana;
}

h2 {
        font: bold 14px Verdana, Arial, Helvetica, sans-serif;
        color: #000;
        margin: 0px;
        padding: 0px 0px 0px 15px;
}

/*- Menu Tabs B--------------------------- */

    #tabsB {
      float:left;
      width:100%;
      background:#F4F4F4;
      font-size:93%;
      line-height:normal;
      }
    #tabsB ul {
        margin:0;
        padding:10px 10px 0 50px;
        list-style:none;
      }
    #tabsB li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsB a {
      float:left;
      background:url("tableftB.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabsB a span {
      float:left;
      display:block;
      background:url("tabrightB.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#666;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsB a span {float:none;}
    /* End IE5-Mac hack */
    #tabsB a:hover span {
      color:#000;
      }
    #tabsB a:hover {
      background-position:0% -42px;
      }
    #tabsB a:hover span {
      background-position:100% -42px;
      }

        #tabsB #current a {
                background-position:0% -42px;
        }
        #tabsB #current a span {
                background-position:100% -42px;
        }
-->
</style>
                </head>

                <body>
                        <h2>Tab Menu B</h2>
                        <div id="tabsB">
                                <ul>
                                        <!-- CSS Tabs -->
<li id="current"><a href="index.php"><span>Inicio</span></a></li>
<li><a href="modules.php?name=Downloads"><span>Descargas</span></a></li>
<li><a href="modules.php?name=Tutoriales"><span>Tutoriales</span></a></li>
<li><a href="modules.php?name=FAQ"><span>Trucos</span></a></li>
<li><a href="modules.php?name=Forums"><span>Foro</span></a></li>
<li><a href="modules.php?name=Your_Account"><span>Tu Cuenta</span></a></li>
<li><a href="modules.php?name=Contacto"><span>Contacto</span></a></li>

                                </ul>
                        </div>
                        <br /><br />
                </body>
</html>
  #2 (permalink)  
Antiguo 29/07/2006, 23:37
Avatar de fer10  
Fecha de Ingreso: octubre-2005
Ubicación: Guadalajara - Mexico
Mensajes: 905
Antigüedad: 12 años, 2 meses
Puntos: 3
hola, solo con css no se puede, lo que yo hago es ponerle una clase diferente al menu en el que se encuentra o ponerle una clase mas ..


Código HTML:
<a href="#" class="clasemenu clase2">asdasd</a> 
__________________
Saludos
FT.
www.fernando.com.mx
  #3 (permalink)  
Antiguo 30/07/2006, 03:00
 
Fecha de Ingreso: mayo-2004
Mensajes: 398
Antigüedad: 13 años, 7 meses
Puntos: 0
holla fer10 y eso como podria hacerlo? o dond puedo encontrar algun ejemplo, perdona es que no se mucho del tema, incluso el que tengo me ayudaron hacerlo

Un saludo
  #4 (permalink)  
Antiguo 30/07/2006, 10:41
Avatar de fer10  
Fecha de Ingreso: octubre-2005
Ubicación: Guadalajara - Mexico
Mensajes: 905
Antigüedad: 12 años, 2 meses
Puntos: 3
tengo algo asi echo en una pagina que no tengo terminada..

www.cuboestudio.com <-- ve el menu como se agrega una una clase a diferente menu y se queda fijo..

y si buscas como hacer que aparecesca el texto extra (clase) en la seccion que selecionaste estas no es en css eso.
__________________
Saludos
FT.
www.fernando.com.mx
  #5 (permalink)  
Antiguo 30/07/2006, 12:32
Avatar de gzaloprgm  
Fecha de Ingreso: abril-2005
Ubicación: En mi casa
Mensajes: 67
Antigüedad: 12 años, 7 meses
Puntos: 1
Hola,

Podés por ejemplo hacer lo siguiente:

Código HTML:
<ul class="nav">
<li class="sel"><a href="#">Seccion 1</a></li>
<li><a href="#">Seccion 1</a></li>
<li><a href="#">Seccion 1</a></li>
<li><a href="#">Seccion 1</a></li>
<li><a href="#">Seccion 1</a></li>
</ul> 
Y despues a #sel le pones un estilo diferente

Saludos,
__________________
Visita http://gzaloprgm.com.ar: mi web con circuitos electrónicos, esquemáticos, circuitos impresos, análisis, calculadoras, y muchas otras cosas.
  #6 (permalink)  
Antiguo 30/07/2006, 14:23
 
Fecha de Ingreso: mayo-2004
Mensajes: 398
Antigüedad: 13 años, 7 meses
Puntos: 0
esta mirando tu pagina fer y es lo que quiero hacer, pero como serian las clases, por ejemplo home, lo que me dices gzaloprgm creo que es lo mismo, lo que no se es como podria hacer la otra clase, la clase sel, para que muestre que estoy en esa seccion. Lo sienmto pero esque estoy empezando con css.
El concepto de lo que me quereis decir si lo entiendo pero no se como llevarlo acabo.

Saludos
  #7 (permalink)  
Antiguo 30/07/2006, 19:11
Avatar de gzaloprgm  
Fecha de Ingreso: abril-2005
Ubicación: En mi casa
Mensajes: 67
Antigüedad: 12 años, 7 meses
Puntos: 1
Hola...

No se, podrías ponerlo de otro color, pero en cada "seccion", el código del menú debe ser diferente, poniendole el class="sel" al boton que sea.

Saludos,
__________________
Visita http://gzaloprgm.com.ar: mi web con circuitos electrónicos, esquemáticos, circuitos impresos, análisis, calculadoras, y muchas otras cosas.
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 03:55.