Foros del Web » Creando para Internet » CSS »

Problema con menú css

Estas en el tema de Problema con menú css en el foro de CSS en Foros del Web. Saludos gente: Soy nuevo en todo lo que es css y estoy intentando hacer un menú, pero tengo el siguiente problema: Aqui mi codigo Código: ...
  #1 (permalink)  
Antiguo 03/11/2011, 21:44
Avatar de epinaresg  
Fecha de Ingreso: noviembre-2011
Mensajes: 13
Antigüedad: 12 años, 4 meses
Puntos: 0
Problema con menú css

Saludos gente:

Soy nuevo en todo lo que es css y estoy intentando hacer un menú, pero tengo el siguiente problema:

Aqui mi codigo

Código:
<html>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <head>
        <style type = "text/css">
            ul#menu {
                padding: 10px;
            }
            ul#menu li {
                display: inline;
            }
            ul#menu li a{
                width:100px;
                text-decoration: none;
                color: white;
                font-family:Verdana, Geneva, sans-serif;
                background-color: #F00;
                font-size: 12px;
                text-decoration: none;
                float: left;
                padding: 5px;
                border:thin;
                border-style:ridge;
                border-color: #FEFEFE;
                text-align:center;
            }
            ul#menu li a:hover {
                color: white;
                background-color: #00F;
            }
            ul#menu li a:active,
            ul#menu li a:focus {
                color:#fff;
                background-color:black;
            }
        </style>
    </head>
    <body>
        <div id="mainMenu">
            <ul id="menu">
                <li>
                    <a href="#">Inicio</a></li>
                <li>
                    <a href="#">Mi Cuenta</a></li>
                <li>
                    <a href="#">Acerca de</a></li>
                <li>
                    <a href="#">Contáctenos</a></li>
            </ul>
        </div>
    </body>
</html>
Deseo que cuando escoja una opción esta cambie el color de fondo a "negro", pero cuando escoja otra opción esta cambiara el color de fondo a "negro" nuevamente y la anterior volverá a su color original que seria "rojo".

Eh googleado acerca del tema y se recomienda usar la propiedad active, pero no consigo resolver mi problema. Tal vez estoy usándola equivocadamente, así que acudo a ustedes por ayuda.

Gracias de antemano
  #2 (permalink)  
Antiguo 04/11/2011, 05:22
Avatar de eZakto  
Fecha de Ingreso: julio-2008
Mensajes: 214
Antigüedad: 15 años, 8 meses
Puntos: 5
Respuesta: Problema con menú css

Para eso necesitarías JavaScript.
__________________
eZakto™
  #3 (permalink)  
Antiguo 04/11/2011, 08:32
Avatar de charlyalegret  
Fecha de Ingreso: septiembre-2011
Ubicación: Barcelona
Mensajes: 705
Antigüedad: 12 años, 6 meses
Puntos: 140
Respuesta: Problema con menú css

La propiedad active no sirve para lo que tu quieres.

Si se supone que tendrás varias páginas para cada elemento del menú, en cada una de ellas puedes definir un estilo para la sección correspondiente del menú.
por ejemplo, para la página de mi cuenta, pones:

Código HTML:
Ver original
  1. <ul id="menu">
  2.                 <li class="estiloinactivo">
  3.                     <a href="#">Inicio</a></li>
  4.                 <li class="estiloactivo">
  5.                     <a href="#">Mi Cuenta</a></li>
  6.                 <li class="estiloinactivo">
  7.                     <a href="#">Acerca de</a></li>
  8.                 <li class="estiloinactivo">
  9.                     <a href="#">Contáctenos</a></li>
  10.             </ul>

Para la página de Acerca de pones:

Código HTML:
Ver original
  1. <ul id="menu">
  2.                 <li class="estiloinactivo">
  3.                     <a href="#">Inicio</a></li>
  4.                 <li class="estiloinactivo">
  5.                     <a href="#">Mi Cuenta</a></li>
  6.                 <li class="estiloactivo">
  7.                     <a href="#">Acerca de</a></li>
  8.                 <li class="estiloinactivo">
  9.                     <a href="#">Contáctenos</a></li>
  10.             </ul>

etc etc, y en css pones las diferencias entre .estiloactivo y .estiloinactivo.
Si usas páginas dinámicas, pues lo puedes poner con variables!

Saludos

Etiquetas: hover, html, fondo
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 05:27.