Cara membuat menu vertikal float (fixed)

Cara membuat menu vertikal float (fixed) - Hampir sama dengan beberapa postingan saya sebelumnya, kali ini saya akan berbagi satu lagi untuk mempercantik blog anda dengan  menu vertikal float (fixed). Yaitu sebuah menu fixed atau melayang yang terletak di samping blog dengan efek slide CSS3 yang menarik. langsung saja inilah Cara membuat menu vertikal float (fixed).

1. Masuk akun blogger sobt.
2. Masuk Tab Rancangan >> Tata - letak > Add gadget.
3. Pastekan semua syntax berikut didalamnya.

<style type="text/css">

#mfixed {position:fixed;left:0;top:0;width:200px;height:100%;z-index:999;}

* {

  margin: 0px;

  padding: 0px;

}

nav {

  font-family: Helvetica, Arial, sans-serif;

  line-height: 1.5;

  margin: 50px auto; /*for display only*/

  width: 200px;

  -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);

     -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);

          box-shadow: 2px 2px 5px rgba(0,0,0,0.2);

}

.menu-item {

  background: #fff;

  width: 300px;

}

/*Menu Header Styles 1*/

.menu-item h4 {

  color: #fff;

  font-size: 15px;

  font-weight: 500;

  padding: 7px 12px;

  background: #9DB6D7;

}

.menu-item h4 a {

  color: white;

  display: block;

  text-decoration: none;

  width: 300px;

}

/*Menu Header Styles 2*/

.menu-item h4 {

  border-bottom: 1px solid rgba(0,0,0,0.3);

  border-top: 1px solid rgba(255,255,255,0.2);

  color: #fff;

  font-size: 15px;

  font-weight: 500;

  padding: 7px 12px;

  background: #a90329; /* Old browsers */

  background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */

  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */

  background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */

  background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera 11.10+ */

  background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */

  background: linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */

  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */

}

.menu-item h4:hover {

  background: #cc002c; /* Old browsers */

  background: -moz-linear-gradient(top,  #cc002c 0%, #6d0019 100%); /* FF3.6+ */

  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cc002c), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */

  background: -webkit-linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* Chrome10+,Safari5.1+ */

  background: -o-linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* Opera 11.10+ */

  background: -ms-linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* IE10+ */

  background: linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* W3C */

  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc002c', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */

}

.alpha p {

  font-size: 13px;

  padding: 8px 12px;

  color: #aaa;

}

/*ul Styles*/

.menu-item ul {

  background: #fff;

  font-size: 13px;

  line-height: 30px;

  list-style-type: none;

  overflow: hidden;

  padding: 0px;

}

.menu-item ul a {

  margin-left: 20px;

  text-decoration: none;

  color: #0A0A0A;

  display: block;

  width: 250px;

}

/*li Styles*/

.menu-item li {

  border-bottom: 1px solid #eee;

}

.menu-item li:hover {

  background: #eee;

}

/*ul Styles*/

.menu-item ul {

  background: #B2D8E0;

  font-size: 13px;

  line-height: 30px;

  height: 0px; /*Collapses the menu*/

  list-style-type: none;

  overflow: hidden;

  padding: 0px;

}

/*ul Styles*/

.menu-item ul {

  background: #fff;

  font-size: 13px;

  line-height: 30px;

  height: 0px;

  list-style-type: none;

  overflow: hidden;

  padding: 0px;

  /*Animation*/

  -webkit-transition: height 1s ease;

     -moz-transition: height 1s ease;

       -o-transition: height 1s ease;

      -ms-transition: height 1s ease;

          transition: height 1s ease;

}

.menu-item:hover ul {

  height: 115px;

}

</style>

<nav>

<div id='mfixed'>

    <div class="menu-item">

      <h4><a href="http://najhera.blogspot.com/" target="_blank">Membuat Blog</a></h4>

      <ul>

        <li><a href="http://najhera.blogspot.com/" target="_blank">Membuat Email </a></li>

        <li><a href="http://najhera.blogspot.com/" target="_blank">Membuat tabel </a></li>

        <li><a href="http://najhera.blogspot.com/" target="_blank">Promosi Blog</a></li>

       <li><a href="http://najhera.blogspot.com/" target="_blank">Setelan Blogger</a></li>

       <li><a href="http://najhera.blogspot.com/" target="_blank"> Membuat Gmail</a></li>

    </ul>

    </div>

    <div class="menu-item">

      <h4><a href="http://najhera.blogspot.com/">Widget</a></h4>

      <ul>

    <li><a href="http://najhera.blogspot.com/ " target="_blank">Cara Pasang widget</a></li>

    <li><a href="http://najhera.blogspot.com/" target="_blank">Cara Buat Laman Statis</a></li>

    <li><a href="http://najhera.blogspot.com/" target="_blank">Ganti Template Blog</a></li>

    <li><a href="http://najhera.blogspot.com/ " target="_blank">Cara Ubah Background Blog</a></li>

    </ul>

    </div>

    <div class="menu-item">

      <h4><a href="http://najhera.blogspot.com/" target="_blank">Widget</a></h4>

      <ul>

    <li><a href="http://najhera.blogspot.com/" target="_blank">Cara Pasang Gadget</a></li>

    <li><a href="http://najhera.blogspot.com/" target="_blank">Menu Vertikal</a></li>

    <li><a href="http://najhera.blogspot.com/" target="_blank">Cara Ganti Favicon</a></li>

    <li><a href="http://najhera.blogspot.com/" target="_blank">Ganti Template Blog</a></li>

    <li><a href="http://najhera.blogspot.com/" target="_blank">Ubah Background Blog</a></li>

      </ul>

    </div>

</div>

    </nav>

Catatan: Ganti Tulisan warna merah sesuai dengan keinginan anda.

4. Simpan dan lihat hasilnya.

Sekian Cara membuat menu vertikal float (fixed) semoga bermanfaat.