Esnek Üst Menü Hazırlama
Bu dersimizde yapacağımız örnek BootStrap kütüphanesinde bulunan navbar sınıfının benzeri. Yani BootStrap ile hazır sunulan navbar sınıfını kendimiz hazırlayacağız.
Ne gerek var derseniz amacımız hem öğrenmek, hem de site tasarımımızı daha fazla özgün kılabilmek. Mesela menünün hangi ekran genişliğinden itibaren birleşeceğini ayarlamak bizim elimizde olacak.
BootStrap ile sunulan navbar sınıfının bir örneğini şu an ziyaret etmekte olduğunuz sitemizin en üstünde de görüyorsunuz. Bu sınıfın en önemli özelliği ekran genişliği 768 px'in altına düştüğünde menünün birleşerek Collapsible Menu haline gelmesi. Çünkü bu haliyle mobil cihazlarda daha kullanışlı olacaktır.
CSS3 ile gelen yeni özellikler sayesinde bu tür menüler hazırlamak oldukça kolaylaştı. Tabi bunun için biraz da JavaScript kullanacağımızı tahmin edersiniz.
Çalışan halini sayfanın altındaki Konu Örnekleri kısmında bulabileceğiniz örneğin kodlarını şu şekilde gösterelim:
Html Kısmı:
Menümüzün içeriğini html elemanları ile oluşturuyoruz. Menünün ilk elemanına active sınıfı uygulanmış olup, bu eleman her zaman gözükecektir. Ayrıca diğer linklerden daha farklı bir görünüm vermemizi de sağlar.
En sondaki a etiketine dikkatli bakarsanız içerisinde 3 adet boş div göreceksiniz. Burada bir menü ikonu tasarlanmıştır. Menü ikonunun nasıl görüneceği de css kodları ile ayarlanacaktır.
Link sayısını istediğimiz kadar artırabilir veya azaltabiliriz.
<div class="menu" id="ustMenu">
<a href="index.html" class="active">Ana Sayfa</a>
<a href="galeri.html">Galeri</a>
<a href="etkinlik.html">Etkinlikler</a>
<a href="personel.html">Çalışanlarımız</a>
<a href="iletisim.html">İletişim</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<div></div>
<div></div>
<div></div>
</a>
</div>
Css Kısmı:
Menünün görünümü aşağıdaki gibi css stilleriyle belirlenmiştir. Kendi tasarımınıza göre gerekli düzenlemeleri yapabilirsiniz. Özelliklerin her biri için yorum satırı olarak açıklama eklenmiştir.
Buradaki en önemli işlem menü ikonun geniş ekranlarda gizlenmesi. Ve bu genişlik media query ile 800px olarak ayarlanmıştır. Siz kendinize uyan değeri buraya yazabilirsiniz. Bu sayede belirtilen genişlikten dar ekranlarda menü ikonu görünecek ve menü elemanları dikey olarak yerleşecektir.
/* menü genel özellikleri */
.menu {
background-color: #555;
overflow: hidden;
}
/* menü içindeki linklerin özellikleri */
.menu a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* linklerin üzerlerine gelindiğindeki halleri */
.menu a:hover {
background-color: #ddd;
color: black;
}
/* en soldaki elemanı farklı kılmak amaçlı stil */
.active {
background-color: #000;
font-weight:bold;
color: white;
}
/* menü düğmesini gizliyoruz */
.menu .icon {
display: none;
}
/* menü ikonunun görünümü */
.menu .icon div {
width: 35px;
height: 3px;
background-color: white;
margin: 3px 0;
}
/* Genişlik 800px altına düştüğünde ilk eleman haricindekiler gizlensin
, menü ikonu ise görünsün */
@media screen and (max-width: 800px) {
.menu a:not(:first-child) {display: none;}
.menu a.icon {
float: right;
display: block;
}
}
/* responsive sınıfı, javascript ile menüye uygulanacak (ikona tıklandığında), böylece küçük ekranlarda menü dikey hale gelecek. */
@media screen and (max-width: 600px) {
.menu.responsive {position: relative;}
.menu.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.menu.responsive a {
float: none;
display: block;
text-align: left;
}
}
JavaScript Kısmı:
Aşağıdaki js fonksiyonu sayesinde menü ikonuna ilk tıklandığında responsive class'ının menüye uygulanmasını, bir daha tıklandığında ise kaldırılmasını sağlıyoruz.
function myFunction() {
var x = document.getElementById("ustMenu");
if (x.className === "menu") {
x.className += " responsive";
} else {
x.className = "menu";
}
}
bootstrap kullanmadan navbar yapımı, esnek menü nasıl yapılır, change when navbar collapse, bootstrap navbarın gizlenme genişliğini ayarlama, üst menünün hangi genişlikte birleşeceği
KONU İLE İLGİLİ ÖRNEKLER
Ekrana göre otomatik boyutlanan ve belli bir genişliğin altında düştüğünde birleşerek açılır menü haline gelen bir menü hazırlayalım.
Tam çalışan halini görmek için Kendin Dene butonuna tıklayın.
23950 kez okundu.