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;
|
color: #333;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen {
|
|
||||||
.sidebar {
|
.sidebar {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
@ -18,35 +18,40 @@ html, body {
|
||||||
-webkit-overflow-scrolling: touch;
|
-webkit-overflow-scrolling: touch;
|
||||||
background-color: #fafafa;
|
background-color: #fafafa;
|
||||||
color: #364149;
|
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 {
|
.page-wrapper {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
left: 310px;
|
left: 315px;
|
||||||
right: 0;
|
right: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
background: none repeat scroll 0 0 #FFF;
|
background: none repeat scroll 0 0 #FFF;
|
||||||
-webkit-overflow-scrolling: touch;
|
-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) {
|
@media only screen and (max-width: 1060px) {
|
||||||
.sidebar {
|
.sidebar {
|
||||||
width: 100%;
|
left: -300px;
|
||||||
margin-right: 0;
|
|
||||||
top: 40px;
|
|
||||||
}
|
}
|
||||||
.page-wrapper {
|
.page-wrapper {
|
||||||
top: 40px;
|
|
||||||
left: 15px;
|
left: 15px;
|
||||||
padding-right: 15px;
|
padding-right: 15px;
|
||||||
}
|
}
|
||||||
.mobile-hidden {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.page {
|
.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="page-wrapper" class="page-wrapper">
|
||||||
|
|
||||||
<div id="menu-bar" class="menu-bar">
|
<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>
|
<h1 class="menu-title">{{ title }}</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -30,6 +30,7 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
|
||||||
<script src="book.js"></script>
|
<script src="book.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
Loading…
Reference in New Issue