Dasar HTML, CSS dan Javascript : Membuat Push Menu -- Bag 2 : CSS

Sekarang kita akan mengatur tampilan statis push menu kita dengan kode CSS. Sesuai bagian 1, kita akan menamai file CSS ini dengan nama style.css.
Tampilan yang kita harapkan dari kode HTML kita pada bagian satu dan kode CSS pada bagian ini adalah seperti berikut.

Kodenya :

/* Initial body */
body {
  left: 0;
  margin: 0;
  overflow: hidden;
  position: relative;
}

/* Initial menu */
.menu {
  background: #202024 url('file/black.png') repeat left top;
  left: -285px;  /* tampilkan daftar menu diluar layar */
  height: 100%;
  position: fixed;
  width: 285px;
}

/* Basic styling */

.tombol-menu {
  background-color: #009988;
  height: 100%;
  -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

.menu ul {
  border-top: 1px solid #636366;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu li {
  border-bottom: 1px solid #636366;
  font-family: 'Open Sans', sans-serif;
  line-height: 45px;
  padding-bottom: 3px;
  padding-left: 20px;
  padding-top: 3px;
}

.menu a {
  color: #fff;
  font-size: 15px;
  text-decoration: none;
  text-transform: uppercase;
}

.icon-close {
  cursor: pointer;
  padding-left: 10px;
  padding-top: 10px;
}

.icon-menu {
  color: #fff;
  cursor: pointer;
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  padding-bottom: 25px;
  padding-left: 25px;
  padding-top: 25px;
  text-decoration: none;
  text-transform: uppercase;
}

.icon-menu img {
width: 3%;
height: 3%;
padding: -5px 10px 0 0;
}

.icon-menu i {
  margin-right: 5px;
}


Penjelasan :

• Coba  lihat kode css di atas pada kelas menu. kelas menu kita atur posisi di luar layar dengan cara menambahkan kode left : -285. Jadi dengan kita buatnya kode CSS ini, maka yang tampak adalah link menu dan ikon menu. Untuk lebih jelas lihat pada gambar di atas.
• Untuk bagian kedua ini, penjelasan di atas merupakan poin terpenting dari kode CSS ini.

Lanjutannya klik link Bagian 3