Menambahkan Icon & Dropdown Pada Website

Sebelumnya kita sudah berhasil menambahkan background dan responsive web design kali ini kita akan menambahkan sebuah icon dan dropdown untuk website ini agar memiliki tampilan yang menarik

Mari kita mulai untuk langkah langkahnya :

Menambahkan Icon Pada Website disini saya menggunakan boxicon untuk icon pada website yang saya buat kalian bisa akses melalui link berikut ini https://boxicons.com/,selanjutnya kita akan menambahkan beberapa html kode berikut contohnya :

selain menggunakan logo seperti di atas kita juga dapat menggunakan format svg untuk mempermudah styling seperti contoh di bawah ini :

Menambahkan Menu Dropdown pada website jika langkah di atas sudah selesai mari kita lanjut ke tahap selanjutnya yaitu menu dropdown untuk login dan register

langkah pertama yaitu tambahkan kode html seperti kode di bawah ini :

<div class="penampung-full" style="background-color: black;">
        <div class="baris">
            <div class="kolom-8">
                <ul class="nav text-left">
                    <li>
                        <a href="#">Home</a>
                    </li>
                    <li>
                        <a href="#">Blog</a>
                    </li>
                    <li>
                        <a href="#">Project</a>
                    </li>
                </ul>
            </div>
            <div class="kolom-4">
                <ul class="nav-icon text-right">
                    <li>
                        <a href="#buka-modal">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill: rgb(255, 255, 255);transform: msFilter"><path d="M10 18a7.952 7.952 0 0 0 4.897-1.688l4.396 4.396 1.414-1.414-4.396-4.396A7.952 7.952 0 0 0 18 10c0-4.411-3.589-8-8-8s-8 3.589-8 8 3.589 8 8 8zm0-14c3.309 0 6 2.691 6 6s-2.691 6-6 6-6-2.691-6-6 2.691-6 6-6z"></path></svg>
                        </a>

                    </li>
                    <li>
                        <a href="">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill: rgb(255, 255, 255);transform: msFilter"><path d="M7.5 6.5C7.5 8.981 9.519 11 12 11s4.5-2.019 4.5-4.5S14.481 2 12 2 7.5 4.019 7.5 6.5zM20 21h1v-1c0-3.859-3.141-7-7-7h-4c-3.86 0-7 3.141-7 7v1h17z"></path></svg>
                        </a>
                        <ul>
                            <li>
                                <a href="#">Register</a>
                            </li>
                            <li>
                                <a href="#">Login</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="modal-window" id="buka-modal">
        <div>
            <a href="#tutup-modal" class="modal-close">Tutup &times;</a>
            <input type="text" placeholder="Cari...">
        </div>
    </div>

Setelah selesai menambahkan kode di atas tambahkan juga css untuk melengkapi design yang sudah kita buat seperti contoh di bawah ini :

.penampung-full{
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.text-left{
  text-align: left;
}
.text-right{
  text-align: right;
}
.nav-icon li a:hover{
  transform: scale(1.2);
}
text-center{
  text-align: center;
}
.modal-window{
  position: fixed;
  background-color: rgba(200, 200, 200,0.75);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
}
.modal-window:target{
  opacity: 1;
  pointer-events: auto;

}
.modal-close{
  color: black;
  line-height: 50px;
  font-size: 80%;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 70px;
  text-decoration: none;
}
.modal-close:hover{
  color: gray;
}
.modal-window > div{
  width: 400px;
  position: relative;
  margin: 10% auto;
  padding: 2rem;
background: white;
color: gray;
}
.modal-window input[type=text]{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
/* Dropdown */
.nav-icon li ul{
  background-color: black;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  right: 0;
  display: none;
  text-align: left;
  padding-left: 0;
}
.nav-icon li ul li a{
  width: 90%;
  color: white;

}
.nav-icon li:hover > ul,.nav-icon li ul li a:hover{
  visibility: visible;
  opacity: 1;
  display: block;
  color: red;
  transform: scale(1);
}
.nav-icon li ul li{
  clear: both;
  width: 100%;
}

Sekarang kita akan menambahkan kode html untuk search icon untuk contohnya seperti ini :

<div class="modal-window" id="buka-modal">
        <div>
            <a href="#tutup-modal" class="modal-close">Tutup &times;</a>
            <input type="text" placeholder="Cari...">
        </div>
    </div>

Mungkin itu saja dari saya untuk pembahasan dropdown dan icon kali ini semoga membantu terimakasih