By
—

How we built the ALL-IN menu

In order to build the menu for ALL-IN we opted for using the SVG format. It’s possible to create curved tabs in full css using rounded corners but an image provides more design possibilities in our case.

Therefore we chose SVG as this format compresses well and we can control the size of the image or its colours through css.

First we need to create the SVG file.

We got first an Illustrator files from where we extracted the piece of image that we intended to use to build the menu.

ALL-IN menu

We isolated the image and cropped the artboard to its limits.

ALL-IN menu

Then we save the file choosing the SVG options available form Illustrator.

ALL-IN menu

File usage :

There are different ways to use an SVG file.

  1. As an image (img) tag :

    <img src="image.svg" alt="title" id="imgsvg">

    then we can control some of it through CSS like :

    #imgsvg {
    width: 100px;
}

  2. As a a background-image :

    <span id="imgsvg">test</span>

    and control also from css :

    #imgsvg {
    width: 100px;
    height: 100px;
    background-color: #fff;
    background: url(image.svg);
    background-size: 100px 100px;
}

    Support differs from the browsers, for ALL-IN we support only Chrome at the moment. But you can use some png files to replace where SVG is not supported.

  3. We can use SVG files inline also : just copying the text produced by Illustrator on saving. This is the choice we opted for. Here is our optimized slim code :

svg#Layer_1.style0 version="1.1" viewbox=("0 0 158 56") x="0px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" y="0px" 
    css:
      .style0 { enable-background: new 0 0 158 56; width:160px; margin-top: -6px; }
      .style1 { overflow: visible; opacity:  0.1; } 
    g#XMLID_98_
      image#XMLID_19_.style1 height="56" width="158" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJ4AAAA4CAYAAAAMwEGIAAAACXBIWXMAAAsSAAALEgHS3X78AAAA GXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABEZJREFUeNrsnVtPE1EUhc/0BoUW BBEkgoaIRuOLaOTBRI3xh/sfNBHjJSYa411rtUUYaN3bWceeDqMUmOnMtGslK6ctmNjMl305Nzxz dHmhkUpe3dCYe3lH+D3rsriCkfANBzpfvIuxOwogDgJOAZBNwqfEi+IZcYnwJQ7dnrgp/ij+DvjU O/hZJ48AHgZNUVwVnxGfA3A6rouXxBNkI3EpYB/ELzG2AOB78Ve89/MGoDcAdCviG+Kb4guAcAkR r0wuEpcfingtAPhU/Fz8WvwlbwB6h0C3Kr4lvg/4FvH5BGu81Go8HwC+AXiPQwD+dADMFXhh6B5g XMHnBafRoIbf1VoQWwDttQPgM/ErRMdt8X5Wv1AxopGYAmSbDnQK4TR+n9ClEyCsC3gOmnXq4tPi s+JlvPYApQWvm3XwPEyTLDuRbhPQTeELU9kBMQrABWQlHym3nVX4iqHX2jBcBXS3xecR6Qhd9gGc xLOaAYw7WYav+I9od0d8CV+iyOebGwDLyE61rMNXjIh298QbmDZh55o/AEsR8P1AzbeXFfhKzn92 3gQTw+uoFwhdPmUbxFW87wA4nY55izF1+GyXOgXg7ppgopjRbjQiXxXPVpuNT+JviICZAK+AovQi GorLSLtsKEYDvhLqO4XuM2q+1FOuG/HWTLA6sYb3jHajBV8XtZ4C2DIpr2xY8KqYOrmOsUrwRqrb raDRyEzKJXjjAV8xaymX4DHldggeNTYpl+Ax5aaScgkeU24qKZfgMeWmknIJHlOuTbktM8SNBASP KVfVRtptD6veK/EZjC14uhavZ2g2TP+RyaFsJCB44yv3mINGOT1ApGc1mki/iZ7XYKpl5CulUe8R PCpc722b3sbRfYJHJQmenWKZxuib3o5lG/m6BI9KKurpc6+j9isDyH00G7GmXoJHRcE3Z4JrSubx eTvu1MuulorqdPViJt2FrtMts4h+yso71H8nviKDEY+KinzuOd06xjI+d1MvwaMSaTjsOV2beufw +a7pv5vPI3hUEnXfNKBbQAqumN7RWHuTgXEgjLJxmWKNRw1S91UAnk2/eknQFRPc0adLbLrDRe/s a6L+C8ue7f1lIyXBo45S99nGYxaZ8ZoJVjoUvheAbyf0b7tIzXp7qb3Dzyd41HGin96DXUPXq1Gs gTKtaQ7ubtHXusv5ifihwc2lBI86bvSzzUcNEXDZ9G6lD6fZBj5/ZGtDgkedBEDPiYQTJnplw873 1U1vNYTNBRUbhOY/MyEHri/m/ShUasUiRRE8iuBRFMGjCB5FETyK4FHUwHInkO2Bjo7J+B9go3Il y1PfgaGS80NdZ9NtzQ1GQypm8BomtGXeXlelOwp0u8qWCZY1aoYbQal4ZHenbIGxP7tX7PqZLt7q H1XRPVZ6sqhC8KgYwTuwH8/dXaDRbxIj0ywVd7rt24HsRrXDdhhQ1Ekj39/xtwADAGVNN1ASqbBi AAAAAElFTkSuQmCC" 
      g#XMLID_12_
        path#XMLID_18_ d=("M147.8 40c-29.2-9.9-18.4-36-52.1-36H18.3c-8.2 0-15 6.6-15 14.8v34.8h151.3V40H147.8z")

The slim code (that we use to produce the HTML) is in its own file and is included where needed, to keep a cleaner code base. (We use some customs AngularJS directives to build and control the menu but I am just presenting the html and css part of it here). Being online we gain more control through CSS thanks to SVG custom property like for example "fill" to control the background color. We can use also special stylesheet dedicated to the SVG object through <style> tag.

Here is a codepen reproducing the ALL-IN menu HTML/CSS structure.

See the Pen eJmMBY by Jerome Sadou (@JeromeSadou) on CodePen.

Note in the Sass tab also how we use the font-awesome icons that we control through css and custom classes.

エンジニア募集中！

ビジネスバンクグループではエンジニアを募集中しています。

弊社が採用しているテクノロジや開発環境に興味を持った方は、 ここから是非エントリー を！