Tüm Cihazlara Uyumlu Website Menüsü
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.
- Yayın Süresi : 2575 Gün
- Konu Sayısı : 277 Bilim Konuları : 118 Teknoloji Konuları : 42 Web-Tasarım Konuları : 42 İlginçler Konuları : 63 Gezi Konuları : 12 En Popüler : Sonsuz İşlemleri 232717 Kere En Çok Yorum Alan : Logaritma Nedir, Ne İşe Yarar, Gerçek Hayatta Nerelerde Kullanılır? 19 Kere En Çok Değerlendirilen : Sonsuz İşlemleri 140 Kere
Satrançta Piyonun Geçerken Alması Kuralı (En Passant)
En passant kuralı nedir, ne zaman uygulanır...
Işık Hızında Bağıl Hız
Işık hızında giden cisimler için bağıl hız hesaplamaları...
Newton Karantinada Neler Yaptı?
Newtonun karantina günleri ve icatları...
Çamaşır Suyu Nedir? Nasıl Temizler?
Çamaşır suyunun yapısı, kullanım alanları ve dikkat edilmesi gerekenler...
Dünyanın Yaşını Nasıl Biliyoruz?
Dünyanın yaşını hesaplama yöntemleri...
Salgın Hastalık Dereceleri : Pandemik, Epidemik, Endemik, Sporadik
Pandemik, Epidemik, Endemik, Sporadik Nedir?
Kahve Günlükleri : Kahve Çekirdeği Kavurma Dereceleri
Hafif, orta, orta-koyu, koyu kavrulmuş kahve çekirdeklerinin özellikleri ve farkları...
Kahve Günlükleri : Kahve Demleme Yöntemleri
Kahve demleme yöntemleri ve farkları...
Kahve Günlükleri : Kahve Çeşitleri ve Ölçüleri
Popüler kahve çeşitleri ve ölçüleri...
Kahve Günlükleri : Arabica ve Robusta
Arabica ve Robusta kahve çekirdekleri ve farkları...
Sayıların Sınıflandırılması (Matematik)
Matematikte sayıların sınıflandırılması : Kompleks, Sanal, Gerçek, Doğal, Rasyonel, İrrasyonel...
Websiteniz İçin Bedava Güvenlik Sertifikası (SSL Sertifikası)
Tamamen bedava güvenlik sertifikası nasıl elde edilir, nasıl yüklenir?
Wi-Fi Şifresini Görme (Windows 7 - 10)
Programsız, kodsuz wifi şifresini görme yöntemi.
Kolay Ezberleme Yöntemi : Anımsatıcılar
Kolay ezberleme yöntemlerinden anımsatıcılar : Mnemotekni
Tarayıcılarda Ön Bellek İşlemleri (Normal Yükleme - Tam Yükleme - Ön Belleği Boşaltma)
Tarayıcılarda normal yükleme ve tam yükleme ne demektir, nasıl yapılır?
Takip, Reaksiyon, Fren ve Durma Mesafesi
Reaksiyon, fren, durma ve takip mesafesi nasıl hesaplanır, bilimsel detaylar.
Bilgisayarda Müzik Nasıl Yapılır?
Sadece bilgisayar programları kullanarak gerçekçi müzik nasıl oluşturulur?
Beden Kitle İndeksi Hesaplama ve Değerlendirme
Bu uygulama ile Vücut Kitle İndeksinizi hesaplayabilir ve sonucu değerlendirebilirsiniz.
Hidrojen Peroksit (H2O2) ve Özellikleri
Hidrojen peroksit nedir, sağlık açısından ne gibi etkileri vardır?
Photoshop'ta Ortalama İşlemleri
Photoshop'ta ortalama işlemleri nasıl yapılır?
Bu kısımdan sitemizdeki gelişmelerden haberdar olabilirsiniz.
- Abonelik Sistemi kaldırıldı. 11.03.2020
- Arama Motoru Google Özel Arama olarak değiştirildi. 15.10.2019
- Yıllık sunucu bakımı tamamlandı. 04.10.2019
- Konulara kaynaklar eklendi. 10.07.2019
- SSL sertifikası eklendi. 31.05.2019
Gitar çalmayı öğrenmek, yeteneğinizi geliştirmek, popüler tab ve akorlar için gitaregitim.net sitesini ziyaret etmeyi unutmayın.