feedback-menu.html

<!-- The layout of the panel -->
<div id="feedback-grip">F</div>
<div id="feedback-panel">
  <div class="feedbackit-form-elements">
    <br/>
    <div style="padding: 15px; text-align: center;">This can be a form!</div>
    <div style="padding: 15px; text-align: center; cursor: pointer;" id="close-link">Close me!</div>
    <br/>
  </div>
</div>

<!-- The needed JavaScript -->
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script>
  var slider = $('#feedback-grip,#feedback-panel');
  var menu_open = false;

  function toggleMenu() {
    if(menu_open) {
      closeMenu();
    } else {
      openMenu();
    }
  }
  function openMenu(){
    $("#feedback-grip").addClass("feedback-grip-open");
    $("#feedback-panel").addClass("feedback-panel-open");
    menu_open = true;
  }
  function closeMenu(){
    $("#feedback-grip").removeClass("feedback-grip-open");
    $("#feedback-panel").removeClass("feedback-panel-open"); 
    menu_open = false;
  }
    
  $(document).ready(function(){
    slider.css( "display", 'block');
    $("#feedback-grip").bind('click', function(){
      toggleMenu();
  	});
    $("#close-link").bind('click', function(){
      toggleMenu();
  	});
  });
</script>

<!-- CSS to make the showing/hiding work -->
<style>
  #feedback-grip {
    position: fixed;
    top: 25%;
    right: 0;
    display:none;
    z-index:1000;
  }
  #feedback-grip:hover {
    cursor:pointer;
  }  
  #feedback-panel {
    position: fixed;
    top: 25%;
    right: -250px;
    width: 250px !important;
    z-index:1000;
  }
  .feedback-grip-open {
    right: 250px !important;
  }
  .feedback-panel-open {
    right: 0 !important;
  }
</style>

<!--Styling and animations -->
<style>
  #feedback-grip {
    width: 35px;
    padding: 12px 0;
    text-align: center;
    background: #efefef;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-border-radius:5px 0 0 5px;
    -moz-border-radius:5px 0 0 5px;
    border-radius:5px 0 0 5px;
  }
  
  #feedback-panel {
    background: #dedede;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
    text-align: left;
    -webkit-border-radius: 0 0 0 5px;
    -moz-border-radius: 0 0 0 5px;
    border-radius: 0 0 0 5px;
  }
</style>