Neler yeni

CSS Hamburger Menü

Katılım
15 Ocak 2021
Mesajlar
144
Tepkime puanı
133
İlgi Alanlarınız
Yazılım
Cinsiyet
  1. Erkek
İsmi ile alakasız olduğunu düşünüyorum her neyseeee




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"> &times</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>



hamburrrgggeer.PNG

görünüm böyle aslında daha iyi ama foto bu :D
 

Tosun

tosunc.uk
Moderatör
Katılım
19 Aralık 2020
Mesajlar
1,148
Tepkime puanı
1,736
İlgi Alanlarınız
o
Cinsiyet
  1. Erkek
eline sağlık biladerim şu nickin fontu değiştir baride @ atamıyoruz sana ya
 

Konuyu görüntüleyen kullanıcılar:

Hukuksal Sorunlar İçin [email protected]
For Legal Problems [email protected]
Hacktivizm.Org
Hacktivizm.Org internet sitesi 5651 sayılı kanun’un 2. maddesinin 1. fıkrasının m) bendi ile aynı kanunun 5. maddesi kapsamında "Yer Sağlayıcı" konumundadır. İçerikler ön onay olmaksızın tamamen kullanıcılar tarafından oluşturulmaktadır. Hacktivizm.org; Yer sağlayıcı olarak, kullanıcılar tarafından oluşturulan içeriği ya da hukuka aykırı paylaşımı kontrol etmekle ya da araştırmakla yükümlü değildir. Hacktivizm saldırı timleri Türk sitelerine hiçbir zararlı faaliyette bulunmaz. Hacktivizm üyelerinin yaptığı bireysel hack faaliyetlerinden Hacktivizm sorumlu değildir. Sitelerinize Hacktivizm ismi kullanılarak hack faaliyetinde bulunulursa, site-sunucu erişim loglarından bu faaliyeti gerçekleştiren ip adresini tespit edip diğer kanıtlarla birlikte savcılığa suç duyurusunda bulununuz. Sitemizde yer alan içerikler hakkındaki şikayetlerinizi Buradan iletişime geçerek bildirebilirsiniz. Please Report Abuse, DMCA, Scamming, Harassment, Crack or any Illegal Activities to [email protected]
Hacktivizm Twitter Hacktivizm Youtube Hacktivizm İnstagram Hacktivizm Telegram