Babayiğit
Altın Üye
- Katılım
- 15 Ocak 2021
- Mesajlar
- 344
- Tepkime puanı
- 457
- İlgi Alanlarınız
- Yazılım
- Cinsiyet
-
- Erkek
İsmi ile alakasız olduğunu düşünüyorum her neyseeee
görünüm böyle aslında daha iyi ama foto bu
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Deneme</title>
</head>
<body>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{
margin:0;
font-family: 'Lato',sans-serif;
}
.zemin{
height: 100vh;
width: 100vw;
position: fixed;
z-index:1;
top:0;
left:-100vw;
background: rgba(0,0,0,.9);
overflow-x: hidden;
transition: .5s;
}
.zemin-icerik{
position: relative;
top:25%;
width: 100%;
text-align: center;
}
.zemin a{
display: block;
padding:8px;
text-decoration: none;
color:#818181;
transition: .4s;
font-size:36px;
border-top:solid 2px rgba(241,241,241,0);
border-bottom:solid 2px rgba(241,241,241,0);
}
.zemin-icerik a:hover, .zemin-icerik a:focus{
color:#f1f1f1;
border-top:solid 2px #f1f1f1;
border-bottom:solid 2px #f1f1f1;
background: #b71540;
}
.zemin .kapatBtn{
position: absolute;
top:40px;
right: 40px;
font-size:60px;
}
</style>
<div id="menu" class="zemin">
<a href="#" class="kapatBtn" id="kapatBtn"> ×</a>
<div class="zemin-icerik">
<a href="#">Anasayfa</a>
<a href="#">Yeni Makaleler</a>
<a href="#">Biz Kimiz</a>
<a href="#">Sohbet Alanı</a>
<a href="#">Referans</a>
</div>
</div>
<span id="menuAc"> ☰ Menü</span>
<p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.</p>
<script>
var menuAc=document.querySelector("#menuAc");
var menu=document.querySelector("#menu");
var kapatBtn=document.querySelector("#kapatBtn");
menuAc.addEventListener("click",function(){
menu.style.left="0vw";
});
kapatBtn.addEventListener("click",function(){
menu.style.left="-100vw";
});
</script>
</body>
</html>görünüm böyle aslında daha iyi ama foto bu
