estados de botones en menu

Citar

Escrito el 03 Dic 2011 09:47 pm

hola gente, estoy armando un menu horizontal todo con codigo html y css. el tema es el siguiente.

al entrar al site. te encuentras en la seccion "home" y por lo cual en el menu el boton"home" debe aparecer precionado.(hasta ahi vengo sin problemas.) ahora...¿hay alguna manera de hacer que al ir a otra seccion deje de estar precionado y se precione el de la seccion que corresponda al hacer click? ademas estoy usando el estado hover para que al pasar el mouse cambie de color..

si necesitan ver el codigo avise que lo subo

muchas gracias!! muy bueno el foro!! :cool:

Por ignacio85r

31 de clabLevel

Genero:Masculino

Envíale un mensaje privado

diseñoweb moGraph

Citar

Escrito el 04 Dic 2011 04:58 am

Si es posible subir el código, así podríamos ayudarte más rapidamente!

saludos

Vicoy

Por vicoy

7 de clabLevel

Envíale un mensaje privado

@vicoysito

Citar

Escrito el 04 Dic 2011 02:30 pm

aqui dejo el codigo... incruste los estilos usados todo en un mismo doc.
desde ya muchas gracias! :wink:

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=utf-8" />
<title>Documento sin título</title>
<style>
   #menuHorizontal {
   font-family:"Courier New", Courier, monospace;
   margin-top:100px;
   float:left;
}

#menuHorizontal ul, li {
   list-style-type:none;
}

#menuHorizontal ul {
   margin:0px;
   padding:0px;
}

#menuHorizontal li {
   float:left;
   margin:3px;
    -moz-box-shadow: 0px 3px 1px #000000;
    -webkit-box-shadow: 0px 3px 1px #000000;
    box-shadow: 0px 3px 1px #000000;
}

#menuHorizontal li a {
   text-decoration:none;
   color:#033;
   display:block;
   padding: 3px 10px;
   text-decoration:none;
   text-align:center;
   border-bottom:3px solid #701010;
}

#menuHorizontal a#primero {
   color:#69c;
   border-bottom:3px solid #09F;
}

#menuHorizontal li a:hover {
   color:#69c;
   border-bottom:3px solid #09F;
}

</style>
</head>

<body>
      <div id="menuHorizontal">
               <ul>
                 <li><a href="#inicio" id="primero">Inicio</a></li>
                    <li><a href="#nosotros">Nosotros</a></li>
                    <li><a href="#servicios">Servicios</a></li>
                    <li><a href="#contacto">Contacto</a></li>
                  </ul>
            </div>
</body>
</html>

Por ignacio85r

31 de clabLevel

Genero:Masculino

Envíale un mensaje privado

diseñoweb moGraph

Citar

Escrito el 07 Dic 2011 11:09 pm

hola alguien me puede dar una mano??? gracias!!!

Por ignacio85r

31 de clabLevel

Genero:Masculino

Envíale un mensaje privado

diseñoweb moGraph

Citar

Escrito el 07 Dic 2011 11:11 pm

Simple mi estimado solo cambia el ID a la seccion donde estes y solo se vera hover el menu dependiendo de la seccion donde este

Por tjmysteri

Claber

138 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 08 Dic 2011 12:19 pm

mmmm no entiendo.... cual id cambio a donde???
gracias!

Por ignacio85r

31 de clabLevel

Genero:Masculino

Envíale un mensaje privado

diseñoweb moGraph

Citar

Escrito el 08 Dic 2011 05:19 pm

tjmysteri te dice que en el index.html pongas

Código :

     <div id="menuHorizontal">
               <ul>
                 <li><a href="#inicio" id="primero">Inicio</a></li>
                    <li><a href="#nosotros">Nosotros</a></li>
                    <li><a href="#servicios">Servicios</a></li>
                    <li><a href="#contacto">Contacto</a></li>
                  </ul>
            </div>

y en el nosotros.html

Código :

     <div id="menuHorizontal">
               <ul>
                 <li><a href="#inicio">Inicio</a></li>
                    <li><a href="#nosotros"  id="primero">Nosotros</a></li>
                    <li><a href="#servicios">Servicios</a></li>
                    <li><a href="#contacto">Contacto</a></li>
                  </ul>
            </div>

y así sucesivamente seccion por seccion

Por Mariux

BOFH

7756 de clabLevel

28 tutoriales
15 articulos

Genero:Femenino Héroes Editores

Envíale un mensaje privado Web

Diseñadora & ilustradora

@Mariux

Citar

Escrito el 08 Dic 2011 07:21 pm

aja... pero tengo ke colocar 1 menu por seccion entonces???

Por ignacio85r

31 de clabLevel

Genero:Masculino

Envíale un mensaje privado

diseñoweb moGraph

Citar

Escrito el 08 Dic 2011 07:28 pm

Logico men todas las paginas tienen menus por secciones k yo sepa no se puede poner un solo menu para todas las secciones no es como flash

Por tjmysteri

Claber

138 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 08 Dic 2011 07:31 pm

si se puede.
si se usa una pagina que tiene el menu y en la misma hay un div en el cual se cargan las diferentes secciones.

Por ignacio85r

31 de clabLevel

Genero:Masculino

Envíale un mensaje privado

diseñoweb moGraph

Citar

Escrito el 09 Dic 2011 01:22 am

Eso suena a ajax....

Entonces en vez de id, pon el estilo en una clase, y se la asignas con js al botón clickeado.

Usando jQuery existen los métodos

$("#capa").addClass("clasecss");
$("#capa").removeClass("clasecss");

Por nasho

Claber