Foros del Web

Foros del Web (http://www.forosdelweb.com/)
-   CSS (http://www.forosdelweb.com/f53/)
-   -   cambios en un menu (http://www.forosdelweb.com/f53/cambios-menu-413183/)

pakillo 29/07/2006 11:43

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>


fer10 29/07/2006 22:37

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>

pakillo 30/07/2006 02:00

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

fer10 30/07/2006 09:41

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.. :arriba:

y si buscas como hacer que aparecesca el texto extra (clase) en la seccion que selecionaste estas no es en css eso.

gzaloprgm 30/07/2006 11:32

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,

pakillo 30/07/2006 13:23

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

gzaloprgm 30/07/2006 18:11

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,


La zona horaria es GMT -6. Ahora son las 09:24.

Desarrollado por vBulletin® Versión 3.8.7
Derechos de Autor ©2000 - 2026, Jelsoft Enterprises Ltd.