menu como este!!! He visto este menu:
http://www.gmarwaha.com/blog/2007/08...jquery-lovers/
Y lo que quiero de el, es que cuando oprime alguna opcion el recuadro de background se queda en esa seleccion hasta que se elige otra opcion, no me interesa el efecto ni el diseño... solo ese detalle de que al seleccionar alguna opcion se mantiene seleccionada...
Entonces ya modique el codigo de ejemplo pero no logro hacer eso que les comente y no se si haya algo que se me paso, por eso pido su ayyuda para poder hacerlo funcionar...
Este es el css que he modificado y aumentado a mis necesidades, los comentarios son el codigo original:
Código:
el index:.menu_principal { /*.lavaLampWithImage {*/
/*
position: relative;
height: 29px;
width: 421px;
background: url("bg.gif") no-repeat top;
padding: 15px;
margin: 10px 0;
overflow: hidden;*/
margin:0;
padding:3px 10px 0 10px;
list-style:none;
}
.menu_principal li {
/*float: left;
list-style: none;
*/
display:inline;
margin:0;
padding:0;
}
.menu_principal li a {
/* font: bold 14px arial;
text-decoration: none;
color: #fff;
outline: none;
text-align: center;
top: 7px;
text-transform: uppercase;
letter-spacing: 0;
position: relative;
display: block;
float: left;
height: 30px;
z-index: 10;
overflow: hidden;
margin: auto 10px;
*/
float:left;
background:url("../images_menu/orilla.gif") no-repeat left top;
margin:0;
padding:0 0 0 5px;
text-decoration:none;
}
.menu_principal li a span{
display:block;
background:url("../images_menu/cuadro.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color: #01603a;
}
.menu_principal li a:hover, .menu_principal li a:active {
background-position:0% -42px;
}
.menu_principal a:hover span{
color:#FFF;
background-position:100% -42px;
}
.menu_principal li.back {
/* background: url("lava.gif") no-repeat right -30px;
width: 9px; height: 30px;
z-index: 8;
position: absolute;
*/
background:url("../images_menu/orilla.gif") no-repeat left top;
background-position:0% -42px;
}
.menu_principal li.back .left {
/*background: url("lava.gif") no-repeat top left;
height: 30px;
margin-right: 9px;
*/
color:#FFF;
background:url("../images_menu/cuadro.gif") no-repeat right top;
background-position:100% -42px;
}
Código HTML:
<link rel="stylesheet" href="../CIByR/css/menu.css" type="text/css" media="screen"> <script type="text/javascript" src="../CIByR/css/jquery.lavalamp.js"></script> <script type="text/javascript"> $(function() { $("#1").lavaLamp({ fx: "backout", speed: 700, click: function(event, menuItem) { return false; } }); }); </script> <!--abrevio algo de codigo...--> <ul class="menu_principal" id="1"> <li class="back"><div class="left"></div></li> <li><a href="index.php"><span>Consulta</span></a></li> <li><a href="javascript:loadurl('../CIByR/pag_resguardo/formular_resguardo.php', 'trabajo')"><span>Formular</span></a></li> <li><a href="javascript:loadurl('../CIByR/pag_operador/monitor.php', 'trabajo')" ><span>Resguardos</span></a></li> <li><a href="javascript:loadurl('../CIByR/pag_operador/bienes_AF.php', 'trabajo')" ><span>Activo</span></a></li> <li><a href="javascript:loadurl('../CIByR/pag_operador/bienes_PV.php', 'trabajo')" ><span>Bienes</span></a></li> <li><a href="javascript:loadurl('../CIByR/pag_admin/usuarios.php', 'trabajo')" ><span>Control</span></a></li> </ul>
Código:
Gracias (function($) {
$.fn.lavaLamp = function(o) {
o = $.extend({ fx: "linear", speed: 500, click: function(){} }, o || {});
return this.each(function() {
var me = $(this), noop = function(){},
$back = $('<li class="back"><div class="left"></div></li>').appendTo(me),
$li = $("li", this), curr = $("li.current", this)[0] || $($li[0]).addClass("current")[0];
$li.not(".back").hover(function() {
move(this);
}, noop);
$(this).hover(noop, function() {
move(curr);
});
$li.click(function(e) {
setCurr(this);
return o.click.apply(this, [e, this]);
});
setCurr(curr);
function setCurr(el) {
$back.css({ "left": el.offsetLeft+"px", "width": el.offsetWidth+"px" });
curr = el;
};
function move(el) {
$back.each(function() {
$.dequeue(this, "fx"); }
).animate({
width: el.offsetWidth,
left: el.offsetLeft
}, o.speed, o.fx);
};
});
};
})(jQuery);
Respuesta: menu como este!!! 
