Membuat Menu Dengan Posisi Tetap dan Responsive

Dalam pembuatan sebuah website atau web aplikasi kita selalu membuat sebuah menu untuk memudahkan user dalam menjalankan aplikasi yang kita buat. Menu yang kita buat haruslah mudah untuk diakses oleh user misalnya ketika kita buat menu di bagian atas dan user men-scroll ke bagian bawah layar, menu tersebut masih bisa terlihat oleh user. Dan pada kesempatan kali ini kita akan membuat menu seperti itu serta membuat menu responsive jika dijalankan di device lain seperti tablet atau handphone.


Untuk pembuatan menu tersebut, ikuti langkah berikut :

1. Buatlah sintak HTML nya sebagai berikut :

<div class="menu">
 <div class="content">f
  <ul>
   <li><a class="active" href="#">Home</a></li>
   <li><a href="#">Berita</a></li>
   <li><a href="#">Gallery</a></li>
   <li><a href="#">Hubungi Kami</a></li>
   <li><a href="#">Buku Tamu</a></li>
  </ul>
 </div>
</div>
<div class="main">
 <div class="content">
  <h1>Membuat Menu Yang Tetap Dan Responsive</h1>
  <p>...</p>
  <p>...</p>

 </div>
</div>
<div class="footer">
 <div class="content">
  <p>
  
  </p>
 </div>
</div>

Pada sintak HTML diatas kita lihat ada 3 buah class yaitu class .menu (bagian atas page dan merupakan tempat menu berada), class .main (tempat dari isi content dari page tersebut) dan class .footer (bagian bawah page, bisa diisinya misalnya copyright dll).

2. Buat sintak untuk style nya atau CSS

*{
    padding: 0;margin: 0;
}
a{
  text-decoration: none;
  color: #000;
}
  
.menu{
  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%;
}
.menu .content ul{
  list-style-type: none;
  float: left;
}
.menu .content ul li{
  display: inline;
}
.menu .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);
}

.content{
   max-width: 940px;
   margin: 0 auto;
}

.main{
   margin-top:50px;
   margin-bottom: 50px
}
.main .content p{
   margin-bottom: 30px;
}

.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;
}

3. Tambahka style untuk membuat responsive

@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: 100%;
    }
    .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
    }   
}

Demikian pembuatan menu dengan posisi yang tetap dan responsive terhadap ukuran layar. Untuk lebih jelasnya bisa dilihat di link Berikut.

Semoga bermanfaat...