Показать сообщение отдельно
  #1 (permalink)  
Старый 28.12.2014, 20:25
Кандидат Javascript-наук
Отправить личное сообщение для zoOmer Посмотреть профиль Найти все сообщения от zoOmer
 
Регистрация: 21.05.2013
Сообщений: 131

Выдвигающаяся панелька
Добрый вечер знатоки, прошу вашей помощи переделать не много выдвижную панель.

Вот пример.

<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>



Задача со стоит в том что нужно чтоб панель выдвигалась только при наведении на стрелку (которая перед картинками кнопок) и задвигалась при повторном наведении на эту же стрелку.

Вот как то так... Заранее большое спасибо всем кто отзовется помочь в решении этой задачи!

Всех с Наступающим Новым Годом!!! Всех благ вам!
Ответить с цитированием