Animated Mobile Menu with a Simple UI

1384555888_45_Menu I am utilizing an amazing tutorial from Tympanus – COD Drops – that does an amazing job with interjecting simple and powerful UI elements into what is normally a boring web page. They make the application feel like a seamless transition among elements and you aren’t just clicking, but you are exploring all that there is to offer.

The other day I saw a really nice concept of a menu on the UI8 site. CreativeDash implemented that gorgeous concept and I instantly had some ideas for more effects involving border transitions but also with the desktop in mind. So today I want to show you how to create something like that and provide some more inspirational examples.

Please note that we’ll be using transitions and animation on pseudo-elements which won’t work in some browsers (e.g. Safari and Mobile Safari).

Simple HTML

1
2
3
4
5
6
7
8
9
10
<nav id="bt-menu" class="bt-menu">
    <a href="#" class="bt-menu-trigger"><span>Menu</span></a>
    <ul>
        <li><a href="#" class="bt-icon icon-zoom">Zoom</a></li>
        <li><a href="#" class="bt-icon icon-refresh">Refresh</a></li>
        <li><a href="#" class="bt-icon icon-lock">Lock</a></li>
        <li><a href="#" class="bt-icon icon-speaker">Sound</a></li>
        <li><a href="#" class="bt-icon icon-star">Favorite</a></li>
    </ul>
</nav>

The main menu element will have position fixed so that, no matter where we are in the page, the border is always around the viewport. We set an initial border style which we will transition to a bigger border. Setting the initial height to 0 will make sure that the menu does not cover anything initially. The “backward” or closing height transition will have a delay of 0.3s:

CSS – Fixed position on Main Menu

1
2
3
4
5
6
7
8
9
10
11
12
.bt-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    border-width: 0px;
    border-style: solid;
    border-color: #333;
    background-color: rgba(0,0,0,0);
    transition: border-width 0.3s, background-color 0.3s, height 0s 0.3s;
}

When we open the menu, we’ll set the height to 100% (but we won’t transition that property) and the border will animate to 90px on the left side and 30px on all the other sides. The background color will be semi-transparent using an RGBA value. This will server as out overlay color:

After Animation Styling

1
2
3
4
5
6
7
8
9
10
.bt-menu.bt-menu-open {
    height: 100%;
    border-width: 30px 30px 30px 90px;
    background-color: rgba(0,0,0,0.3);
    transition: border-width 0.3s, background-color 0.3s;
}
.bt-overlay {
    position: absolute;
    width: 100%;
}

The last element here is the trigger element. You can make this anything you want, but the common symbols are the triple horizontal bars or the plus sign.

Trigger

1
2
3
4
5
6
7
8
9
.bt-menu-trigger {
    position: fixed;
    top: 15px;
    left: 20px;
    display: block;
    width: 50px;
    height: 50px;
    cursor: pointer;
}

You should definitely check out the rest of the tutorial so you can complete this on your own page. They (Mary Lou & Tympanus) have a nice demo and download source available and it doesn’t seem proper to take that away from their traffic.

Mary Lou (Manoela Ilic) is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.