Admin Dashboard responsive menu layout - Kodhus

Admin Dashboard responsive menu layout

Today we are going to take a look at how to create a responsive side navigation menu layout using media queries, positioning and pseudo elements.

Many believe that this can be done using flexbox but the truth is that first of all flexbox is not fully supported in all the browsers and have different behaviors and also with flexbox you can’t set the header to be a fixed height and expect the layout to rearrange accordingly.

Video Tutorial

HTML markup

Markup is pretty simple. a .header that contains a .nav-trigger for triggering the menu in the mobile, a .side-nav that contains our main side navigation and then the .main-content holding our main content. We have used font-awesome for the icons in the menu. Let’s take a look at the markup.


<div class="header">
    <div class="logo">
        <i class="fa fa-tachometer"></i>
        <span>Brand</span>
    </div>
    <a href="#" class="nav-trigger"><span></span></a>
</div>
<div class="side-nav">
    <div class="logo">
        <i class="fa fa-tachometer"></i>
        <span>Brand</span>
    </div>
    <nav>
        <ul>
            <li>
                <a href="#">
                    <span><i class="fa fa-user"></i></span>
                    <span>Users</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span><i class="fa fa-envelope"></i></span>
                    <span>Messages</span>
                </a>
            </li>
            <li class="active">
                <a href="#">
                    <span><i class="fa fa-bar-chart"></i></span>
                    <span>Analytics</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span><i class="fa fa-credit-card-alt"></i></span>
                    <span>Payments</span>
                </a>
            </li>
        </ul>
    </nav>
</div>
<div class="main-content">
</div>

Very simple! Each li contains an a which contains 2 spans for the icon and the label.




Styling it

Both .header and .sub-nav are absolute positioned. we use z-index to make header show on top of navigation and we give a padding-top to sub-nav to push the navigation below the header. We make sure that the .side-nav‘s display is set to none because we don’t want to see it in the mobile. using media queries we set it back to block.


.header {
    position: absolute;
    width: 100%;
    z-index: 3;
    height: 44px;
    background-color: #fff;
    border-bottom: 3px solid #2d3d51;
}
.side-nav {
    position: absolute;
    width: 100%;
    height: 100vh;
    background-color: #35475e;
    z-index: 1;
    display: none;
}

The actual navigation items are styled as follow. Nothing special.


.side-nav ul {
    margin: 0;
    padding: 0;
}
.side-nav ul li {
    padding: 16px 16px;
    border-bottom: 1px solid #3c506a;
    position: relative;
}
.side-nav ul li.active:before {
    content: '';
    position: absolute;
    width: 4px;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #fff;
}
.side-nav ul li a {
    color: #fff;
    display: block;
    text-decoration: none;
}
.side-nav ul li i {
    color: #0497df;
    min-width: 20px;
    text-align: center;
}
.side-nav ul li span:nth-child(2) {
    margin-left: 10px;
    font-size: 14px;
    font-weight: 600;
}
/* main content styles */
.main-content {
    padding: 40px;
    margin-top: 0;
    padding: 0;
    padding-top: 44px;
    height: 100%;
    overflow: scroll;
}

Now we use the power of media queries to adjust the look of the side navigation first in tablet view and then for the desktop.


/* set element styles to fit tablet and higher(desktop) */
@media screen and (min-width: 600px) {
    .header {
        background-color: #35475e;
        z-index: 1;
    }
    .header .logo {
        display: none;
    }
    .nav-trigger {
        display: none;
    }
    .nav-trigger span, .nav-trigger span:before, span:after {
        background-color: #fff;
    }
    .side-nav {
        display: block;
        width: 70px;
        z-index: 2;
    }
    .side-nav ul li span:nth-child(2) {
        display: none;
    }
    .side-nav .logo i {
        padding-left: 12px;
    }
    .side-nav .logo span {
        display: none;
    }
    .side-nav ul li i {
        font-size: 26px;
    }
    .side-nav ul li a {
        text-align: center;
    }
    .main-content {
        margin-left: 70px;
    }
}
/* set element styles for desktop */
@media screen and (min-width: 800px) {
    .side-nav {
        width: 200px;
    }
    .side-nav ul li span:nth-child(2) {
        display: inline-block;
    }
    .side-nav ul li i {
        font-size: 16px;
    }
    .side-nav ul li a {
        text-align: left;
    }
    .side-nav .logo i {
        padding-left: 0;
    }
    .side-nav .logo span {
        display: inline-block;
    }
    .main-content {
        margin-left: 200px;
    }
}

As you can see we use :nth-child(2) to hide the labels when seen in tablet and then show them back again when seen in the desktop.

Javascript

We use jquery to toggle the following class when the .nav-trigger is clicked.


.side-nav.visible {
    display: block;
}

$(document).ready(function() {
    $('.nav-trigger').click(function() {
        $('.side-nav').toggleClass('visible');
    });
});

Checkout the demo and download the code to try it yourself.

Share if you liked it: Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Leave a Reply

Your email address will not be published. Required fields are marked *

Share
Tweet
+1
Share