Sunday, April 13, 2014

Zomato's alternate country-city list implementation

I am an avid user of Zomato. Recently, they gave the website a visual uplift.

I was interested in the country city list section on the homepage which looked like this


Now, I wanted see and how they implemented the city list menu. On first guess it looked like CSS hover implementation.
Inspecting it using Firebug revealed the same.

One thing that caught my attention was the use of
position: relative
on the country name span with the class
hp-country-item
I dig further to see why they used this style.


Now you get it. They are positioning the menu using
position: absolute
and giving it a
left: -60 

IMHO, this can be done using margins only and there is no need to use
top right bottom left

I'll show you how to do this.
  1. Remove
    position: relative
    from
    hp-country-item
     
  2. Change the hover state display style of
    hp-city-list
    to
    display: inline-block
  3. Remove
    left: -60
    from
    hp-city-list
  4. The menu block will now be placed in the natural layout except that it is positioned
    absolute
    So, it won't consume the space it was supposed to consume in the layout. If you look closely, the menu block starts just at the place where country image ends. So now all you need to do is adjust its
    margin-left
    Menu block has a fixed width of 130px and country image block has a width of 26px;
    Moving the menu block by (26 + 130/2)px = 91px will bring the menu block to its correct position.
    Thus, we set
    margin-left: -91px
     
  5. The caret (arrow) seems to be broken now.
    To fix this, add a
    margin-bottom: 1px