Sihirli Fasulyeler
Yükleniyor...
Tüm Cihazlara Uyumlu Website Menüsü
 Web-Tasarım   733   27.12.2017   0
webmenu.jpg

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.

 

 

 Bu konuyu paylaş

 

 Konuyu geliştirmemize yardımcı ol, konuyu değerlendir.
 İlk Sen Değerlendir

 

 Yorum yaz, soru sor, geliştirme öner
E-Posta adresiniz yayınlanmayacak.

 

 İlk Yorumu Sen Yap