Join the beta

Do follow inquy on twitter.

<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.

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.

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.