Sidebar is now hidden on mobile devices and can be hidden/shown with the button
This commit is contained in:
parent
ecdcc31e9e
commit
0e27a473c5
|
@ -3,7 +3,7 @@ html, body {
|
|||
color: #333;
|
||||
}
|
||||
|
||||
@media only screen {
|
||||
|
||||
.sidebar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
|
@ -18,35 +18,40 @@ html, body {
|
|||
-webkit-overflow-scrolling: touch;
|
||||
background-color: #fafafa;
|
||||
color: #364149;
|
||||
|
||||
/* Animation: slide away */
|
||||
-webkit-transition: left 0.5s; /* Safari */
|
||||
-o-transition: left 0.5s; /* Opera */
|
||||
-moz-transition: left 0.5s; /* Mozilla Firefox */
|
||||
transition: left 0.5s;
|
||||
}
|
||||
|
||||
.page-wrapper {
|
||||
position: absolute;
|
||||
overflow-y: auto;
|
||||
left: 310px;
|
||||
left: 315px;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
box-sizing: border-box;
|
||||
background: none repeat scroll 0 0 #FFF;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/* Animation: slide away */
|
||||
-webkit-transition: left 0.5s; /* Safari */
|
||||
-o-transition: left 0.5s; /* Opera */
|
||||
-moz-transition: left 0.5s; /* Mozilla Firefox */
|
||||
transition: left 0.5s;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1060px) {
|
||||
.sidebar {
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
top: 40px;
|
||||
left: -300px;
|
||||
}
|
||||
.page-wrapper {
|
||||
top: 40px;
|
||||
left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
.mobile-hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.page {
|
||||
|
|
|
@ -0,0 +1,17 @@
|
|||
$( document ).ready(function() {
|
||||
|
||||
// Interesting DOM Elements
|
||||
var sidebar = $("#sidebar");
|
||||
var page_wrapper = $("#page-wrapper");
|
||||
|
||||
$("#sidebar-toggle").click(function(event){
|
||||
if(sidebar.position().left === 0){
|
||||
sidebar.css({left: "-300px"});
|
||||
page_wrapper.css({left: "15px"});
|
||||
} else {
|
||||
sidebar.css({left: "0"});
|
||||
page_wrapper.css({left: "315px"});
|
||||
}
|
||||
});
|
||||
|
||||
});
|
|
@ -20,7 +20,7 @@
|
|||
<div id="page-wrapper" class="page-wrapper">
|
||||
|
||||
<div id="menu-bar" class="menu-bar">
|
||||
<i class="fa fa-bars left"></i>
|
||||
<i id="sidebar-toggle" class="fa fa-bars left"></i>
|
||||
<h1 class="menu-title">{{ title }}</h1>
|
||||
</div>
|
||||
|
||||
|
@ -30,6 +30,7 @@
|
|||
|
||||
</div>
|
||||
|
||||
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
|
||||
<script src="book.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
Loading…
Reference in New Issue