横からひょいって出てくるメニュー - PHP,MySQL,Flex,JSな日々＋イラストとか

Sidr - A jQuery plugin for creating side menus
Facebookのような、横からメニューがでるものでっす。

ソースはこちらっ

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1" />
  <link rel="stylesheet" href="sidr-package-1.1.1/stylesheets/jquery.sidr.light.css">
  <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
  <script src="sidr-package-1.1.1/jquery.sidr.min.js"></script>
  <script>
    $(document).ready(function() {
      $('#left-menu').sidr({
        name: 'sidr-left',
        side: 'left',
        source: '#demoheader, #demo-content'
      });
      $('#remote-content-menu').sidr({
        name: 'sidr-remote-content',
        source: 'gallary.html'
      });
    });
  </script>
</head>
<body>
<div style="display: none;">
  <header id="demoheader">
    <h1>サイドメニュー</h1>
  </header>
  <div id="demo-content">
    中身だよーん
  </div>
</div>
<ul>
  <li><a id="left-menu" href="#left-menu">メニュー</a></li>
  <li><a id="remote-content-menu" href="#remote-content-menu">ギャラリー</a></li>
</ul>
</body>
</html>

BoxShadow

[http://coliss.com/articles/build-websites/operation/css/css-inline-block-grid-by-28inch.html:title=ふわりと浮かんだ感じの美しいシャドウを適用して画像を簡単にギャラリー風なシャドウを付けられまっす♪

配置するギャラリー用のスタイルシート]

<!DOCTYPE html>
<html>
<head>
  <title></title>
<style type="text/css">
  * {
    box-sizing:border-box;
    margin:0;
    padding:0;
  }
  body {
    background-color:#e43;
    position:relative;
  }
  img {
    max-width:100%;
    height:auto;
  }
  .gallery {
    width:90%;
    float:right;
  }
  img{
    margin-left:-2em;
    box-shadow:10px 10px 35px rgba(0,0,0,0.4);
  }
  .panel {
    display:inline-block;
    background:#e4e4e4;
    margin:2em;
    box-shadow:5px 5px 15px rgba(0,0,0,0.4),inset -1px -1px 1px  #fff;
    padding:2em 0;
    max-width:20em;
  }
</style>
</head>
<body>
<div class="gallery">
  <div class="panel"><img src="image.png" alt="" /></div>
  <div class="panel"><img src="image.png" alt="" /></div>
</div>
</body>
</html>