Merhaba Türk Hack Team ailesi. Bugün ki üzerinde duracağım konu 'Arama Kutusu' olacaktır. Kodu kendi alanınız da geliştirebilirsiniz, değiştirebilirsiniz ve yeni özellikle ekleyebilirsiniz tamamen size kalmış. Kodlarımızı görelim ve indeximize göz atalım.
HTML:
<html>
<head>
<title>TURK HACK TEAM ~ K3D</title>
<!-- Meta -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<!-- Link -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<!-- Script -->
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
</head>
<body>
<!-- Başlayalım Yavaştan -->
<!-- Stil Tagımız -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@200&display=swap');
body{
background-color: #fff;
color: #000;
margin: 0;
font-family: 'Work Sans', sans-serif;
}
.menu{
padding: 10px;
}
.menu > .flex{
display: flex;
justify-content: space-around;
align-items: center;
}
.menu > .flex > div > a{
color: #000;
text-decoration: none;
font-weight: bold;
margin-left: 5px;
margin-right: 5px;
font-size: 18px;
background-image: linear-gradient(90deg, #000 100%, #000 0%);
background-repeat: no-repeat;
background-position: bottom center;
background-size: 0% 2px;
transition: 250ms all
}
.menu > .flex > div > a:hover{
background-size: 100% 2px;
}
.menu > .flex > div > input{
border: none;
margin-left: 50px;
width: 100px;
outline: none;
background-image: linear-gradient(90deg, #000 100%, #000 0%);
background-repeat: no-repeat;
background-position: bottom center;
background-size: 0% 1px;
transition: 250ms all
}
.menu > .flex > div > input:focus{
background-size: 100% 1px;
}
.menu > .flex > div > i{
position: relative;
top: 0px;
left: -130px;
}
.mesajlar{
padding: 10px;
width: 500px;
display: block;
margin: 0 auto;
}
.mesajlar > .box{
display: flex;
flex-direction: column;
}
.mesajlar > .box > div{
background-color: #fff;
box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, .2);
padding: 10px;
border-radius: 10px;
margin-bottom: 20px;
}
</style>
<!-- Menu Divlerimiz -->
<div class="menu">
<div class="flex">
<div>
<h1>TURK HACK TEAM</h1>
</div>
<div>
<a href="https://turkhackteam.org">THT</a>
<a href="#">K3D</a>
<input type="text" autocomplete="off" name="ara" id="ara" placeholder="Ara...."/>
<i class="bi bi-search"></i>
</div>
</div>
</div>
<!-- Mesajlarımız -->
<div class="mesajlar">
<div class="box">
<div>
<h1>' Coderx37</h1>
<p>"Test mesajı olarak ilk ben atayım."</p>
</div>
<div>
<h1>Adanlıtrojan</h1>
<p>Merhaba Gardaş</p>
</div>
<div>
<h1>K3D</h1>
<p>Test</p>
</div>
<div>
<h1>KaptanTR</h1>
<p>AR-GE TURK HACK TEAM</p>
</div>
<div>
<h1>' Adige</h1>
<p>Merhaba.</p>
</div>
</div>
</div>
<!-- Siciriptlerimiz -->
<script>
// Büyük ve Küçük harf kontrolü
jQuery.expr[':'].contains = function(a, i, m){
return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};
$(document).ready(function(){
$('#ara').keyup(function() {
var kelime = $("#ara").val();
// Boş bir değer girerse, hiç bir şey aramasın
if(kelime.length == 0){
$(".box div").show();
} else{
// Eğer geçerli bir arama yapılırsa
$('.box div').hide();
$('.box div:contains('+kelime+')').show();
}
})
})
</script>
</body>
</html>İndeximiz şu şekil de gözükecektir.
Videolu halini izlemek isterseniz buyrun;
İyi Kodlamalar diliyorum.
Videolu halini izlemek isterseniz buyrun;
İyi Kodlamalar diliyorum.
Teşekkür ediyorum
