Navibar giống m.facebook.com

Chèn đoạn css sau và tải file về bỏ vào images

nav > a {

background-color: #3B5998;

width: calc(100%/6);

height: 44px;

display: inline-block;

margin-right: -4px;

}

nav > a.active {

background-color: #243C6D;

width: calc(100%/6);

height: 44px;

display: inline-block;

margin-right: -4px;

}

nav > a#wall {

background-image: url(images/wall.png);

    background-repeat: no-repeat;

    background-size: auto;

    background-position: center;

}

nav > a#wall.active {

background-image: url(images/wall-w.png);

}

nav > a#friends {

background-image: url(images/friends.png);

    background-repeat: no-repeat;

    background-size: auto;

    background-position: center;

}

nav > a#friends.active {

background-image: url(images/friends-w.png);

}

nav > a#messenger {

background-image: url(images/messenger.png);

    background-repeat: no-repeat;

    background-size: auto;

    background-position: center;

}

nav > a#messenger.active {

background-image: url(images/messenger-w.png);

}

nav > a#nofitication {

background-image: url(images/globe-1.png);

    background-repeat: no-repeat;

    background-size: auto;

    background-position: center;

}

nav > a#nofitication.active {

background-image: url(images/globe-w.png);

}

nav > a#search {

background-image: url(images/search.png);

    background-repeat: no-repeat;

    background-size: auto;

    background-position: center;

}

nav > a#search.active {

background-image: url(images/search-w.png);

}

nav > a#bars {

background-image: url(images/bars.png);

    background-repeat: no-repeat;

    background-size: auto;

    background-position: center;

}

nav > a#bars.active {

background-image: url(images/bars-w.png);

}

HTML demo

<nav>

<a href="/" id="wall" class="active"></a>

<a href="/" id="friends"></a>

<a href="/" id="messenger"></a>

<a href="/" id="nofitication"></a>

<a href="/" id="search"></a>

<a href="/" id="bars"></a>

</nav>