Hack x Crack - Comunidad de Seguridad informática

Programación => Programación Web => Diseño web => Mensaje iniciado por: LaFleur en Noviembre 27, 2012, 04:22:35 pm

Título: Menu en css
Publicado por: 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 !
Título: Re:Menu en css
Publicado por: Prow 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;
}
Título: Re:Menu en css
Publicado por: LaFleur 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>
Título: Re:Menu en css
Publicado por: LaFleur 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">&#9660;</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>

Título: Re:Menu en css
Publicado por: astrokiller 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 :D
Título: Re:Menu en css
Publicado por: LaFleur 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 ?
Título: Re:Menu en css
Publicado por: astrokiller 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 :D Saludos
Título: Re:Menu en css
Publicado por: LaFleur 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?

Título: Re:Menu en css
Publicado por: astrokiller 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 :D
Saludos
Título: Re:Menu en css
Publicado por: LaFleur 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)


Título: Re:Menu en css
Publicado por: astrokiller en Noviembre 28, 2012, 03:35:49 pm
ouch sorry no habia visto eso :P tambien error mio ... ahi sobra un punto... es asi

arreglo
Título: Re:Menu en css
Publicado por: LaFleur en Noviembre 28, 2012, 03:55:55 pm
igual no me funciona mmmmmmmmmmmmmmmmm
que puede ser u.u
Título: Re:Menu en css
Publicado por: astrokiller en Noviembre 28, 2012, 04:43:32 pm
mmmm porque no pones el codigo fuente para poder revisarlo bien y asi ayudarte con una fuente
Título: Re:Menu en css
Publicado por: LaFleur en Noviembre 28, 2012, 05:05:36 pm
Esto es el js llamado men.js
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();
Lo que tengo en mi hoja de estilo
Código: [Seleccionar]
.btn_menu  {
    background-color: #000;
}
.btn_menu_activado  {
    background-color: #fff;
}

Mi Inicio.php

Código: [Seleccionar]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link rel=StyleSheet HREF="estilo.css" TYPE="text/css">
<script type="text/javascript" src="men.js"></script>
<script type="text/javascript" src="fancy/lib/jquery-1.7.1.min.js"></script> 
        <script type="text/javascript" src="fancy/source/jquery.fancybox.pack.js"></script> 
        <link rel="stylesheet" type="text/css" href="fancy/source/jquery.fancybox.css" /> 
<script type="text/javascript" src="jquery-1.2.1.pack.js"></script>
</head>
<body>
<div id="menu">
<ul>
   <li><a class="btn_menu" href="?modulo=centro">Inicio</a></li>
          <li><a class="btn_menu" href="?modulo=users">Registrar usuarios</a></li>
<li><a class="btn_menu" href="?modulo=Disponible">Disponible</a></li>
        <li><a class="btn_menu" href="">Mantenedor de Datos</a>
<ul>
<li><a class="btn_menu" href="?modulo=Agregar_Persona">Ingreso de Persona</span></a></li>
<li><a class="btn_menu" href="?modulo=Listar_Persona">Buscar Persona</span></a></li>
<li><a class="btn_menu" href="?modulo=Agregar_Equipo">Ingreso de Equipos</a></li>
<li><a class="btn_menu" href="?modulo=Listar_Equipo">Buscar Equipos</a></li>
<li><a class="btn_menu" href="?modulo=Agregar_Notebook">Ingreso de Notebooks</a></li>
<li><a class="btn_menu" href="?modulo=Listar_Notebook">Buscar Notebooks</a></li>
<li><a class="btn_menu" href="#">Celulares</a></li>
<li><a class="btn_menu" href="?modulo=informes">Informes</a></li>
</ul>
</li>
</ul>
</div>
</body>
Título: Re:Menu en css
Publicado por: creepernex en Noviembre 28, 2012, 06:44:58 pm
En que lenguaje esta echa la pagina?
Título: Re:Menu en css
Publicado por: LaFleur en Noviembre 28, 2012, 07:18:50 pm
php
Título: Re:Menu en css
Publicado por: astrokiller en Noviembre 28, 2012, 07:56:17 pm
Disculpa la demora es que estoy medio complicado en el trabajo XD bueno revise el codigo y me parecio raro q a mi tampoco me haya funcionado siendo que en otro proyecto lo habia utilizado... pero bueno lo rehize y quedo asi

JS
Código: [Seleccionar]
function btnSetActive(valor){
var arreglo = document.getElementsByTagName("a");
var x=0;
while(x < arreglo.length){
if(arreglo[x].getAttribute("id") == valor){
arreglo[x].setAttribute("class","btn_menu_activado");
}else{
arreglo[x].setAttribute("class","btn_menu");
}
x++;
}
}

function btnOnClick(){
var arreglo = document.getElementsByTagName("a");
for(var i=0 ; i < arreglo.length ; i++){
var ide = arreglo[i].getAttribute('id');
arreglo[i].setAttribute("onclick","btnSetActive("+ide+")");
}
}
window.onload = btnOnClick;

