Join the beta

Nothing excites a designer more that to see there design evolve and be consistence across devices. Here is how inquy looks on iPad.

Do follow inquy on twitter.

This is one liner which will make your web site work well on ipad.

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width">

You can thank me later.

Say Hi, to our in-house awesome designer.
Abinaya a.k.a Abi is responsible for making inquy look awesome.

Today we will build a good looking menu which can we part of your eCommerce site or home page of your webapp. For the people who just want the code you can download the code here and demo here.

First Html Structure.

<div id="main-nav">
            <ul id="top-list">
                <li class="nav-list">
                    South Indian
                    <ul>
                        <li>Masala Dosa</li>
                        <li>Ragi rotti</li>
                        <li>Akki rotti</li>
                        <li>idli</li>
                        <li>vadai</li>
                        <li>thayir sadam </li>

                    </ul>
                </li>
                <li class="nav-list">
                    North Indian
                    <ul>
                        <li>Tandoori Chicken</li>
                        <li>Mughai paratha</li>
                        <li>Biryani Badshahi</li>
                        <li>Meat Durbari</li>
                        <li>Murg Kali Mirch</li>
                        <li>Navratan korma</li>
                        <li>Dhungar</li>
                        <li>Zamin Doz Macchli</li>
                        <li>Lukhnawi Biryani </li>

                    </ul>
                </li>
                <li class="nav-list">
                    Mexican
                    <ul>
                        <li>Arroz Espanol </li>
                        <li>Bolillos</li>
                        <li>Cuitlacoche</li>
                        <li>Frijoles pintos</li>
                        <li>Lentil soup</li>
                        <li>Tortillas</li>
                        <li>Salsa</li>
                        <li>Totopo</li>
                    </ul>
                </li>
                <li class="nav-list">
                    Fast Food
                    <ul>
                        <li>Hamburger</li>
                        <li>French fries</li>
                        <li>Fried Chicken </li>
                        <li>Fish and chips</li>
                    </ul>
                </li>
               </ul>
        </div>

Now we'll setup the jquery part.

var mouseIsIn = false;
$.fn.accordion = function() {
    return this.each(function() { //seems to be just to make this function apply to any object selected for accordion treatment in the document ready function
        $container = $(this);
        // Hijack handles.
        $container.children('li').each(function() {
            var $selected = $(this);
            $selected.hover(function() {
                var totalNavWidth = $('#main-nav').width();
                var openWidth = totalNavWidth*(40/100); // 40% of the total width in pixels, i.e. what we want open menu items to expand to
                var closedWidth = totalNavWidth*(13.75/100); // 13.75% of the total width in pixels, i.e. what we want closed menu items to contract to
                $('<div>').animate({ height : 1 }, { // I have no idea why we are animating every div on the page here????????, also I added stop
                    duration  : 400,
                    easing      : 'swing',
                    step      : function(now) {
                        if (mouseIsIn == true) {
                            var stepSelectedWidth = $selected.width() + ((openWidth - $selected.width()) * now);
                            $selected.width(stepSelectedWidth);
                            $selected.siblings().each(function(i, elem) {
                                var stepUnselectedWidth = $(elem).width() +((closedWidth - $(elem).width()) * now);
                                $(elem).width(stepUnselectedWidth);
                            });
                        }
                    }
                });
                $selected.stop().animate(
                    {opacity: '1'},
                    {duration: 400, easing: 'swing'});
                $selected.siblings().stop().animate(
                    {opacity: '0.4'}, //width: '13.7%',
                    {duration: 400, easing: 'swing'});
                $selected.children(':not(:first-child)').stop().animate(
                    {opacity: '1', width: '98%'},
                    {duration: 400, easing: 'swing'});
            }, function() {
                $selected.children(':not(:first-child)').stop().animate(
                    {width: '95%', opacity: '0.3'},
                    {duration: 250, easing: 'swing'});
            });
        });
    });
};

$(document).ready(function() {
    // Get tallest nav element
    var myHeight = 0;
    $('.nav-list').each(function(i) {
        if ($(this).height() > myHeight) {
            myHeight = $(this).height();
        }
    });

    // Set all nav elements to height of tallest
    $('.nav-list').each(function(i) {
        $(this).height(myHeight);
    });

    // Nav expansion
    $("#top-list").accordion();

    //Vertical expansion and contractions
    $('#main-nav').hover(function() {
        mouseIsIn = true;
        $(this).stop().animate({
            'height': (1 / ($(this).parent(this).css('font-size')).slice(0, -2) * (myHeight)) + 'em'
        }, 400, 'swing');
    }, function() {
        mouseIsIn = false;
        $(this).stop().animate({
            'height': '8.1em'
        }, 250, 'swing');
        $('.nav-list').stop().animate({
            width: '19%',
            opacity: '1'
        }, {
            duration: 250,
            easing: 'swing'
        });
    });

});

Finally some basic css

* {
    margin: 0;
    padding: 0;
}
#main-nav {
    overflow: hidden;
    width: 800px;
    height: 10em;
    margin-left: 20em;

    position: relative; /* IE 7 overflow hidden bug */
}
.nav-list {
    white-space: nowrap;
    overflow: hidden;
    padding-left: 10px;
    font-size: 2em;
}
.nav-list ul {
    font-size: 0.5em;
}
ul {
    list-style: none;
}
#top-list > li {
    float: left;
    width: 19%;
}
#top-list > li:nth-child(2n-1) {
    background-color: #CCCCCC;
}
.right-col {
    position: relative;
    margin-right: -19%;
    overflow: hidden;
}

Hope this was useful.

We at aahho just love inquy. We had built inquy to be a minimal yet essential product. Second tab you open each day first being your home tab . So while the current design of inquy home page does serve some minimal purpose but team was not too happy. So our brief was re-work on this and make it simple for users to login. Since inquy is by invite only we didn't need a sign up button. So after few weeks of drawing board and discussions the team came up with some amazing simple page. Here are some screenshots old vs new.

Create a Amazing Home Page

• Balance between attractive and useful
• Call to action : Easy beta signup
• Light weight - Fast
• Quick Tour - Some people need more than videos
• Easy for existing users

New home page is coming soon, you must  follow us on twitter for latest updates on inquy.