0

Как выдвижную панель перенести на правую сторону и можно сделать через animate();

Код: https://jsfiddle.net/d5cwzn47/

$(document).ready(function() {
    $('#button_heder').click(function(){
        if ($('#panel').hasClass('visible')) {
            $('#panel').removeClass('visible');
            //alert("Test");
        }
        else {
            $('#panel').addClass('visible');
            //alert("Test");
        }
    });
});
*{ padding: 0; margin: 0;}
html,body {height:100%;}

#heder{ height: 50px; width:100%; background: #709dca; } 

#button_heder{
  position: absolute; 
  height: 50px; 
  width:50px; 
  background:#417F2C ; 
  top: 0px;
  right: 0;
  text-align: center;
  cursor: pointer;
  
  color: #fff;
	font-family:Arial, Helvetica, sans-serif; 
	font-size:16px;
	font-weight:bold;
	text-align: center;
} 

#panel{
    background:#27577f;
    display: inline-block;
    width: 300px;
    height: 500px;
    top: 60px;
    left: -250px;
    position: fixed;
    z-index: 4;
    opacity: 0.8;
    cursor: pointer;
    transition: left 0.3s linear;
}
#panel.visible {
   left:0;
   visibility: visible;
   opacity: 1;
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="heder">
  <div id="button_heder">Menu</div>
</div>

<div id="panel">
11111111111111
<br><br>
222222222222
</div>

1 ответ 1

1

Достаточно заменить left на right

$(document).ready(function() {
  $('#button_heder').click(function() {
    if ($('#panel').hasClass('visible')) {
      $('#panel').removeClass('visible');
      //alert("Test");
    } else {
      $('#panel').addClass('visible');
      //alert("Test");
    }
  });
});
* {
  padding: 0;
  margin: 0;
}
html,
body {
  height: 100%;
}
#heder {
  height: 50px;
  width: 100%;
  background: #709dca;
}
#button_heder {
  position: absolute;
  height: 50px;
  width: 50px;
  background: #417F2C;
  top: 0px;
  right: 0;
  text-align: center;
  cursor: pointer;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}
#panel {
  background: #27577f;
  display: inline-block;
  width: 300px;
  height: 500px;
  top: 60px;
  right: -250px;
  position: fixed;
  z-index: 4;
  opacity: 0.8;
  cursor: pointer;
  transition: right 0.3s linear;
}
#panel.visible {
  right: 0;
  visibility: visible;
  opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="heder">
  <div id="button_heder">Menu</div>
</div>

<div id="panel">
  11111111111111
  <br>
  <br>222222222222
</div>

2
  • Спасибо. У меня почему-то не работало, теперь нашел ошибку: нужно было в #panel.visible также заменить left:0; на right:0; Если можно в двух словах как заменить анимацию панели на animate();
    – Petrovich
    12 июл 2016 в 19:49
  • @Petrovich, вместо класса вызывать .animate({'right':0}, time)
    – Grundy
    12 июл 2016 в 19:51

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.