補足情報をjQueryを使って横とか下とかにうにゅっと出してみる。

イメージとしては下の図のような感じ
f:id:alfe1025:20130727192514j:plain,w250

div1にメイン情報を載せて、div2にサブ情報を載せる感じで。
ボタンを押すと div2を出したり消したりできるようにしてみたかった。
下のコードをhtmlファイルとして作れば動くはず。

div_sub.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  </head>
  <body>
    <div id="main_contents"></div>
    <div id="sub">
      <div id="sub_botton">
        <div id="left_botton" class="botton">⇒</div>
        <div id="bottom_botton" class="botton">↑</div>
      </div>
    <div>
  </body>
  <style type="text/css">
    html, body {
      margin: 0;
    }
    #main_contents {
      width: 440px;
      height: 600px;
      position: relative;
      border: none;
      background-color: #CCAA00
    }
    #sub {
      width: 160px;
      height: 600px;
      position: absolute;
      top:  0px;
      left: 440px;
      background-color: #99cc00
    }

    #sub_botton {
      width:  90px;
      height: 24px;
      position: absolute;
      bottom:  0px;
      right: 0px;
    }
    
    .botton {
      font-size:10px;
      font-family:Comic Sans MS;
      font-weight:normal;
      -moz-border-radius:8px;
      -webkit-border-radius:8px;
      border-radius:8px;
      border:1px solid #d02718;
      padding:9px 18px;
      text-decoration:none;
      float:left;
      background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #f24537), color-stop(100%, #c62d1f) );
      background:-moz-linear-gradient( center top, #f24537 5%, #c62d1f 100% );
      background:-ms-linear-gradient( top, #f24537 5%, #c62d1f 100% );
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f24537', endColorstr='#c62d1f');
      background-color:#f24537;
      color:#ffffff;
      display:inline-block;
      text-shadow:1px 1px 0px #810e05;
       -webkit-box-shadow: 1px 1px 0px 0px #f5978e;
       -moz-box-shadow: 1px 1px 0px 0px #f5978e;
       box-shadow: 1px 1px 0px 0px #f5978e;
    }.botton:hover {
      background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #c62d1f), color-stop(100%, #f24537) );
      background:-moz-linear-gradient( center top, #c62d1f 5%, #f24537 100% );
      background:-ms-linear-gradient( top, #c62d1f 5%, #f24537 100% );
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c62d1f', endColorstr='#f24537');
      background-color:#c62d1f;
    }.botton:active {
      position:relative;
      top:1px;
    }
  </style>
  
  <script type="text/javascript" code="subs_code">
// *********** subを動かすjquery*******
  $(function(){
    $("#left_botton").click(function(){
       if($("#sub").width() == 160){
         // close sub
         $("#main_contents").width(600).css({cursor:"auto"});
         $("#main_contents").height(600).css({cursor:"auto"});
         $("#sub").css({top:"600px", left:"600px"});
         $("#sub").width(0).css({cursor:"auto"});
         $("#sub").height(0).css({cursor:"auto"});
         $("#bottom_botton").text("↑");
         $("#left_botton").text("←");
       }else{
         // open sub
         $("#main_contents").width(440).css({cursor:"auto"});
         $("#main_contents").height(600).css({cursor:"auto"});
         $("#sub").css({top:"0px", left:"440px"});
        $("#sub").width(160).css({cursor:"auto"});
        $("#sub").height(600).css({cursor:"auto"});
        $("#bottom_botton").text("↑");
         $("#left_botton").text("⇒");

      }
    });
    $("#bottom_botton").click(function(){
       if($("#sub").height() == 160){
         // close sub
         $("#main_contents").width(600).css({cursor:"auto"});
         $("#main_contents").height(600).css({cursor:"auto"});
         $("#sub").css({top:"600px", left:"600px"});
         $("#sub").width(0).css({cursor:"auto"});
         $("#sub").height(0).css({cursor:"auto"});
         $("#bottom_botton").text("↑");
         $("#left_botton").text("←");
       }else{
         // open sub
         $("#main_contents").width(600).css({cursor:"auto"});
         $("#main_contents").height(440).css({cursor:"auto"});
        $("#sub").css({top:"440px", left:"0px"});
        $("#sub").width(600).css({cursor:"auto"});
        $("#sub").height(160).css({cursor:"auto"});
        $("#bottom_botton").text("↓");
         $("#left_botton").text("←");

      }
    });
  });
  </script>
</html>