Hola foristas, tengo un temita con este código. Resutla que me aparece en el fondo un #EEE y lo quiero pasar a #454545 y no lo logro. Es la parte donde se ve el menú de navegación. No sé si he sido clario. ¿Me dan una mano? Es un origial de CSSPLAY que trato de adaptar a mis necesidades. Una parte en css y otra en java, pero que en un momentos tiene para modificar colores.
Muchas gracias y ojalá mi consulta sea pertinente.
Se ve así:
Me gustaría se vea así:
Codigo css: /* #slide height = (number of top level links - 1) * height of links + inner div height */
#slide {padding:0; margin:0; list-style:none; width:190px; height:315px;/* border:1px solid #fff;*/ position:relative; overflow:hidden; font-family: verdana, sans-serif; font-size:11px; float:left; background-color:#1D1D1D; }
#slide li.sub,
#slide li.top
{display:block; float:left; height:24px; line-height:24px; width:190px; color:#000; background:#454545; background-image:url(../png/mb3.png); background-repeat:no-repeat; text-decoration:none;border-bottom:1px solid #fff; text-indent:20px; overflow:hidden; cursor:pointer;}
#slide li.sub {background:#454545 url(../gif/out.gif) no-repeat 5px 8px;}
#slide li.top a {text-decoration:none; color:#FFF; display:block; background:url(../gif/out.gif) no-repeat 5px 8px;}
#slide li.top a:hover {color:#FFF; background:#454545 url(../gif/out-over.gif) no-repeat 5px 8px;}
#slide li.clicked {color:#800; background:#454545 url(../gif/down.gif) no-repeat 5px 8px;}
/* #slide li.sub div height = (maximum sub lines * sub line height) + top level link height(variable fY in jQuery) */
#slide li.sub div {background:#fff; height:165px; width:160px; padding:0 15px; line-height:1.2em; font-family: verdana, sans-serif; text-indent:0;}
#slide li div ul {padding:0; margin:0; list-style:none;}
#slide li div ul li {float:left; height:20px; width:100%;}
#slide li div ul li a {padding:0; margin:0;color:#888; text-decoration:none; background:#fff url(../gif/out.gif) no-repeat 5px 6px; font-size:10px; display:block; border-bottom:1px solid #ddd; height:19px; line-height:19px; width:100%; text-indent:20px;}
#slide li div ul li a:hover {color:#069; background:#fff url(../gif/out-over.gif) no-repeat 5px 6px;}/* CSS Document */
Código dentro de la página html....Java.
<script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
/* ================================================== ==============
This copyright notice must be untouched at all times.
Copyright (c) 2008 Stu Nicholls - stunicholls.com - all rights reserved.
================================================== ================= */
/* <![CDATA[ */
$(document).ready(function(){
/* CONFIG */
/* set start (sY) and finish (fY) heights for the list items */
sY = 24; /* height of li.sub */
fY = 165; /* height of maximum sub lines * sub line height */
/* end CONFIG */
/* open first list item */
animate (fY)
$("#slide .sub").click(function() {
if (this.className.indexOf('clicked') != -1 ) {
animate(sY)
$(this) .removeClass('clicked')
.css("background", "#454545 url(gif/out.gif) no-repeat 5px 8px")
.css("color", "#000");
}
else {
animate(sY)
$('.clicked') .removeClass('clicked')
.css("background", "#454545 url(gif/out.gif) no-repeat 5px 8px")
.css("color", "#000");
$(this) .addClass('clicked');
animate(fY)
}
});
function animate(pY) {
$('.clicked').animate({"height": pY + "px"}, 500);
}
$("#slide .sub") .hover(function(){
$(this) .css("background", "#454545 url(gif/down.gif) no-repeat 5px 8px")
.css("color", "#FFF");
},function(){
if (this.className.indexOf('clicked') == -1) {
$(this) .css("background", "#454545 url(gif/out.gif) no-repeat 5px 8px")
.css("color", "#FFF");
}
});
});
/* ]]> */
</script>