Comunidad de diseño web y desarrollo en internet online

estados de botones en menu

Citar            
MensajeEscrito 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  

diseñoweb moGraph

chrome
Citar            
MensajeEscrito 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



 

firefox
Citar            
MensajeEscrito 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  

diseñoweb moGraph

chrome
Citar            
MensajeEscrito el 07 Dic 2011 11:09 pm
hola alguien me puede dar una mano??? gracias!!!

Por ignacio85r

31 de clabLevel



Genero:Masculino  

diseñoweb moGraph

firefox
Citar            
MensajeEscrito 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



 

firefox
Citar            
MensajeEscrito el 08 Dic 2011 12:19 pm
mmmm no entiendo.... cual id cambio a donde???
gracias!

Por ignacio85r

31 de clabLevel



Genero:Masculino  

diseñoweb moGraph

chrome
Citar            
MensajeEscrito 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

7758 de clabLevel

28 tutoriales
15 articulos

Genero:Femenino   Héroes Editores

Diseñadora & ilustradora

chrome
Citar            
MensajeEscrito el 08 Dic 2011 07:21 pm
aja... pero tengo ke colocar 1 menu por seccion entonces???

Por ignacio85r

31 de clabLevel



Genero:Masculino  

diseñoweb moGraph

chrome
Citar            
MensajeEscrito 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



 

firefox
Citar            
MensajeEscrito 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  

diseñoweb moGraph

chrome
Citar            
MensajeEscrito 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

908 de clabLevel

1 tutorial

Genero:Masculino  

Web Developer

chrome
Citar            
MensajeEscrito el 12 Dic 2011 05:26 am
Junto con lo de Nasho puedes agregar un hash a la url y leerla con js para aplicar el estilo al que concuerde.

Suerte,

Por Kinduff

Claber

3563 de clabLevel

21 tutoriales
3 articulos

 

web dev wizzard

chrome
Citar            
MensajeEscrito el 12 Dic 2011 02:05 pm
voy aprobar y comento

Por ignacio85r

31 de clabLevel



Genero:Masculino  

diseñoweb moGraph

chrome

   Página 1 de 1

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.