HTML
Código: [Seleccionar]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link rel=StyleSheet HREF="estilo.css" TYPE="text/css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="men.js"></script> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.js"></script>
        <script type="text/javascript" src="fancy/source/jquery.fancybox.pack.js"></script> 
        <link rel="stylesheet" type="text/css" href="fancy/source/jquery.fancybox.css" /> 
<script type="text/javascript" src="jquery-1.2.1.pack.js"></script>
</head>
<body>
<div id="menu">
<ul>
   <li><a id="1" class="btn_menu" href="#">Inicio</a></li>
           <li><a id="2" class="btn_menu" href="#">Registrar usuarios</a></li>
   <li><a id="3" class="btn_menu" href="#">Disponible</a></li>
           <li><a id="4" class="btn_menu" href="#">Mantenedor de Datos</a>
      <ul>
      <li><a id="5" class="btn_menu" href="#">Ingreso de Persona</span></a></li>
      <li><a id="6" class="btn_menu" href="#">Buscar Persona</span></a></li>
      <li><a id="7" class="btn_menu" href="#">Ingreso de Equipos</a></li>
      <li><a id="8" class="btn_menu" href="#">Buscar Equipos</a></li>
<li><a id="9" class="btn_menu" href="#">Ingreso de Notebooks</a></li>
<li><a id="10" class="btn_menu" href="#">Buscar Notebooks</a></li>
<li><a id="11" class="btn_menu" href="#">Celulares</a></li>
<li><a id="12" class="btn_menu" href="#">Informes</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>

solo habia un pequeño detalle cuando utilizo los links en vez de # se recarga la pagina a default ahora no tngo muxo tiempo pero en cuanto pueda le exare un vistazo a eso...

Saludos
Título: Re:Menu en css
Publicado por: Prow en Noviembre 30, 2012, 03:44:40 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"; //¿POR QUÉ DOS PUNTOS?
        arreglo[x].addEventListener('click', function(){this.className="btn_menu_activado"},false)
    }
}
window.onload(btnSetActive)
</script>


Cambia:
Código: [Seleccionar]
arreglo[x]..className="btn_menu";
Por:
Código: [Seleccionar]
arreglo[x].className="btn_menu";

Creo que haz puesto un punto de más.

Saludos
Título: Re:Menu en css
Publicado por: Alan++ en Diciembre 05, 2012, 03:50:52 pm
Ja ja ja, estan tratando de responder la pregunta o de crear confusion?  ;D

Podrias hacerlo facilmente con css, utilizando link, visited y hoover...

Personalmente a estas alturas lo veo algo feo, hace poquito estuve hablando con Jag al respecto y entre los dos inventamos una solucion muy bonita, basada en jquery y muy estetica

Si te interesa en el IRC de hxc me doy algunas vueltas a veces, tambien Jag podria ayudarte

Tu principal problema LaFleur es que usas sintaxis sucia, hay cosas muy graciosas en tu css y ni que decirte del html, deberias usar html5 que siendo mas sencillo es tambien mas util
Título: Re:Menu en css
Publicado por: LaFleur en Diciembre 05, 2012, 08:38:24 pm
Ja ja ja, estan tratando de responder la pregunta o de crear confusion?  ;D

Podrias hacerlo facilmente con css, utilizando link, visited y hoover...

Personalmente a estas alturas lo veo algo feo, hace poquito estuve hablando con Jag al respecto y entre los dos inventamos una solucion muy bonita, basada en jquery y muy estetica

Si te interesa en el IRC de hxc me doy algunas vueltas a veces, tambien Jag podria ayudarte

Tu principal problema LaFleur es que usas sintaxis sucia, hay cosas muy graciosas en tu css y ni que decirte del html, deberias usar html5 que siendo mas sencillo es tambien mas util

mmm Bueno sin duda que esta mal mi css si tienes un ejemplo de lo que inventaste serias tan amable de compartirlo?

Voy a ver lo de html5

Saludos!
Título: Re:Menu en css
Publicado por: Alan++ en Diciembre 05, 2012, 09:33:33 pm
Mmmm... creo que no

No te voy a dar la respuesta, al menos no de esta forma, ya te comente donde esta el error y que seria lo que haria yo en tu lugar

Si queres lo charlamos en el irc publicamente, de lo contrario no soy yo el posible interesado
Título: Re:Menu en css
Publicado por: LaFleur en Diciembre 05, 2012, 09:39:06 pm
Mmmm... creo que no

No te voy a dar la respuesta, al menos no de esta forma, ya te comente donde esta el error y que seria lo que haria yo en tu lugar

Si queres lo charlamos en el irc publicamente, de lo contrario no soy yo el posible interesado

ok, si es obio lo que dices el problema es que estoy bloqueado en mi trabajo y no puedo conectarme al irc..
mañana en la mañana solucionare ese problema, espero verte para que charlemos!

Saludos!