Membuat Responsive Navbar dengan Full Screen Search Bar di Blog

Setelah mencoba mengotak atik kode, akhirnya saya menemukan kodingan navbar dengan search yang yaaa bisa dibilang lumayanlah ya... (bagi seorang pemula seperti saya) untuk ditaroh di blog. Meskipun belum sepenuhnya sesuai dengan harapan, karena saya pengennya Navbar dengan hamburger dan search, serta tulisan Taruih Baraja di tengah.

Tapi setelah mengotak-atik kode (berbekal panduan w3schools dan catatan kodingan navbar lama yang pernah saya buat pada zaman purbakala), ilmu saya baru nyampe di navbar dengan search, belum ada hamburger, karena entah kenapa kok tulisannya lari kemana-mana, hamburger di atas, tulisan Taruih Baraja di tengah, dan ikon search posisinya malah di bawah, engga di jalan yang lurus sejajar bersama dalam satu navbar.

Maka saya merasa perlu untuk mencatat kembali apa pencapaian hari ini. Jadi, beginilah codingan yang saya tambahkan pada blog di bagian Layout, dengan cara Add a Gadget > HTML/JavaScript > Paste kode > Geser widget HTML/JavaScript ini ke bagian Navbar. Kalau saya lihat di bagian HTML, kodingan ini otomatis berada di bawah </head>.

<!doctype html>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<style>

* {
box-sizing: border-box;
}

.topnav {
  width: 100%;
  background-color: #F5F5F5;
  overflow: hidden;
  padding: 15px 150px;
  top: 0;
  position: fixed;
  z-index: 10;
}
          
.topnav a{
  font-size: 22px;
  font-weight: bold;
  text-decoration: none;
  color: black;
}

.topnav a:hover{
text-decoration: none;
color: black;
}

.topnav .openSearch {
border: none;
background: none;
font-size: 22px;
}

.topnav button {
float: right;
}

.openBtn {
  background: #f1f1f1;
  border: none;
  padding: 10px 15px;
  font-size: 20px;
  cursor: pointer;
}

.openBtn:hover {
  background: #bbb;
}

.overlay {
  height: 100%;
  width: 100%;
  display: none;
  position: fixed;
  z-index: 11;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9);
}

.overlay-content {
  position: relative;
  top: 46%;
  width: 80%;
  left:5%;
  text-align: center;
  margin-top: 30px;
  margin: auto;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
  cursor: pointer;
  color: white;
}

.overlay .closebtn:hover {
  color: #ccc;
}

.overlay input[type=text] {
  padding: 15px;
  font-size: 17px;
  border: none;
  float: left;
  width: 80%;
  background: white;
}

.overlay input[type=text]:hover {
  background: #f1f1f1;
}

.overlay button {
  float: left;
  width: 5%;
  padding: 15px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.overlay button:hover {
  background: #bbb;
}

@media screen and (max-width: 1024px){
.overlay button {
  float: left;
  width: 20%;
  padding: 15px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}
.overlay-content {
  width: 60%;
  left:2%;
}
.topnav {
width:100%;
margin: 0;
padding: 15px 50px;
}
.topnav a{
  font-size: 22px;
}
.topnav .openSearch {
border: none;
background: none;
font-size: 20px;
padding: 0;
}
}

@media screen and (max-width: 800px){
.overlay button {
  float: left;
  width: 20%;
  padding: 15px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}
.topnav {
width:100%;
margin: 0;
padding: 15px 50px;
}
.topnav a{
  font-size: 22px;
}
.topnav .openSearch {
border: none;
background: none;
font-size: 20px;
padding: 0;
}
}

@media screen and (max-width: 603px){
.overlay button {
  float: left;
  width: 20%;
  padding: 15px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}
.topnav {
width:100%;
margin: 0;
padding: 20px 30px;
}
.topnav a{
  font-size: 22px;
}
.topnav .openSearch {
border: none;
background: none;
font-size: 20px;
padding: 0;
}
}

</style>

<div class="topnav">
  <a href="/" class="taruihbaraja">Taruih Baraja</a>
  <button class="openSearch" onclick="openSearch()"><i class="fa fa-search"></i></button>
</div>

<div id="myOverlay" class="overlay">
  <span class="closebtn" onclick="closeSearch()" title="Close Overlay">×</span>
  <div class="overlay-content">
    <form action="/search" method="get">
      <input name="q" type="text" placeholder="Search.." name="search" />
      <button type="submit"><i class="fa fa-search"></i></button>
    </form>
  </div>
</div>

<script>
function openSearch() {
  document.getElementById("myOverlay").style.display = "block";
}
function closeSearch() {
  document.getElementById("myOverlay").style.display = "none";
}
</script>

</!doctype>

Nah, kodingan ini saya set dengan position: fixed, biar pas digulir, dia masih melekat di atas. Kayaknya sih ini yang bikin iklan anchor (yang terkadang muncul di bagian atas ponsel) yang jadi pindah ke bagian bawah. Tapi anehnya, kalau gak pakai property tersebut, navbar nya hilang di mobile, entah mungkin masih loading karena sinyal?

Selain itu, ternyata navbar ini menimpa tulisan di bawahnya. Jadi tulisan judul postingan atau unit iklan pun terpotong beberapa px. Untuk mengakalinya, saya menaruh:

top: 30px;

di tag body di bagian CSS.

Hasilnya sudah lumayan bagus.

Responsive navbar dengan full screen pop up search bar

Begini jika icon search-nya diklik:

Full Screen Search Bar

Sekian, semoga bermanfaat.

Adakah yang mau memberi tips? Boleh kasi tahu ilmunya kepada saya ya.

Terima kasih

No comments:

Post a Comment

Jangan sungkan untuk meninggalkan komentar