Mobile Slide-Out Menu

Topics: Controls
Mar 17 at 5:18 AM
Edited Mar 17 at 5:21 AM
Hello!

I just started using BlogEngine, and I'm really impressed! I also really like the latest theme. However, I was kinda bummed that you couldn't use the widget zone in mobile view.

So I added a few lines of CSS and JS to create a menu button that appears in the button row on mobile and makes the widget zone slide out from the right. It's pretty basic, but I figured I'd share it in case anyone else might benefit from it. The JS needs to be added before custom.js and boostrap.min.js so the menu will get the proper styling.

Here's what I added!

The CSS...
.blog-author {
    display: block !important;
}

.widget-menu {
    display: none !important;
    cursor: pointer;
}

.page {
    background-color: whitesmoke;
}

@media screen and (max-width: 50rem) {
    .blog-author {
        text-align: center;
    }

    .blog-wrapper > .blog-sidebar .widgetzone {
        display: initial;
        width: 0;
        position: absolute;
        right: 0;
        background-color: rgb(25,25,25);
        transition-duration: .5s;
        overflow: hidden;
    }
    .blog-wrapper > .blog-sidebar .widgetzone.zone-open {
        transition-duration: .5s;
        width: 80%;
        padding: 10px;
    }

    .widget-menu {
        display: table-cell !important;
    }
}
And JS...
function toggleWidgetZone() {
    $(".widgetzone").toggleClass("zone-open");
}

$(document).ready(function(){
    $("nav.blog-nav ul").append('<li class="widget-menu"><a title="Menu" data-original-title="Menu" onclick="toggleWidgetZone()"><i class="fa fa-navicon"></i></a></li>');
})