Выдвигающаяся панелька
Добрый вечер знатоки, прошу вашей помощи переделать не много выдвижную панель.
Вот пример.
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<style>
#floatmenu {
background: url('http://png-2.findicons.com/files/icons/2584/freecns/16/arrow_left.png') 0 30% no-repeat;
width: 330px;
height: 40px;
padding: 0 5px 0 0px;
position: fixed;
bottom: 0px;
right: -177px;
z-index: 2;
}
#bottom2 {
background-color: #4679bd;
position: absolute;
height: 48px;
right: 0px;
bottom: -2px;
padding-bottom: 3px;
}
#bottom {
background-color: #4679bd;
position: absolute;
width: 95%;
height: 48px;
left: 0px;
bottom: -2px;
padding-left: 10px;
padding-bottom: 3px;
}
#cfgmenu img {margin:1px; padding:8px 5px 1px;}
</style>
</head>
<body>
<div id="bottom" >
<div id="floatmenu">
<div id="bottom2">
<span id="cfgmenu"><center>
<img src="http://png-5.findicons.com/files/icons/989/ivista_2/32/image.png" onclick="" border="0">
<img src="http://png-5.findicons.com/files/icons/989/ivista_2/32/image.png" onclick="" border="0"><img src="http://png-5.findicons.com/files/icons/989/ivista_2/32/image.png" onclick="" border="0"> <img src="http://png-5.findicons.com/files/icons/989/ivista_2/32/image.png" onclick="" border="0"><img src="http://png-5.findicons.com/files/icons/989/ivista_2/32/image.png" onclick="" border="0"><img src="http://png-5.findicons.com/files/icons/989/ivista_2/32/image.png" onclick="" border="0"><img src="http://png-5.findicons.com/files/icons/989/ivista_2/32/image.png" onclick="" border="0"></center></span>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$("#floatmenu").hover(
function() { $(this).stop().animate({right: "0"}, "medium"); },
function() { $(this).stop().animate({right: "-177"}, "medium"); },
500);
});
</script>
</body>
</html>
Задача со стоит в том что нужно чтоб панель выдвигалась только при наведении на стрелку (которая перед картинками кнопок) и задвигалась при повторном наведении на эту же стрелку. Вот как то так... Заранее большое спасибо всем кто отзовется помочь в решении этой задачи! Всех с Наступающим Новым Годом!!! Всех благ вам! |
zoOmer,
а что стрелку картинкой нельзя сделать??? |
рони, А причем тут стрелку картинкой? Даже если я её обверну тегом имедж ничего не изменится. Нужно вешать на картинку с стрелкой айди и чтоб скрипт выполнял выдвижения блока с другим айди.
Может я не так думаю? если так помоги сделать)) |
Цитата:
|
zoOmer,
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<style>
#floatmenu {
width: 330px;
height: 40px;
padding: 0 5px 0 0px;
position: fixed;
bottom: 0px;
right: -177px;
z-index: 2;
}
#bottom2 {
background-color: #4679bd;
position: absolute;
height: 48px;
right: 0px;
bottom: -2px;
padding-bottom: 3px;
}
#bottom {
background-color: #4679bd;
position: absolute;
width: 95%;
height: 48px;
left: 0px;
bottom: -2px;
padding-left: 10px;
padding-bottom: 3px;
}
#cfgmenu img {margin:1px; padding:8px 5px 1px;}
</style>
</head>
<body>
<div id="bottom" >
<div id="floatmenu">
<div id="bottom2">
<span id="cfgmenu"><center>
<img src="http://png-2.findicons.com/files/icons/2584/freecns/16/arrow_left.png" onclick="" border="0">
<img src="http://png-5.findicons.com/files/icons/989/ivista_2/32/image.png" onclick="" border="0"><img src="http://png-5.findicons.com/files/icons/989/ivista_2/32/image.png" onclick="" border="0"> <img src="http://png-5.findicons.com/files/icons/989/ivista_2/32/image.png" onclick="" border="0"><img src="http://png-5.findicons.com/files/icons/989/ivista_2/32/image.png" onclick="" border="0"><img src="http://png-5.findicons.com/files/icons/989/ivista_2/32/image.png" onclick="" border="0"><img src="http://png-5.findicons.com/files/icons/989/ivista_2/32/image.png" onclick="" border="0"></center></span>
</div>
</div>
</div>
<script>
$(document).ready(function() {
var n = 1;
$("#floatmenu img:first").mouseenter(function() {
n ^= 1;
$("#floatmenu").stop().animate({
right: n ? "-177" : "0"
}, "medium")
})
});
</script>
</body>
</html>
|
рони, Огромное вам спасибо!!! Крепкого вам здоровья))) Не первый раз уже выручаете меня))
|
| Часовой пояс GMT +3, время: 06:09. |