aside bar as menu in mobile

This commit is contained in:
fabrixxm 2015-11-08 19:08:00 +01:00
parent 69076b9a01
commit df866253b0
3 changed files with 45 additions and 6 deletions

View File

@ -24,7 +24,7 @@ body, section, nav .nav-menu, div.pager, ul.tabs {
}
nav {
min-width: 480px;
min-width: 100%;
}
.wall-item-container .wall-item-content {
@ -88,3 +88,29 @@ nav ul {
.wall-item-container.thread_level_7 .wall-item-content {
max-width: 100%;
}
/* aside in/out */
.mobile-aside-toggle {
display: block !important;
}
.mobile-aside-toggle a {
line-height: 35px;
padding: 0 10px;
}
.mobile-aside-toggle a i {
font-size: 22px;
color: #CCC;
}
aside {
display: block;
position: absolute;
max-width: 400px;
width: 80%;
left: -100%;
transition: left 0.5s;
}
aside.show {
left: 0;
}

View File

@ -7,6 +7,11 @@
</header>
<nav role="menubar">
<ul>
<li class="mobile-aside-toggle" style="display:none;">
<a href="#">
<i class="icons icon-list"></i>
</a>
</li>
{{if $nav.home}}
<li role="menuitem" id="nav-home-link" class="nav-menu {{$sel.home}}">
<a accesskey="p" class="{{$nav.home.2}}" href="{{$nav.home.0}}" title="{{$nav.home.3}}" >{{$nav.home.1}}</a>

View File

@ -86,6 +86,14 @@ function cmtBbOpen(id) {
function cmtBbClose(id) {
$("#comment-edit-bb-" + id).hide();
}
$(document).ready(function() {
$(".mobile-aside-toggle a").click(function(e){
e.preventDefault();
$("aside").toggleClass("show");
});
});
</script>
EOT;