Cara membuat menu navigasi dengan efek baloon

Cara membuat menu navigasi dengan efek baloon - Kembali mengusung tema Navigasi. Kali ini saya akan share Cara membuat menu navigasi dengan efek baloon. Maksudnya ialah membuat sebuah menu horizontal dengan efek balon atau seperti kotak dialog. Dengan efek sedemikian rupa dapat dipastikan blog anda akan terlihat lebih cantik. Saat saya coba ternyata responsive. Tergantung template anda, semoga saja bisa responsive.

Beberapa artikel yang terkait dengan Cara membuat menu navigasi dengan efek baloon:

Cara membuat menu dropdown dengan efek delay
Cara membuat menu navigasi fixed dengan efek 3D 

Inilah Cara membuat menu navigasi dengan efek baloon:

1. Login dulu ke akun blogger sobat.

2. Buka Tab Rancangan >> Template >> Edit HTML.

3. Masukkan kode berikut tepat sebelum kode ]]></b:skin> 

/===CSS===\

nav {

  margin : 50px auto;

  width  : 100%;

}

menu {

  border-radius : 3px;

}

menu:after , menu:before {

  display : block;

  content : ' ';

}

menu:after {

  clear : both;

}

li {

  list-style-type : none;

  background      : linear-gradient(rgba(220,220,255,0.4) 85%, rgba(255,255,255,0.5) 100%);

  float   : left;

  cursor  : pointer;

  padding : 3px 10px;

  border-top    : 2px solid rgba(200,200,255,0.5);

  border-bottom : 2px solid rgba(50,50,50,0.4);

}

li:first-child {

  border-radius : 5px 0 0 5px;

}

li:last-child {

  border-radius : 0 5px 5px 0;

}

a {

  display : block;

  padding : 10px 13px;

  font-size : 26px;

  text-decoration : none;

  border-radius   : 5px;

  position        : relative;

  top   : 0;

  color : #FFF;                                        transition : all .4s;

}

li:hover a {

  top   : -20px;

  color : #4eacff;

  background-color: #fff;

  box-shadow : 0 0 5px 0 rgba(255, 255, 255, 0.7);

  transition : all .4s;

}

li a:after {

  display  : block;

  content  : '';

  position : absolute;

  top  : 100%;

  left : 42%;

  border-style : solid;

  border-color : transparent;

  border-width : 5px 5px 0 5px;

  transition   : all .4s;

}

li:hover a:after {

  border-color : white transparent transparent transparent;

  transition   : all .4s;

}

/*************************************/

.menu2 {

  width : 100%;

}

.menu2 a {

  font-family : georgia;

  font-size   : 14px;

  font-style  : italic;

  text-transform : capitalize;

}

.menu2 li {

  border-right  : 1px solid rgba(200,200,255,0.5);

  border-left   : 1px solid rgba(40,40,40,0.2);

}

.selected {

  top   : -20px;

  color : #4eacff;

  background-color: #fff;

  box-shadow : 0 0 5px 0 rgba(255, 255, 255, 0.7);

  transition : all .4s;

}

.selected:after {

  border-color : white transparent transparent transparent;

  transition   : all .4s;

}

4. Selanjudnya Taruh kode pemanggil HTML Berikut Terserah anda Atau dibawah kode </header>
Atau juga bisa anda letakkan di atas </body>

<nav>

  <menu>

    <li><a href="#">☀</a></li>

    <li><a href="#">✈</a></li>

    <li><a href="#">❄</a></li>

    <li><a href="#">☎</a></li>

  </menu>

</nav>

<nav class="menu2">

  <menu>

    <li><a href="#">HOME</a></li>

    <li><a href="#">BLOG</a></li>

    <li><a href="#">ACTION</a></li>

    <li><a href="#">NEWBIE</a></li>

    <li><a href="#">SLOW</a></li>

  </menu>

</nav>

5. Langkah terakhir, Simpan template anda.

Sekian Cara membuat menu navigasi dengan efek baloon Semoga dapat membantu semuanya.