<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam recusandae dolorem unde quo distinctio quis possimus sunt id quia porro natus, pariatur repellat hic est vero repudiandae. Nostrum, commodi, fugiat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam recusandae dolorem unde quo distinctio quis possimus sunt id quia porro natus, pariatur repellat hic est vero repudiandae. Nostrum, commodi, fugiat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam recusandae dolorem unde quo distinctio quis possimus sunt id quia porro natus, pariatur repellat hic est vero repudiandae. Nostrum, commodi, fugiat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam recusandae dolorem unde quo distinctio quis possimus sunt id quia porro natus, pariatur repellat hic est vero repudiandae. Nostrum, commodi, fugiat.</p>
</div>
<div class="admin-ui">
<div class="admin-pull-button">open me</div>
<div class="admin-pull-content">
<!-- on desktop show 2 columns off icons that will activate actions on click. -->
<!-- on mobile show all icons under each other. -->
<!-- This is a fake class offcourse. -->
<div class="cols">
<!-- all a hrefs should be icons. -->
<a href="#">Edit page</a>
</div>
</div>
</div>
.admin-pull-button {
width:20px;
height:20px;
/* defining height and width becuase I have no icons yet. */
}
.admin-pull-content {
display:none;
/* need to fix something for mobile devices to. */
width:20%;
background:grey;
}
$('.admin-pull-button').on('click', function (){
$('.admin-pull-content').toggle('show');
});
This Pen doesn't use any external CSS resources.