Membuat Tampilan Search Menjadi Fullscreen Saat Di Klik
Hallo teman-teman Source Code Aplikasi. Kembali lagi dengan saya Shelli Ripati di Kursus Web Design. Kali ini saya akan membahas mengenai cara Membuat Tampilan Search Menjadi Fullscreen Saat Di Klik. Oke Seketika saja teman-teman dapat membangun struktur htmlnya, seperti di script di bawah ini ya teman-teman.
man dapat membangun struktur htmlnya, seperti di script di bawah ini ya teman-teman.
<!DOCTYPE html>
<html>
<head>
<title>Merancang Tampilan Search Menjadi Fullscreen Ketika Di Klik</title>
<link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css>
</head>
<body>
<div id=myOverlay class=overlay>
<span class=closebtn onclick=closeSearch() title=Merancang Tampilan Search Menjadi Fullscreen Ketika Di Klik>X</span>
<div class=overlay-content>
<form action=>
<input type=text placeholder=Search.. name=search>
<button type=submit><i class=fa fa-search></i></button>
</form>
</div>
</div>
<h2>Merancang Tampilan Search Menjadi Fullscreen Ketika Di Klik</h2>
<p>Klik button bagi membuka tampilan search</p>
<button class=openBtn onclick=openSearch()>Open Search</button>
</body>
</html>
Nah, setelah selesai membangun struktur htmlnya karenanya berikutnya kita bikin styles cssnya bagi Membuat Tampilan Search Menjadi Fullscreen Saat Di Klik. Berikut script cssnya ya teman-teman.
<style>
body {
font-family: Arial;
}
* {
box-sizing: border-box;
}
.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: 1;
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%;
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: 20%;
padding: 15px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
.overlay button:hover {
background: #bbb;
}
</style>
Oke teman-teman, jikalau telah bikin cssnya, langkah terakhir kita bikin javascriptnya bagi menampilkan fullscreen searchnya, seperti di script di bawah ini ya teman-teman.
<script>
function openSearch() {
document.getElementById(myOverlay).style.display = block;
}
function closeSearch() {
document.getElementById(myOverlay).style.display = none;
}
</script>
Jikalau teman-teman buka di tampilan browsernya karenanya akan tampak seperti di gambar di bawah ini.
Demikian artikel mengenai cara Membuat Tampilan Search Menjadi Fullscreen Saat Di Klik. Semoga bermanfaat dan selamat mencoba ya teman-teman.
Sumber https://kursuswebsite.org
