D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
coakenfold
Full window
Github gist
Drawer as a page
<div id="drawer" class="drawer" data-state=""> <div class="drawer__content"> <button id="hide" class='hide'>Hide</button> <h1>I am the drawer</h1> <p>Drawer is full width/height and you can scroll within the drawer.</p> <hr> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil accusamus consectetur tenetur corporis, pariatur ea repudiandae exercitationem veniam laborum voluptatum modi porro temporibus odit doloremque mollitia reiciendis, asperiores in expedita.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil accusamus consectetur tenetur corporis, pariatur ea repudiandae exercitationem veniam laborum voluptatum modi porro temporibus odit doloremque mollitia reiciendis, asperiores in expedita.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil accusamus consectetur tenetur corporis, pariatur ea repudiandae exercitationem veniam laborum voluptatum modi porro temporibus odit doloremque mollitia reiciendis, asperiores in expedita.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil accusamus consectetur tenetur corporis, pariatur ea repudiandae exercitationem veniam laborum voluptatum modi porro temporibus odit doloremque mollitia reiciendis, asperiores in expedita.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil accusamus consectetur tenetur corporis, pariatur ea repudiandae exercitationem veniam laborum voluptatum modi porro temporibus odit doloremque mollitia reiciendis, asperiores in expedita.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil accusamus consectetur tenetur corporis, pariatur ea repudiandae exercitationem veniam laborum voluptatum modi porro temporibus odit doloremque mollitia reiciendis, asperiores in expedita.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil accusamus consectetur tenetur corporis, pariatur ea repudiandae exercitationem veniam laborum voluptatum modi porro temporibus odit doloremque mollitia reiciendis, asperiores in expedita.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil accusamus consectetur tenetur corporis, pariatur ea repudiandae exercitationem veniam laborum voluptatum modi porro temporibus odit doloremque mollitia reiciendis, asperiores in expedita.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil accusamus consectetur tenetur corporis, pariatur ea repudiandae exercitationem veniam laborum voluptatum modi porro temporibus odit doloremque mollitia reiciendis, asperiores in expedita.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil accusamus consectetur tenetur corporis, pariatur ea repudiandae exercitationem veniam laborum voluptatum modi porro temporibus odit doloremque mollitia reiciendis, asperiores in expedita.</p> </div> </div> <div class="page"> <button id="show">Show Drawer</button> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil accusamus consectetur tenetur corporis, pariatur ea repudiandae exercitationem veniam laborum voluptatum modi porro temporibus odit doloremque mollitia reiciendis, asperiores in expedita.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil accusamus consectetur tenetur corporis, pariatur ea repudiandae exercitationem veniam laborum voluptatum modi porro temporibus odit doloremque mollitia reiciendis, asperiores in expedita.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil accusamus consectetur tenetur corporis, pariatur ea repudiandae exercitationem veniam laborum voluptatum modi porro temporibus odit doloremque mollitia reiciendis, asperiores in expedita.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil accusamus consectetur tenetur corporis, pariatur ea repudiandae exercitationem veniam laborum voluptatum modi porro temporibus odit doloremque mollitia reiciendis, asperiores in expedita.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil accusamus consectetur tenetur corporis, pariatur ea repudiandae exercitationem veniam laborum voluptatum modi porro temporibus odit doloremque mollitia reiciendis, asperiores in expedita.</p> </div>