!!閉じれる半透明のパネル
!半透明のパネルを追加
[html]
 <div id="overlay" class="content">
     <div class="inner">
     @{[$s->panel_content()]}
             <div id="panel" class="panel hide"></div>
     </div>
 </div>
[css]
 .content{
   position:absolute;
   top: 375px;
   left:0px;
   width:60%;
   min-width:315px;
   display:none;
   z-index:100;
 }
 .inner{
   padding:10px;
   background-color:rgba(0,0,0,0.5);
 }

!閉じたり開いたり
[JavaScript]
 <script type="text/javascript">
     $(function() {
         $('#panel').toggle(
             function() {
                 $(this).addClass('show').removeClass('hide');
                 $('#overlay').stop().animate( { left : - $('#overlay').width()   + 20 + 'px' }, 300 );
             },
             function() {
                 $(this).addClass('hide').removeClass('show');
                 $('#overlay').stop().animate( { left : '0px' }, 300 );
             }
         );
         $('#overlay').fadeIn(500);
     });
 
 </script>

!作ってみる


*[折りたためるパネルを追加(github)|https://github.com/john-smith-7701/mmt/commit/8e1f973d8954568a0aa74cad04cd7fd6728224a1]
*[実装してみた|https://qweer.info/menu/menu]
*TODO
**パネルが閉じた状態から始めたい
!画面
{{ref_image panel.png}}

!SOURCE

 diff --git a/toolmmt/lib/Tool/mmt/Controller/Menu.pm b/toolmmt/lib/Tool/mmt/Controller/Menu.pm
 index ef1ca1f..8ed6945 100644
 --- a/toolmmt/lib/Tool/mmt/Controller/Menu.pm
 +++ b/toolmmt/lib/Tool/mmt/Controller/Menu.pm
 @@ -62,4 +62,48 @@
       }
       return $text;
   }
 + sub make_panel{
 +     my $s = shift;
 +     my $text = <<END_SCRIPT;
 +<link rel="stylesheet" type="text/css" href="/css/demo.css" />
 +
 +<div id="overlay" class="content">
 +    <div class="inner">
 +    @{[$s->panel_content()]}
 +            <div id="panel" class="panel hide"></div>
 +    </div>
 +</div>
 +
 +<script type="text/javascript">
 +    \$(function() {
 +        \$('#panel').toggle(
 +            function() {
 +                \$(this).addClass('show').removeClass('hide');
 +                \$('#overlay').stop().animate( { left : - \$('#overlay').width() + 20 + 'px' }, 300 );
 +            },
 +            function() {
 +                \$(this).addClass('hide').removeClass('show');
 +                \$('#overlay').stop().animate( { left : '0px' }, 300 );
 +            }
 +        );
 +        \$('#overlay').fadeIn(500);
 +    });
 +    window.onload = function(){
 +//      document.getElementById("panel").click();
 +    };
 +
 +</script>
 +
 +END_SCRIPT
 +     return $text;
 + }
 + sub panel_content{
 +     my $s = shift;
 +     my $text = <<END_SCRIPT
 +    <pre>
 +    @{[`cal -3h`]}
 +    @{[`date +"%a %b %d %Y"`]}
 +    </pre>
 +END_SCRIPT
 + }
   1;
 diff --git a/toolmmt/public/css/demo.css b/toolmmt/public/css/demo.css
 new file mode 100644
 index 0000000..0941c15
 --- /dev/null
 +++ b/toolmmt/public/css/demo.css
 @@ -0,0 +1,27 @@
 +.content{
 +  position:absolute;
 +  top: 375px;
 +  left:0px;
 +  width:60%;
 +  min-width:315px;
 +  display:none;
 +  z-index:100;
 +}
 +.inner{
 +  padding:10px;
 +  background:transparent url(/css/black.png) repeat top left;
 +}
 +.panel{
 +  position:absolute;
 +  height:86px;
 +  width:20px;
 +  right:0px;
 +  top:10px;
 +  cursor:pointer;
 +}
 +.hide{
 +  background:transparent url(/css/hide.png) no-repeat center center;
 +}
 +.show{
 +  background:transparent url(/css/show.png) no-repeat center center;
 +}
 diff --git a/toolmmt/templates/menu/menu.html.ep b/toolmmt/templates/menu/menu.html.ep
 index ec27318..48724f8 100644
 --- a/toolmmt/templates/menu/menu.html.ep
 +++ b/toolmmt/templates/menu/menu.html.ep
 @@ -1,5 +1,6 @@
  % layout 'default';
  % title 'menu' ;
 +%== $self->make_panel();
  <table width=98%><tr><td style="vertical-align: top;">
  %   for my $r (@$_data){
  %       if ($r->{menukbn} =~ /^(H\d)/i){