- 04, Jan 2014
- #1
нужно панельку сделать резиновой, тоесть чтобы контент находящийся в нутри был виден весь,
#co {
bottom:-3px;
width:100%;
height:140px;
margin:0 auto;
position:fixed;
overflow:hidden;
background-color:none;
}
ul#sld{
height:100%;
list-style:none;
position:absolute;
bottom:0px;
left:830px;
font-size:20px;
font-family: Verdana;
font-weight:;
color:#999;
letter-spacing:-2px;
width:250px;
}
ul#sld li{
float:right;
margin:0px 20px 0px 0px;
}
ul#sld a{
cursor:pointer;
position:relative;
float:left;
bottom:-95px;
line-height:20px;
box-shadow:0px 0px 10px #000;
}
ul#sld span.title{
background:#0000ff;
display:block;
height:25px;
text-shadow:2px 2px 2px #AAA;
color:#fff;
text-indent:10px;
padding:10px
}
ul#sld span.description {
box-shadow:0px 0px 10px #0000ff;
font-family:Verdana;
overflow:auto;
width:210px;
height:55px;
background-color:#fff;
border-left:1px solid #000;
border-right:1px solid #000;
color:#555;
display:block;
font-size:17px;
padding:10px;
}
.fr{height:100%;padding:10px;}
ul#sld a:hover span.description{
background-color:#eee;}
ul#sld a:hover span.title{
background:#222;
}
$(function() {
$('#sld > li').hover(
function () {
var $this = $(this);
$('a',$this).stop(true,true).animate({
'bottom':'-15px'
}, 400);
$('i',$this).stop(true,true).animate({
'top':'-10px'
}, 50);
},
function () {
var $this = $(this);
$('a',$this).stop(true,true).animate({
'bottom':'-95px'
}, 200);
$('i',$this).stop(true,true).animate({
'top':'50px'
}, 900);
}
);
});
<div id="co">
<?php if ($inUser->id){?>
<ul id="sld"><li><a><span class="title">еее</span>
<span class="description"><div >ssssssssssssssssssssssss/div></span></a></li></ul></div>