SOURCE

$(function() {
  $.init();
  $(".profile-header img").each(function() {
    this.style.maxWidth = this.width > this.height ? 'initial' : '100%';
    this.style.maxHeight = this.width > this.height ? '100%' : 'initial';
  });
  $(".open-panel").click();
  $(".menu-multi .menu-button").on('click', function() {
    var target = this.href.match("#[a-zA-Z_-]+");
    if (target) {
      if ($(target[0]).attr('class').match('hide')) {
        $(target[0]).removeClass('hide');
      } else {
        $(target[0]).addClass('hide');
      }
    }
    return false;
  });
});

<div class="page-group">
  <div class="page" id="page-index">
    <header class="bar bar-nav">
      <a class="icon icon-me pull-left open-panel" data-panel=".panel-left"></a>
      <h1 class="title">SUI Mobile</h1>
    </header>
    <div class="content" id='page-index'>
    </div>
  </div>
  <div class="panel-overlay"></div>
  <!-- Left Panel with Reveal effect -->
  <div class="panel panel-left panel-reveal">
    <div class="content-block">
      <div class="profile-header">
        <div class="profile-imgbox-box">
          <img src="http://d.3987.com/dmlf_140505/005.jpg" alt="Profile Image" />
        </div>
        <div class="profile-info-box">
          <div class="item-title">蒙厅·D·路飞</div>
          <div class="item-title">
            <a class="button-logout button-round">退出登陆</a>
          </div>
        </div>
      </div>
      <div class="panel-menu">
        <div class="menu-item">
          <div class="menu-title menu-multi">
            <div class="icon icon-settings">
            </div>
            <a class="menu-button" href="#order_sub_menu">
              <div class="menu-inner">订单</div>
            </a>
          </div>
          <div class="menu-dropdown hide" id="order_sub_menu">
            <a class="menu-button">
              过往订单
            </a>
          </div>
        </div>
        <div class="menu-item">
          <div class="menu-title menu-multi">
            <div class="icon icon-settings">
            </div>
            <a class="menu-button" href="#product_manager">
              <div class="menu-inner">商品管理</div>
            </a>
          </div>
          <div class="menu-dropdown hide" id="product_manager">
            <a class="menu-button">
              新增商品
            </a>
            <a class="menu-button">
              我的吃货团
            </a>
            <a class="menu-button">
              发起吃货团
            </a>
            <a class="menu-button">
              下架商品
            </a>
          </div>
        </div>
        <div class="menu-item">
          <div class="menu-title">
            <div class="icon icon-settings">
            </div>
            <a class="menu-button">
              消息
            </a>
          </div>
        </div>
        <div class="menu-item">
          <div class="menu-title">
            <div class="icon icon-settings">
            </div>
            <a class="menu-button">
              设置
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>

.page-group {
  margin: 0 35% auto;
  max-width: 375px;
  height: 667px;
}

body.with-panel-left-reveal .page {
  -webkit-transform: translate3d(82%, 0, 0);
  transform: translate3d(82%, 0, 0);
}

.panel {
  width: 100%;
  background: #fff !important;
  font-size: 0.6rem;
}

.panel .content-block {
  margin: 0.75rem 0;
}

.profile-header {
  margin: 0 3.1rem 0.5rem;
}

.profile-imgbox-box {
  display: block;
  width: 4.5rem;
  height: 4.5rem;
  overflow: hidden;
  border-radius: 50%;
  background: #E2E2E2;
  border: 0.08rem solid #E2E2E2;
}

.profile-info-box {
  margin: 0.2rem 0.75rem auto;
}

.button-logout {
  border: none;
  border-radius: 1.25rem;
  background-color: #a00005;
  color: #fff;
  text-decoration: none;
  text-align: center;
  display: block;
  line-height: 0.75rem;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  padding: 0 0.1rem;
  margin: 0.15rem 0.3rem;
  height: 0.72rem;
  white-space: nowrap;
  position: relative;
  text-overflow: ellipsis;
  font-size: 0.5rem;
  font-family: inherit;
  cursor: pointer;
  width: 2.5rem;
}

.panel-menu {}

.panel-menu a {
  margin: 0.2rem 0.75rem auto;
}

.panel-menu .hide {
  display: none;
}

.menu-button {
  border: none;
  color: #424242;
  text-decoration: none;
  display: block;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  white-space: nowrap;
  position: relative;
  text-overflow: ellipsis;
  font-family: inherit;
  cursor: pointer;
}

.panel-menu .icon {
  margin: 0.2rem 0 0 1.4rem;
  display: inline;
}

.menu-title {
  margin-top: 0.3rem;
}

.menu-title .menu-button {
  display: inline;
}

.menu-title .menu-inner {
  white-space: pre-wrap;
  display: inline;
  padding-right: 1.5rem;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NUM0QzFDNzMyREM0MTFFNUJDNTI4OTMzMEE0RjBENzMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NUM0QzFDNzQyREM0MTFFNUJDNTI4OTMzMEE0RjBENzMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo1QzRDMUM3MTJEQzQxMUU1QkM1Mjg5MzMwQTRGMEQ3MyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo1QzRDMUM3MjJEQzQxMUU1QkM1Mjg5MzMwQTRGMEQ3MyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pjs2Bb4AAAItSURBVHjazJhbK0RRGIb3DIOU/AG5kUTOgxmHceFGKf6BO+Vf+E8KKYcYg3FuMpNIDhFJXJAcp/GtvKumrzVs+zBrvfU2u689q6d3rb33+lYgl8tZvymZ3JOX7eQp8gT50fJA0Wj4z3tKbY5VR14hV5ObyWLkZ6sICtq4p4V8CjihevIWucoUQJFUmtUayTvkShMAL5DiGqs3IMlK3YBSgwrIZkBWmAAoIRMKyG2/IIMO/hMjbygepCS53ARAoQHyOqu1YbrLTADMAXJbASmSDOkGlOpTQHaQN72CdAuYBeQuq4cBWaIbUEJGC0Am3UIGPVoqMsk9Vu/CwxTQDSj0iSQPWD2C6Q7oBhT6AmRKAZkwAVDoowBkn+LdqQVQ6A2QhwrIuAmAEjKi2KrF/jPdfgIKveI7Pcfq/eSMCYBSD4pakymA0+RxVrsn15oAOEMeY7Vbcif5ys4ApT7CzZJHWO2G3I1fSyfgPHmY1a7x6bvT/ZpZUMBdOoHzI8El8pCiK+wq8CQXNcFlBdw51tyD00G9SnAVHV++zgDn6hzHiwTjCrgTTKvrQya3Ca5jA5CvY3IP+UlnTxJEb8zhjpDck1cL20mCAcBFWD2D2ovOvjiERojDpTGtnsL9N8EQegt+LJrC5vRN59lMORp0DrePNH2BswvYivXVzuoHSO7dz+2QHcAa6+eMOl87WHOffm8m7QCK7foog+tFi2mZACg3npPkRUxrtkitgvUtwAA5A3LWdzPizwAAAABJRU5ErkJggg==);
  background-size: 0.55rem;
  background-repeat: no-repeat;
  background-position: 97% center;
  background-position: -webkit-calc(100% - .5rem) center;
  background-position: calc(100% - .5rem) center;
}

.menu-dropdown .menu-button {
  margin-left: 2.9rem;
}