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
-
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 !
-
¿Algo asi te sirve o no quieres usa jS?
<a onclick="this.className=\'menuSeleccionado\'">PESTAÑA 1</a>
.menuSeleccionado
{
background-color:#FF0000;
}
-
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>
-
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>
-
lo mejor seria con javascript... es la forma mas corta de hacerlo
mira asignales una clase a tus elementos de lista ejemplo
<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:
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
.btn_menu{
background-color: #666666;
}
.btn_menu_activado{
background-color: #333333;
}
Espero te sirva de algo Saludos :D
-
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 ?
-
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
-
<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?
-
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
-
mira hice todo lo que me dijiste pero aun asi no me funciona :/
la consola me tira el siguiente errror
SyntaxError: missing name after . operator
[Detener en este error]
arreglo[x]..className="btn_menu";
men.js (línea 4, columna 10)
-
ouch sorry no habia visto eso :P tambien error mio ... ahi sobra un punto... es asi
arreglo
-
igual no me funciona mmmmmmmmmmmmmmmmm
que puede ser u.u
-
mmmm porque no pones el codigo fuente para poder revisarlo bien y asi ayudarte con una fuente
-
Esto es el js llamado men.js
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
.btn_menu {
background-color: #000;
}
.btn_menu_activado {
background-color: #fff;
}
Mi Inicio.php
<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>
-
En que lenguaje esta echa la pagina?
-
php
-
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
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
<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
-
<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:
arreglo[x]..className="btn_menu";
Por:
arreglo[x].className="btn_menu";
Creo que haz puesto un punto de más.
Saludos
-
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
-
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!
-
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
-
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!