Форум

zoOmer · #1 (**permalink**) 28.12.2014, 20:25

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

Вот пример.

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

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

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

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

рони · #2 (**permalink**) 28.12.2014, 21:05

zoOmer,
а что стрелку картинкой нельзя сделать???

zoOmer · #3 (**permalink**) 28.12.2014, 21:33

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

Может я не так думаю?
если так помоги сделать))

рони · #4 (**permalink**) 28.12.2014, 22:11

Сообщение от zoOmer

Нужно вешать на картинку с стрелкой айди и чтоб скрипт выполнял выдвижения блока с другим айди.

да иначе вычислять неизвестно как в каком месте фона стрелка или не стрелка .

рони · #5 (**permalink**) 28.12.2014, 22:16

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>

zoOmer · #6 (**permalink**) 29.12.2014, 00:34

рони, Огромное вам спасибо!!! Крепкого вам здоровья))) Не первый раз уже выручаете меня))

Форум

Справочник

Discord чат

Курсы javascript