Membuat Menu Posisi Tetap dan Responsive

Tulisan kali ini akan membahas tentang positioning di css, kita akan membuat studi kasus menu yang posisinya tetap biasa disebut menu melayang, atau flying menu atau fixed position menu.

Menu tidak akan bergerak walaupun kita malakukan scroll sampai bawah.

Gaya seperti ini memang sedang marak diterapkan oleh banyak web designer saat ini, website sosial media pun banyak yang menerapkan menu yang posisinya tetap seperti itu,  sebagai contoh Twitter, Facebook, Pinterest pun menerapkannnya.

Oke kita mulai saja membuat.

Pertama siapkan file index.html


sisipkan 2 buah font dari google web font di bagian head dan /head pada file html tersebut.

<link href='http://fonts.googleapis.com/css?family=Concert+One' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>

Lalu buat struktur HTML sebagai berikut:

<div class="fly">
 <div class="content">
  <ul>
   <li><a class="active" href="#">Home</a></li>
   <li><a href="#">About us</a></li>
   <li><a href="#">Portfolio</a></li>
   <li><a href="#">Gallery</a></li>
   <li><a href="#">Article</a></li>
   <li><a href="#">Store</a></li>
   <li><a href="#">Contact</a></li>
  </ul>

  <div class="ribbon">
   Follow Twitter
   <h2><a href="http://www.twitter.com/tut_web">@tut_web</a></h2>
  </div>
 </div>
</div> <!-- /.fly -->

<div class="flying-robot"><img src="fly.png" alt=""></div>

<div class="main">
 <div class="content">
  <h1>DEMO | Flying Menu CSS</h1>
  <p><strong><a href="http://www.tutorial-webdesign.com">http:www.tutorial-webdesign.com</a></strong></p>

  <p>...</p>
  <p>...</p>

 </div>
</div> <!-- /.main -->

<div class="footer">
 <div class="content">
  <p>
   Copyright &copy; 2012 <a href="http://www.tutorial-webdesign.com">Tutorial-Webdesign.com</a> | Image Credit <a href="http://fantendo.wikia.com/wiki/File:Fly_Guy_Card.png">Fantendo</a>
  </p>
 </div>
</div> <!-- /.footer -->

dengan struktur HTML itu kita membuat 4 bagian penting

class .fly untuk membuat menu atas

class .flying-robot untuk membuat objek robot terbang

class .main untuk tempat tulisan atau konten website

class .footer untuk membuat bagian bawah web

Style CSS

Untuk mempercantik bagian-bagian tersebut kita buat CSS sebagai berikut.

Style untuk menu atas, class .fly

/* Menu atas */
.fly{
 background-color: #1484CE;
 background-image: -webkit-linear-gradient(center top , #1484CE 0%, #1274B5 100%);
 background-image: -moz-linear-gradient(center top , #1484CE 0%, #1274B5 100%);
 background-image: -o-linear-gradient(center top , #1484CE 0%, #1274B5 100%);
 background-image: -ms-linear-gradient(center top , #1484CE 0%, #1274B5 100%);
 background-image: linear-gradient(center top , #1484CE 0%, #1274B5 100%);
 border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 -webkit-box-shadow: 0 2px 0 #0E5A8C;
 box-shadow: 0 2px 0 #0E5A8C;
 font-size: 13px;
 height: 30px;
 left: 0;
 position: fixed;
 right: 0;
 top: 0;
 width: 100%;

}
 .fly .content ul{
  list-style-type: none;
  float: left;
 }
  .fly .content ul li{
   display: inline;
  }
   .fly .content ul li a{
    display: inline-block;
    text-decoration: none;
    padding: 7px 10px;
    border-right: 1px solid rgba(255, 255, 255, 0.125);
    color: #f8f8f8;
    font-weight: bold;
   }
   .fly .content ul li a:hover, .fly .content ul li a.active{
    background: -webkit-linear-gradient(top, #2b90d2, #1382cb);
    background: -moz-linear-gradient(top, #2b90d2, #1382cb);
    background: -o-linear-gradient(top, #2b90d2, #1382cb);
    background: -ms-linear-gradient(top, #2b90d2, #1382cb);
    background: linear-gradient(top, #2b90d2, #1382cb);
   }

 .fly .content .ribbon{
  text-align: center;
  float: right;
  width: 100px;
  background: #fff000;
  padding: 2px 10px;
  -webkit-box-shadow: 0 8px 6px -6px #999;
     -moz-box-shadow: 0 8px 6px -6px #999;
          box-shadow: 0 8px 6px -6px #999;
 }
 .fly .content .ribbon:hover{
  background: orange;
 }

/* Content untuk semua */
.content{
 max-width: 940px;
 margin: 0 auto;
}

style untuk robot terbang class .flying-robots

/* Robot Terbang */
.flying-robot{
 position:fixed; top:50px; left:10px;padding:10px;
 height: 150px;
 width: 150px;
}

style untuk halaman utama berisi teks class .main

/* Halaman Utama */
.main{
 margin-top:50px;
 margin-bottom: 50px
}
 .main .content p{
  margin-bottom: 30px;
 }

style untuk footer, class .footer

/* Bagian Footer */
.footer{
 padding: 10px 0;
 background: -webkit-linear-gradient(left, #ccc, #999);
 background: -moz-linear-gradient(left, #ccc, #999);
 background: -o-linear-gradient(left, #ccc, #999);
 background: -ms-linear-gradient(left, #ccc, #999);
 background: linear-gradient(left, #ccc, #999);
 bottom: 0;
 position: fixed;
 width: 100%;
 font-size: 12px;
}
 .footer a{
  text-decoration: none;
  font-weight: bold;
  color: #000;
 }

Pada intinya untuk membuat elemen yang posisinya tidak berubah itu yaitu dengan menyertakan position:fixed di css

sedangkan untuk membuat posisinya suatu elemen merapat ke bawah atau keatas ditentukan dengan bottom:0 atau top:0

Responsive
Untuk membuat halaman tersebut menjadi responsive, atau bisa menyesuaikan ukuran layar device nya, maka tambahkan kode berikut

@media (max-width: 767px) {
 .flying-robot{
  position:relative;
  text-align: center;
  top:60px;
 }
 .fly{
  text-align: center;
 }
 .fly .content ul li a{
  border:none;
 }
 .content{
  width: 99%;
 }
 .main .content h1,
 .main .content p{
  margin: 10px;
 }
 .footer{
  text-align: center;
 }
}
@media (max-width: 520px){
 .fly{
  height: 60px;
 }
 .fly .content .ribbon{
  display: block;
  width: 100%;
 }
 .main{
  margin-top:80px;
  margin-bottom: 80px
 }
}

semoga bermanfaat buat kalian. coba dan lihat hasilnya.