Cara Membuat Desain Menu Icon dengan HTML & CSS

13/06/2019    Risman Hakim    1738     Website

Cara Membuat Desain Menu Icon dengan HTML & CSS - Berbagai macam desain menu dapat kita jumpai di setiap halaman website, ada yang menampilkan desain berupa teks pada menunya da juga yang dikombinasikan dengan sebuah icon pada setiap menunya. Itu semua dibuat agar desain website terlihat lebih menarik dan mempunyai ciri khas pada website. Nah, Kali ini saya akan bagikan tutorial sederhana tentang bagiamana Cara Membuat Desain Menu Icon dengan HTML & CSS.

Untuk membuat menu icon kali ini tentu ada beberapa langkah yang harus diperhatikan, mulai dari membuat kerangka menu dengan HTML sampai membuat desain menu dengan CSS. Baik langsung saja kita mulai praktekan cara mmebuatnya.

Kode HTML

Langkah pertama tentu kita buat kerangka menu terlebih dahulu dengan kode HTML. Silahkan kalian buat satu file index.html kemudian ketikan kode berikut untuk kerangka menunya.

<body>
    <nav>      
      <div class="menu">
        <ul class="clear">
          <li>
            <a href="#" title="Home">
              <i class="fa fa-home" aria-hidden="true"></i>
            </a>
          </li>
          <li>
            <a href="#" title="Features">
              <i class="far fa-lightbulb" aria-hidden="true"></i>
            </a>
          </li>
          <li>
            <a href="#" title="Portfolio">
              <i class="fas fa-pencil-alt" aria-hidden="true"></i>
            </a>
          </li>
          <li>
            <a href="#" title="Blog">
              <i class="far fa-comment" aria-hidden="true"></i>
            </a>
          </li>
          <li>
            <a href="#" title="Contact">
              <i class="far fa-envelope" aria-hidden="true"></i>
            </a>
          </li>
        </ul>
      </div>
    </nav>
</body>

Kode CSS

Setelah membuat kerangka menu seperti diatas, langkah selanjutnya untuk membuat menu icon terlihat lebih menarik kita akan desain menunya dengan kode CSS berikut.

body {
  background: #ccae62;
}

a {
  text-decoration: none;
}

.clear:after {
  content: " ";
  display: block;
  clear: both;
}

.menu {
  margin-top: 50px;
  text-align: center;
}

.menu ul {
  list-style-type: none;
  display: inline-block;
}

.menu ul li {
  float: left;
  width: 124px;
  height: 140px;
  border-color: #e3e3e3;
  background-color: #fff;
  transition: background-color 0.2s linear 0s;
}
.menu ul li:first-child {border-radius: 25px 0 0 25px;}
.menu ul li:last-child {border-radius: 0 25px 25px 0;}

.menu ul li a {
  display: table;
  width: 100%;
  height: 100%;
  position: relative;
  text-align: center;
}

.menu a i {
  display: table-cell;
  vertical-align: middle;
  color: #ffa801;
  font-size: 23px;
  transition: all 0.2s linear 0s;
}

.menu a i:before {
  border: 2px solid;
  border-color: #006266;
  border-radius: 500px;
  width: 41px;
  display: inline-block;
  height: 41px;
  line-height: 37px;
  transition: color 0.2s linear 0s, 
  font-size 0.2s linear 0s, 
  border-color 0.2s linear 0.2s, 
  height 0.2s linear 0s, 
  width 0.2s linear 0s, 
  line-height 0.2s linear 0s;
}

.menu a .link-text {
  position: absolute;
  bottom: 13px;
  right: 10px;
  color: #ffa801;
  font-size: 14px;
  text-transform: uppercase;
  transition: all 0.2s linear 0s;
}

.menu ul li:hover {
  background-color: #006266;
}

.menu ul li:hover .link-text {
  opacity: 0;
}

.menu ul li:hover i {
  color: #ffa801;
  font-size: 43px;
}

.menu ul li:hover i:before {
  border-color: transparent;
  border-radius: 500px;
  width: 66px;
  height: 66px;
  line-height: 60px;
  transition: color 0.2s linear 0s, 
  font-size 0.2s linear 0s, 
  border-color 0.2s linear 0s, 
  height 0.2s linear 0s, 
  width 0.2s linear 0s, 
  line-height 0.2s linear 0s;
}

Library icon

Setelah semua sintak HTML dan CSS telah diketikan, jangan lupa untuk menyisipkan library icon agar icon pada menu bisa tampil. 

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">

Kemudian simpan kembali file nya, silahkan kalian bisa membuka hasil akhirnya pada browser masing - masing. Maka hasilnya akan terlihat seperti gambar berikut.

Cara Membuat Desain Menu Icon dengan HTML & CSS

Bagaiaman, cukup menarik bukan menu yang ditampilkan ? Baik, cukup sekian tutorial tentang bagaimana Cara Membuat Desain Menu Icon dengan HTML & CSS, semoga bisa menjadi referensi dalam membuat menu pada website. Selamat mencoba dan sampai jumpa di artikel selanjutnya :)

Web Design, HTML CSS

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More