framework7.angular/kitchen-sink-material/panel-left.html

Full Featured Mobile HTML Framework For Building iOS & Android Apps using Angularjs

<div class="panel panel-left panel-cover">
  <div class="view navbar-fixed">
    <div class="pages">
      <div data-page="panel-left" class="page">
        <div class="navbar">
          <div class="navbar-inner">
            <div class="center">Left Panel</div>
          </div>
        </div>
        <div class="page-content">
          <div class="content-block">
            <p>This is a side panel/drawer. You can close it by clicking outsite or on this link: <a href="#" class="close-panel">close me</a>. You can put here anything, even another isolated view like in <a href="#" data-panel="right" class="open-panel">Right Panel</a></p>
          </div>
          <div class="content-block-title">Framework7 Kitchen Sink</div>
          <div class="list-block">
            <ul>
              <li><a href="forms.html" class="item-link close-panel">
                  <div class="item-content">
                    <div class="item-media"><i class="icon icon-f7"></i></div>
                    <div class="item-inner">
                      <div class="item-title">Forms</div>
                    </div>
                  </div></a></li>
              <li><a href="list-view.html" class="item-link close-panel">
                  <div class="item-content">
                    <div class="item-media"><i class="icon icon-f7"></i></div>
                    <div class="item-inner">
                      <div class="item-title">List View</div>
                    </div>
                  </div></a></li>
              <li><a href="media-lists.html" class="item-link close-panel">
                  <div class="item-content">
                    <div class="item-media"><i class="icon icon-f7"></i></div>
                    <div class="item-inner">
                      <div class="item-title">Media Lists</div>
                    </div>
                  </div></a></li>
              <li><a href="modals.html" class="item-link close-panel">
                  <div class="item-content">
                    <div class="item-media"><i class="icon icon-f7"></i></div>
                    <div class="item-inner">
                      <div class="item-title">Modals</div>
                    </div>
                  </div></a></li>
              <li><a href="bars.html" class="item-link close-panel">
                  <div class="item-content">
                    <div class="item-media"><i class="icon icon-f7"></i></div>
                    <div class="item-inner">
                      <div class="item-title">Navbars And Toolbars</div>
                    </div>
                  </div></a></li>
              <li><a href="popover.html" class="item-link close-panel">
                  <div class="item-content">
                    <div class="item-media"><i class="icon icon-f7"></i></div>
                    <div class="item-inner">
                      <div class="item-title">Popover</div>
                    </div>
                  </div></a></li>
              <li><a href="panels.html" class="item-link close-panel">
                  <div class="item-content">
                    <div class="item-media"><i class="icon icon-f7"></i></div>
                    <div class="item-inner">
                      <div class="item-title">Side Panels</div>
                    </div>
                  </div></a></li>
              <li><a href="swipe-delete.html" class="item-link close-panel">
                  <div class="item-content">
                    <div class="item-media"><i class="icon icon-f7"></i></div>
                    <div class="item-inner">
                      <div class="item-title">Swipe To Delete</div>
                    </div>
                  </div></a></li>
              <li><a href="swiper.html" class="item-link close-panel">
                  <div class="item-content">
                    <div class="item-media"><i class="icon icon-f7"></i></div>
                    <div class="item-inner">
                      <div class="item-title">Swiper Slider</div>
                    </div>
                  </div></a></li>
              <li><a href="tabs.html" class="item-link close-panel">
                  <div class="item-content">
                    <div class="item-media"><i class="icon icon-f7"></i></div>
                    <div class="item-inner">
                      <div class="item-title">Tabs</div>
                    </div>
                  </div></a></li>
            </ul>
          </div>
          <div class="content-block">
            <p>Long text block goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sem urna, gravida non scelerisque id, fringilla ac velit. Phasellus elementum a ipsum at ornare. Mauris sagittis rhoncus euismod. Integer convallis augue eu lacus ultrices, in dictum elit consequat. Nulla faucibus massa id felis egestas eleifend. Proin consequat dignissim magna ut scelerisque. Vestibulum ac lorem semper, posuere sapien nec, pharetra massa. Nulla a tellus facilisis, sollicitudin quam porta, aliquam lorem. Fusce dignissim eros ac diam molestie, ut ultrices lorem tristique. Ut facilisis augue ac nisi egestas malesuada. Nunc posuere tortor quis eleifend mollis. Aliquam erat volutpat. Donec feugiat elit tellus, nec convallis orci elementum in. Sed urna mi, vestibulum id tempus id, pretium et ante. Pellentesque eget sollicitudin ligula. Phasellus pellentesque velit eu porta suscipit.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>