Full Responsive Menü Yapımı

İbrahim OKUYUCU
Full Responsive Menü Yapımı

Full Responsive Menü Yapımı için minicik HTML + CSS + JS bilgisine belki ihtiyaç duyabilirsiniz. Belki diyorum çünkü detay vermeyi ve anlatmayı seven biri olduğum için direkt nokta atışı yaparak kafanıza yer etmesini sağlamayı amaçlıyorum.

Çalıştığım şirkette de kendim içinde öğrenen arkadaşlarım içinde kullanırım. HTML bir işaretleme dili ve iskeleti oluşturmamıza yarar. Yani
etiketi ile aslında orada bir kutu oluştur diyoruz. CSS’ de ise display:block; diyerek burada göster diyoruz. JS’ de ise consolo.log(“Merhaba Dünya”); diyerek de Geliştirici konsoluna ya da ekrana uyarı basıyoruz.

Full Responsive Menü Yapımı nasıl oluyor? sorusunun cevabını verelim.

İlk Adım; VS Code Ya Da Herhangi Bir Text Editör Açın

ilk olarak VS Code ya da herhangi bir metin editöründe(Atom, Brackets, Notepad++) hiç fark etmez HTML dosyası oluşturun ve aşağıdaki kodları yazın.

<div class="genel">
        <nav class="desk">
            <ul>
                <li><a href="#">Anasayfa</a></li>
                <li><a href="#">Özellik</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">İletişim</a></li>
                <li><a href="#">Hakkımızda</a></li>
            </ul>
        </nav>

        <nav class="mob">
            <div class="btn">
                <i class="fa fa-bars"></i>
                <i class="fa fa-times"></i>
            </div>
            <ul>
                <li><a href="#">Anasayfa</a></li>
                <li><a href="#">Özellik</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">İletişim</a></li>
                <li><a href="#">Hakkımızda</a></li>
            </ul>
        </nav>        
    </div>

Bu kodları yazdıktan sonra sıra makyaj kısmımızı yapmakta. Peki nasıl yapacağız bu makyajı CSS kodlarımız ile onlar aşağıda yer alıyor bu kodları da yazın.

Aşağıdaki CSS Kodlarını Ekleyin

@import url("https://fonts.googleapis.com/css?family=Roboto");

*{
    padding: 0;
    margin: 0;
    /*Kullanıcının Sayfadan Herhangi Bir Metin Seçmesini Engelliyoruz*/
    user-select: none;
}

body{
    font-family: "roboto", sans-serif;
}

.mob,
.btn{
    display: none;
}

.genel nav.desk,
.genel nav.mob{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background: deepskyblue;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.25);
}

nav.desk ul{
    width: 70%;
    height: 60px;
    list-style: none;
    margin: 0 auto;
}

nav.desk ul li{
    width: 20%;
    float: left;
    text-align: center;
    line-height: 60px;
    text-transform: uppercase;
    /*Üzerine Gelindiğinde El İşareti Çıkmasını Sağlayan Kod*/
    cursor: pointer;
    /*Bu kodun bulunduğu element ise gecikme alsın diyoruz 
    Yani All her özelliği 0.5saniye yumuşak bir biçimde geciksin*/
    transition: all 0.5s ease;
}

nav.desk ul li:hover,
nav.mob ul li:hover{
    background: tomato;
}

ul li a{
    text-decoration: none;
    color: #fff;
}


@media screen and (max-width:700px){
    nav.desk{
        display: none;
    }
    .mob,
    .btn{
        display: block;
    }

    .btn{
        position: relative;
    }

    .btn .fa-bars,
    .btn .fa-times
    {
        position: fixed;
        top: 15px;
        right: 25px;
        color: #FFF;
        font-size: 35px;
        cursor: pointer;
    }

    .mob ul {
        margin-top: 60px;
        background:gray ;
        display: none;
    }

    .mob ul li{
        text-align: center;
        padding: 20px;
        text-transform: uppercase;
        cursor: pointer;
    }

    .mob ul.aktif{
        display: block;
    }
}

Son olarak JavaScript kütüphanesi olan JQuery kodlarımızı da ekliyorum.
Bunun için bu linke tıklayarak Jquery kütüphanesini ekliyebilirsiniz.

Son Olarak JS Kodlarını Ekleyin

<script
      src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
      integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI="
      crossorigin="anonymous"
    ></script>
    <script>
        $(document).ready(function(){

            $(".btn .fa-times").hide();

            $(".btn .fa-bars").click(function(){
                $(this).hide();
                $(".btn .fa-times").show();
                $(".mob ul").toggle();
            });

            $(".btn .fa-times").click(function(){
                $(this).hide();
                $(".btn .fa-bars").show();
                $(".mob ul").toggle();
            });
        })
    </script>

Ayrıca kodlara ulaşmak için aşağıdaki codepen editörü de kullanabilirsiniz.

See the Pen Responsive Menü by İbrahim OKUYUCU (@penetrasyoncu) on CodePen.

Tebrikler! Nur Topu gibi Responsive Menünüz Var

Bununla birlikte yukarıda ki kodlar la yapamadığınız yer olursa detaylı olarak YouTube Kanalımda HTML+CSS+JS ile Full Responsive Menü Yapımı videomu seyredebilir ve bu gibi videoların devamı için destek olabilirsiniz.

Responsive menümüz için gerekli işlemleri tamamladık. Umarım faydalı bir blog yazısı olmuştur sizler için. Bununla birlikte diğer yazılarımı okumak için tıklayın. Herhangi bir sorunuz ya da öneriniz olursa yorum yapabilirsiniz.

Exit mobile version