Oi gente, eu não sabia em qual lugar colocar esse tópico, já que ele abrange HTML, CSS, jQuery e menciona PHP. Aí eu coloquei aqui mesmo, qualquer coisa avisem onde é pra por a dúvida no lugar certo ;) Fiquei alguns dias tentando resolver isso sozinho, mas acho que não deu muito resultado, por isso venho aqui pedir a opinião de vocês. Estou modificando um menu o qual quando se passa o mouse em um dos itens(Home, Sobre, Contato...), o selector fica em cima do mesmo, com certo gradiente de background. E o seletor desliza até o item que o mouse aponta. Até aí, tudo muito bem. O problema é que eu tive a ideia de tentar fazer com que quando o mouse passasse por cada item, a cor do gradiente do seletor mudasse também. Uma vez por cada item, tipo: se está no home, rosa. Se está no ajuda, azul, se no contato, verde e assim vai. Aí que veio minha desgraça: Tentei trocar o valor do gradiente pelo php(usando um echo, dentro da classe), não deu. Tentei mudar a classe, não deu. Tentei mudar o .CSS e chamá-lo externamente, piorou. Tentei fazer uma classe pra cada item da ul, mas me enrolei com o z-index. Seguem os códigos: HTML <div id="DESCMENU" class="DESCMENU">
<div><span>DESCRICAO_SOBRE</span></div>
<div><span>DESCRICAO_PORT</span></div>
<div><span>DESCRICAO_CONT</span></div>
</div>
<ul class="MENU" id="MENU" name="MENU">
<li><a href="#">Home</a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contato</a></li>
</ul>
CSS
body, ul, li, h1, h2, span{
margin:0;
padding:0;
}
ul{
list-style:none;
}
body{
background:#292929;
}
.MENU {
position: absolute;
height:410px;
width: 410px;
top:40px;
overflow:hidden;
right:1px;
font-family: Arial, Helvetica, sans-serif;
}
.MENU li {
display:block;
float:right;
clear:both;
position:relative;
overflow:hidden;
}
.MENU li.move {
width: 9px;
height: 68px;
right:0px;
padding-right:10px;
margin-top:2px;
z-index: 8;
position: absolute;
background: #2183c4;
background: -moz-linear-gradient(bottom, #991E57 0%, #D82989 50%, #CA207B 51%, #E87DB9 100%);
background: -webkit-linear-gradient(bottom, #991E57 0%, #D82989 50%, #CA207B 51%, #E87DB9 100%);
-moz-border-radius: 8px 0px 0px 8px;
-webkit-border-top-left-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
-moz-box-shadow:1px 1px 5px #000;
-webkit-box-shadow:1px 1px 5px #000;
box-shadow:1px 1px 5px #000;
}
.MENU li a {
font-size:66px;
text-transform:uppercase;
text-decoration: none;
color: #ddd;
outline: none;
text-indent:5px;
z-index: 10;
display: block;
float: right;
height: 66px;
line-height: 66px;
position: relative;
overflow: hidden;
padding-right:10px;
}
.DESCMENU{
margin-top:40px;
position:relative;
}
.DESCMENU div{
background: #2183c4;
background: -moz-linear-gradient(bottom, #991E57 0%, #D82989 50%, #CA207B 51%, #E87DB9 100%);
background: -webkit-linear-gradient(bottom, #991E57 0%, #D82989 50%, #CA207B 51%, #E87DB9 100%);
height: 68px;
padding-right:5px;
left:-5px;
width:0px;
margin-top:2px;
overflow:hidden;
position:absolute;
-moz-box-shadow:1px 1px 5px #000;
-webkit-box-shadow:1px 1px 5px #000;
box-shadow:1px 1px 5px #000;
-moz-border-radius: 0px 8px 8px 0px;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
.DESCMENU div span {
font-size:36px;
color: #f0f0f0;
text-indent:5px;
z-index: 10;
display: block;
height: 66px;
line-height: 66px;
position:absolute;
right:10px;
margin-left:5px;
top:-3px;
}
span.reference{
position:fixed;
left:10px;
bottom:10px;
font-size:14px;
}
span.reference a{
color:#aaa;
text-decoration:none;
}
JQUERY
$(function() {
Cufon.replace('a, span').CSS.ready(function() {
var $menu=$("#MENU");
var $selected= $menu.find('li:first');
var $moving=$('<li />',{className:'move',top:$selected[0].offsetTop+'px',width:$selected[0].offsetWidth + 'px'});
$('#DESCMENU > div').each(function(i) {
var $this = $(this);$this.css('top',$menu.find('li:nth-child('+parseInt(i+2)+')')[0].offsetTop + 'px');});
$menu.bind('mouseleave',function(){moveTo($selected,400);})
.append($moving)
.find('li')
.not('.move')
.bind('mouseenter',function(){
var $this = $(this);
var offsetLeft = $this.offset().left - 20;
$('#DESCMENU > div:nth-child('+ parseInt($this.index()) +')').stop(true).animate({'width':offsetLeft+'px'},400, 'easeOutExpo');
moveTo($this,400);})
.bind('mouseleave',function(){
var $this = $(this);
var offsetLeft = $this.offset().left - 20;
$('#DESCMENU > div:nth-child('+ parseInt($this.index()) +')').stop(true).animate({'width':'0px'},400, 'easeOutExpo');});;
function moveTo($elem,speed){
$moving.stop(true).animate({
top: $elem[0].offsetTop + 'px',
width: $elem[0].offsetWidth + 'px'
}, speed, 'easeOutExpo');}});});
