Membuat Responsive Navbar dengan Full Width Search Bar di Blog

Saya mencoba mengganti navbar dengan full screen search bar di Taruih Baraja karena sedang merasa cursor saya agak jauh untuk menjangkau full screen search bar (hoho). Setelah mengotak-atik kodingan dari class overlay di full screen search bar tersebut, saya menemukan cara membuat full width search bar yang letaknya berada di atas navbar (menimpuk navbar).

Berikut catatan kodenya:

<!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: 25px;
  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 {
  width: 100%;
  display: none;
  position: fixed;
  z-index: 11;
  top: 0;
}

.overlay-content {
  position: relative;
  width: 100%;
  padding: 7px 150px;
}

.overlay .closebtn {
  border: none;
  float: right;
  font-size: 23px;
  padding: 10px;
  background-color: #F5F5F5;
}

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

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

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

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

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

@media screen and (max-width: 1024px){
.topnav {
width:100%;
margin: 0;
padding: 20px 30px;
}
.topnav a{
  font-size: 25px;
}
 .overlay-content {
  position: relative;
  width: 100%;
  padding: 10px 25px;
}
.overlay .closebtn {
font-size:25px;
}
}

@media screen and (max-width: 800px){
.topnav {
width:100%;
margin: 0;
padding: 20px 25px;
}
.topnav a{
  font-size: 25px;
}
 .overlay-content {
  position: relative;
  width: 100%;
  padding: 10px 24px;
}
.overlay .closebtn {
font-size:25px;
}
}

@media screen and (max-width: 603px){
.topnav {
width:100%;
margin: 0;
padding: 20px 30px;
}
.topnav a{
  font-size: 25px;
}
 .overlay-content {
  position: relative;
  width: 100%;
  padding: 10px 25px;
}
.overlay .closebtn {
font-size:25px;
}
}
</style>



<div id="myOverlay" class="overlay">

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

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

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

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

</!doctype>

Hasilnya tampak seperti ini:

Responsive navbar dengan icon search

Kalau icon search-nya di-klik, akan tampak seperti:

Responsive navbar dengan full width search bar

Sekian, semoga bermanfaat.

No comments:

Post a Comment

Jangan sungkan untuk meninggalkan komentar