From the autor of this website: Don't miss this!Visit www.kodhus.com for the best tutorials on howtos on web design and development.

Responsive menu using media queries for admin and dashboard interfaces

Kodhus >
By Ramsich
Kodhus technical writer
by ramsich
Responsive menu using media queries for admin and dashboard interfaces

Introduction

There are frameworks out there that has components that are responsive, but they are quite limited to the general use-case that they support. It’s good to know how you can build your own responsive menus and then you can use the same technique to create any responsive element and website at your will.

Demo: http://responsivemenu.nailfashionsweden.se/ resize the page to see the effect.

For those who like to watch video tutorials

Initial html markup

In our tutorial we have a top navigation and a side navigation. We want to make our interface to show different menus in mobile, tablet and desktop.

<div class="header">
        <a href="#0" class="mobile-nav"><span></span></a>
        <nav class="top-navigation">
            <ul>
                <li>Ramsich</li>
            </ul>
        </nav>
    </div>

    <div class="mainWrapper">
        <nav class="side-navigation">
            <ul>
                <li>
                    <span><i class="ion-ios-pricetags"></i></span>
                    <span>Tags</span>
                </li>
                <li class="active">
                    <span><i class="ion-pie-graph"></i></span>
                    <span>Analytics</span>
                </li>
                <li>
                    <span><i class="ion-person-stalker"></i></span>
                    <span>Users</span>
                </li>
                <li>
                    <span><i class="ion-calendar"></i></span>
                    <span>Calendar</span>
                </li>
            </ul>
        </nav>
        <div class="main-ontent">
        </div>
    </div>

As you can see we have a header, a side navigation and a main content. Header contains a div with .mobile-nav class which is the trigger for the menu in the mobile view and also we have a .top-navigation which holds our top navigation.

I have used ionicons icon set for the icons in the side menu.

Instruction

In order to make the UI responsive we are going to use media queries in css. Lets look at the sample:

@media only screen and (min-width: 768px) {
  .mobile-nav {
    display: none;
  }
}

As you can see, we want the .mobile-nav class display to be none when we are viewing the page (only screen) and also the min-width of the page is 768px (Meaning tablet and desktop view). The next size will be the desktop view. In order to change our defined css selectors we need to define the media query as follow:

@media only screen and (min-width: 1170px) {
}

It’s very important that we start styling our elements for the mobile view and then when we are satisfied, we will change the css for tablet and desktop for media queries. Following is the initial styles for body, header and top navigation. You can see that the top navigation display is set to none. That’s because we don’t want it to be visible on the mobile. In the following we have set our header, main-wrapper and side-navigation. Side navigation will cover the full width of the screen and also we want it to be exactly the same height as the viewport (height: 100vh). We also have styled our side menu navigation using pseudo elements, :first-child and :last-child to style the icons and the text of menu items respectively.

body, * {
    padding: 0;
    margin: 0;
    font-family: 'Source Sans Pro', sans-serif;
    box-sizing: border-box;
}
.header {
    position: absolute;
    height: 45px;
    width: 100%;
    padding: 10px;
    z-index: 3;
 }
 .top-navigation {
     float: right;
     padding: 0 30px;
     display: none;
 }
 .top-navigation ul {
     list-style: none;
 }

 .mainWrapper {
     overflow: scroll;
     height: 100vh;
 }
 .mainWrapper .mainContent {
     padding: 50px 10px 10px;
 }
 .side-navigation {
    width: 100%;
    position: absolute;
    height: 100vh;
    padding-top: 50px;
    visibility: hidden;
    z-index: 2;
}

.side-navigation ul li span:first-child {
    color: #535f63;
}
.side-navigation ul li span:last-child {
    color: #999;
}
.side-navigation ul li.active span:first-child{
    color: #2fb399;
}
.side-navigation ul li.active span:last-child{
    color: #fff;
}

.side-navigation.visible {
    visibility: visible;
}

.side-navigation ul li {
    font-size: 16px;
    padding: 15px 20px;
    border-bottom: 1px solid #444;
}
.side-navigation ul li:last-child {
    border: none;
}
.side-navigation ul li span:first-child {
    margin-left: 10px;
    font-size: 20px;
}
.side-navigation ul li span:nth-child(2) {
    margin-left: 10px;
}

Now in the tablet view we want to be able to see the side menu. We also would like to hide the text of each menu item and just hold the icons.

@media only screen and (min-width: 768px) {            
    .side-navigation {
        visibility: visible;
        width: 90px;
        float: left;
    }
    .mainWrapper .mainContent {
        margin-left: 90px;
    }
    .side-navigation  ul li span:first-child {
        font-size: 24px;
        color: #999;
    }
    .side-navigation  ul li span:nth-child(2) {
        visibility: hidden;
    }
}

You can see that we defined the side-navigation to be float: left and also has a fixed width.

Finally we set the styles in the desktop version.

@media only screen and (min-width: 1170px) {
    .side-navigation {
        width: 150px;
    }
    .mainWrapper .mainContent {
        margin-left: 150px;
    }
    .side-navigation  ul li {
        border: none;
    }
    .side-navigation  ul li span:nth-child(2) {
        font-size: 14px;
        visibility: visible;
    }
}

Using this technique you can design your own responsive views and make sure you don’t create redundant css when dealing with media queries.

Leave a reply

Your email address will not be published.

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>