Sihirli Fasulyeler

Tüm Cihazlara Uyumlu Website Menüsü

Web-Tasarım 2491 27.12.17 09.01.18 0

Tasarımlarımız farklı boyutlardaki cep telefonları, tabletler, masaüstü bilgisayarları, dizüstü bilgisayarları gibi cihazlar ile görüntülenmektedir. Tasarımlarımızın bütün bu farklı cihazlarda düzgün görüntülenmesi için bazı CSS ve HTML işlemlerinlerinin yapılması gerekir. Bu makalemde website menüsü için bu işlemlerden konuşacağız.

Serimizin ikinci bölümüne buraya tıklayarak,

Serimizin üçüncü bölümüne buraya tıklayarak ulaşabilirsiniz.

Tasarımımızı buradan test edebillir, buradan bilgisayarınıza indirebilirsiniz.

Öncelikle basit bir sayfa oluşturalım. Sayfamız sadece menüden ve içeriklerin ekleneceği alandan oluşsun.

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Sihirli Fasulyeler - Menü</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="temel">
        <div id="ust">
            <input type="checkbox" name="" id="kontrol">
            <label for="kontrol"></label>
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
                <li><a href="#">Link 4</a></li>
            </ul>
        </div>
        <div id="icerik"></div>
    </div>
</body>
</html>

Menümüz küçük boyutlu cihazlarda ekran boyutuna göre düzenlenip gizlenecek. Bunun için CSS @media komutundan yararlanacağız. Fakat küçük boyutlu cihazlarda kullanıcının menüyü görmesi için menüyü gösterip gizleyecek bir elemana ihtiyacımız var. Bunun için HTML yapımıza bir checkbox ve bu checkbox'a bağlı bir label ekledik. Kullanıcı küçük boyutlu cihazlarda label'a tıkladığında checkbox'ımız işaretli hale gelecek ve CSS ile menümüzü gösterecek işlemler yapılacak. Checkbox kullanmamızın nedeni, CSS'de checkbox'ın işaretli olup olmadığı kontrol eden :checked komutunun var olmasıdır.

Öncelikle elemanlarımız için genel CSS işlemleri yapalım.

*{
    margin:0;
    padding: 0;
    box-sizing: border-box;
}

#temel{
    width: 90%;
    height: 90vh;
    border:1px solid #ccc;
    margin:15px auto;
}

#ust{
    height: 80px;
    background: #ccc;
    width: 100%;
    position: relative;
}

ul{
    list-style: none;
    display: flex;
    width: 100%;
    height: 80px;
    justify-content: center;
    align-items: center;
}

ul li a{
    text-decoration: none;
    margin:5px;
    padding: 10px;
    color:#000;
    background: #fff;
    font-size: 18px;
}

ul li a:hover{
    background: #eee;
}

Checkbox'ımızı kullanıcıya göstermemizin bir anlamı yok. Bunun için checkbox'ımızı gizliyeceğiz. Ayrıca küçük ekranlarda ortaya çıkacak ve menünün gösterilip gizlenmesi için kullanılacak label elemanımız için de gerekli CSS işlemleri yapalım. Label elemanımıza bir arka plan resmi ekleyerek menü için kullanılan eleman olduğunu da belirtelim.

#kontrol{
    display: none;
}

label{
    position: absolute;
    right: 20px;
    top: 20px;
    width: 40px;
    height:40px;
    background: url("menu.png");
    background-size: 100% 100%;
    cursor: pointer;
    display: none;
}

Menü görüntüsünün bozulduğu ekran genişliğinde menümüzü gizleyelim ve label'ımızı gösterelim. Ayrıca menü elemanlarını küçük ekranlara uyumlu olması açısından basamaklı hale getirelim.

@media (max-width: 360px){
    label{display: block;}
    ul{
        transform:scaleY(0);
        position: absolute;
        width: 100%;
        top:80px;
        display: block;
        transition:all .2s ease;
        transform-origin: 0 0;
	}

    ul li a{
        display: block;
        margin: 0;
        border-bottom: 1px solid #ccc;
        padding: 15px;
	}
}

Gelelim kullanıcı label'a tıklayınca menüyü göstermeye. Bunun için kullanıcı label'a tıkladığında checkbox'ımız işaretli olacak. Biz de bundan yararlanacağız.

#kontrol:checked ˜  ul{
    transform:scaleY(1);
}

Burada CSS seçicilerinden tilde(˜) olarak isimlendirilen kardeşlik seçicisinden yararlandık. Bu tür seçiciler aynı ebeveyne sahip yani kardeş elemanlar için kullanılır. Checkbox'ımız ve ul elemanımız, "ust" isimli katmanın bir alt elemanı, yani kardeş durumundalar. Checkbox işaretli olduğu an kardeşi olan "ul" yani menümüz kullanıcıya gösterilecek. Gösterme ve gizlemenin animasyonlu olması için de CSS "transition" ve "transform" özelliklerinden yararlandık.

Bütün tasarımı ayrıntılı anlattığım videoyu aşağıdan izleyebilirsiniz.