Autor Tema: Menu en css (Leído 5017 veces)

LaFleur · « **en:** Noviembre 27, 2012, 04:22:35 pm »

Estimados quisiera consultarles como logro que al momento de pinchar en un menú el menú quede seleccionado por ejemplo de otro color, esto lo pregunto ya que es importante saber donde se esta navegando les dejo mi menú en css

#menu {
   width: 200px;
   border-style: solid solid none solid;
   border-color: #94AA74;
   border-size: 1px;
   border-width: 1px;
   margin: 10px;

}
#menu li a {
   height: 12px;
   voice-family: "\"}\"";
   voice-family: inherit;
   height: 24px;
   text-decoration: none;
}

#menu li a:link, #menu li a:visited {
   color: #5E7830;
   display: block;
   background: url(imagenes/menu1.gif);
   padding: 5px 0 0 5px;

}

#menu li a:hover {
   color: #26370A;
   background: url(imagenes/menu1.gif) 0 -32px;
   padding: 5px 0 0 5px;
}

#menu li a:active {
   color: #26370A;
   background: url(imagenes/menu1.gif) 0 -64px;
   padding: 5px 0 0 5px;
}
#menu ul {
   list-style: none;
   margin: 0;
   padding: 0;
}
#menu a:active {
display : block;
background: #ffd700;
border-right: 4px solid #fff;
color : #fff;
}

o dejo un ejemplo que encontre en la web

http://www.araudi.net/ejemplos/tabs_activo.html#

Saludos !

Prow · « **Respuesta #1 en:** Noviembre 27, 2012, 05:26:56 pm »

¿Algo asi te sirve o no quieres usa jS?

Código: [Seleccionar]

<a onclick="this.className=\'menuSeleccionado\'">PESTAÑA 1</a>

.menuSeleccionado
{
  background-color:#FF0000;
}

LaFleur · « **Respuesta #2 en:** Noviembre 27, 2012, 06:06:50 pm »

Asi?? y el estilo lo deje en el css.. si es asi no me funciona

<li><a onclick="this.className=\'menuSeleccionado\'" href="?modulo=centro">Inicio[/url]</li>

LaFleur · « **Respuesta #3 en:** Noviembre 27, 2012, 06:22:06 pm »

dejo mi menu del html

div id="menu">
               <ul>
                  <li><a href="?modulo=centro">Inicio[/url]</li>
                  <li><a href="?modulo=users">Registrar usuarios[/url]</li>
                  <li><a href="?modulo=Disponible">Disponible[/url]</li>
                  <li><a href="">Mantenedor de Datos<span class="flecha">▼</span>[/url]
                     <ul>
                        <li><a href="?modulo=Agregar_Persona">Ingreso de Persona</span>[/url]</li>
                        <li><a href="?modulo=Listar_Persona">Buscar Persona</span>[/url]</li>
                        <li><a href="?modulo=Agregar_Equipo">Ingreso de Equipos[/url]</li>
                        <li><a href="?modulo=Listar_Equipo">Buscar Equipos[/url]</li>
                        <li><a href="?modulo=Agregar_Notebook">Ingreso de Notebooks[/url]</li>
                        <li><a href="?modulo=Listar_Notebook">Buscar Notebooks[/url]</li>
                        <li><a href="#">Celulares[/url]</li>
                        <li><a href="?modulo=informes">Informes[/url]</li>
                     </ul>
                  </li>
                  </ul>

               </div>

astrokiller · « **Respuesta #4 en:** Noviembre 27, 2012, 09:03:04 pm »

lo mejor seria con javascript... es la forma mas corta de hacerlo
mira asignales una clase a tus elementos de lista ejemplo

Código: [Seleccionar]

<ul>
    <li><a class="btn_menu" href="#">Texto Boton1</a></li>
    <li><a class="btn_menu" href="#">Texto Boton2</a></li>
    <li><a class="btn_menu" href="#">Texto Boton3</a></li>
    <li><a class="btn_menu" href="#">Texto Boton4</a></li>
</ul>

y el JavaScript deberia ser asi:

Código: [Seleccionar]

function btnSetActive(){
    var arreglo = document.getElementsByClassName("btn_menu");
    for(var x=0 ; x < arreglo.length ; x++){
        arreglo[x]..className="btn_menu";
        arreglo[x].addEventListener('click', function(){this.className="btn_menu_activado"},false)
    }
}
window.onload(btnSetActive)

Y aki darle un css por ejemplo

Código: [Seleccionar]

.btn_menu{
    background-color: #666666;
}


.btn_menu_activado{
    background-color: #333333;
}

Espero te sirva de algo Saludos

LaFleur · « **Respuesta #5 en:** Noviembre 28, 2012, 12:42:32 pm »

Gracias por darse el Tiempo amigos pero no me funciona :/ nose que estare haciendo mal yo creo que el script no lo estoy bien ubicando, como estoy trabajando con módulos lo estoy dejando en la pagina principal dentro de la etiqueta <HEAD>... que puede ser ?

astrokiller · « **Respuesta #6 en:** Noviembre 28, 2012, 01:43:51 pm »

haz una cosa... visualiza tu web con mozilla e instala el plug-in "Firebug" este te permite ver la codificacion de las paginas entre otras cosas... tambien tiene una pestaña consola donde te deberia alertar si hay un error con algun javascript ahi ve como te va y nos cuentas

Saludos

LaFleur · « **Respuesta #7 en:** Noviembre 28, 2012, 03:06:45 pm »

Código: [Seleccionar]

<script type="javascript">
function btnSetActive(){
    var arreglo = document.getElementsByClassName("btn_menu");
    for(var x=0 ; x < arreglo.length ; x++){
        arreglo[x]..className="btn_menu";
        arreglo[x].addEventListener('click', function(){this.className="btn_menu_activado"},false)
    }
}
window.onload(btnSetActive)
</script>

El la parte del arreglo x hay 2 .. esta bien?

astrokiller · « **Respuesta #8 en:** Noviembre 28, 2012, 03:15:39 pm »

disculpa pueda haber sido error mio parece que la ultima linea seria asi

window.onload = btnSetActive();

el resto esta bien eso ponlo en un archivo con extension *.js y lo importas al head de tu pagina saludos

Saludos

LaFleur · « **Respuesta #9 en:** Noviembre 28, 2012, 03:29:01 pm »

mira hice todo lo que me dijiste pero aun asi no me funciona :/

la consola me tira el siguiente errror

Código: [Seleccionar]

SyntaxError: missing name after . operator
[Detener en este error] 	

arreglo[x]..className="btn_menu";

men.js (línea 4, columna 10)

Autor Tema: Menu en css (Leído 5017 veces)

LaFleur

Menu en css

Prow

Re:Menu en css

LaFleur

Re:Menu en css

LaFleur

Re:Menu en css

astrokiller

Re:Menu en css

LaFleur

Re:Menu en css

astrokiller

Re:Menu en css

LaFleur

Re:Menu en css

astrokiller

Re:Menu en css

LaFleur

Re:Menu en css