CSS İle Açılır Menü Yapımı (12. Ders Açılır Menü) – BilgeBank
Cuma , Aralık 15 2017
Anasayfa / DERSLER / Web Tasarım Dersleri / CSS Dersleri / CSS İle Açılır Menü Yapımı (12. Ders Açılır Menü)

CSS İle Açılır Menü Yapımı (12. Ders Açılır Menü)

Css ile açılır menü yapımını adım adım resimli bir şekilde nasıl yapıldığını anlatmaya çalışacağım olayın  mantığını anladıktan sonra istediğiniz gibi çeşitli tasarımlar yapabilirsiniz. Öncelikle örnek sayfamız aşağıdaki örnekteki gibi olacaktır.

Bu Kodların Ön İzlemesine Buradan Bakabilirsiniz

 

Öncelikle menünün alanlarını oluşturalım sayfamızın ilk görünümü bu şekilde olacaktır. ul etiketiyle sıraladığımız için başlıklarında nokta işareti var ve a etiketlerinden dolayıda alanlarımızın altları çizgili.

Menü alanımızı ortalamak ve bir boyut vermek için aşağıdaki komutlarımızı ekledik css alanımıza

*{margin: 0; padding: 0; } Komutumuz ile Sayfamızın genel sıfırlamasını yaptık

.menu{ width:800px; margin:0px auto; } Komutumuz ile Alanımızın 800px genişliğinde olmasını ve sayfamızın ortasında olmasını istedik. Alanımıza bir boyut belirlemezsek sayfanın sol üst köşesine sıfırlama yapar.

Not: Arka plan gri görünmeyecektir sizde sayfanın ortalanmasını ve boyutunu görmeniz için resimde .menü css imize background:gray; Komutunu ekledim.

Ul etiketi ile listeleme yaptığımız için alanlarımızın başında nokta işareti vardı bunu yok etmek için

.menu ul{ list-style-type:none; } Komutumuz ile menü classımızın içindeki ul etiketlerinin stillerini sil dedik.

menümüz dikey değil yatay olmasını istiyoruz bunun için css alanımıza aşağıdaki komutları ekledik

.menu ul li { Seçimimizle menü clasımızdaki ul etiketleri içindeki li etiketlerimizde düzenleme yapacağımızı belirledik.

float:left; Komutumuz ile alanlarımızın soldan sağa doğru sıralanmasını istedik bu sayede yatay menü oluşturacağız;

height:40px; width:150px; Komutlarımız ile alanlarımıza genişlik ve yükseklik belirledik

position:relative; Komutumuz ile açılacak alanlarımızı ana alanımızın altına sıraladık position:relative; komutunu kullanmasaydık alt menü başlık alanlarımız sol baştan başlardı.

}

Şimdi a etiketlerimizi düzenlemek için

.menu ul li a { Seçimimizle menü clasımızdaki ul > li  etiketleri içindeki a etiketlerimizde düzenleme yapacağımızı belirledik.

text-decoration:none; Komutumuz ile a etiketlerinde oluşan yazının altındaki çizgiyi kaldırdık.

display:block; Komutumuz ile a etiketlerimizin bir alan oluşturduğunu belirledik bu sayede li etiketleri için belirlediğimiz yükseklik ve genişlik boyutlarını belirtik.

background-color:#000; Komutumuz ile arka planımızın siyah olmasını istedik.

color:#fff; Komutumuz ile yazıların beyaz renkte olmasını istedik.

line-height:40px; Komutumuz ile Yazılarımızın li alanlarındaki boyutuna göre yukarıdan ve aşağıdan ortalanmasını istedik li alanındaki yükseklik kaç px ise line-height de belirtilen yükseklikte aynı olmalı bu sayede yazı ortalanmış olur.

padding-left:10px; Komutumuz ile yazılarınızın soldan 10px lik bir boşlukla başlamasını istedik.

font-size:17px; Komutumuz ile yazılarımızın 17px boyutunda olmasını belirledik.

}

Şimdi menümümüzün üstüne maus ile gelindiğinde yapmasını istediğimiz komutları ekleyeceğiz.

.menu ul li a:hover { Seçimimizle menü clasımızdaki ul > li > a  etiketleri üzerine maus ile gelindiğinde hover komutu ile yapacağı etkileri tanımlayalım.

background-color:red; Komutumuz ile arka plan rengimizin kırmızı olmasını istedik.

text-decoration:underline; Komutumuz ile yazılarımızın altında bir çizgi oluşmasını istedik.

}Genel şekillendirmemizi tanımladık şimdi sıra açılacak alt menü alanlarını gizlemeye bunun için css alanımıza şu komutumuzu ekliyoruz.

.menu ul li ul { Seçimimizle menü clasımızdaki ul > li  etiketleri içindeki ul etiketlerimizde  düzenleme yapacağımızı belirledik.

display:none; Komutumuz ile menu ul li içinde oluşturduğumuz açılan ul block alanlarımızın hepsini gizlemesini istedik.

}

Artık son işlemimiz olan maus ile üzerine geldiğimizde açılır hale getirmek için.

.menu ul li:hover ul { Seçimimizle menü clasımızdaki ul > li > alanımızın üzerine maus ile gelindiğinde hover ul  komutu ile ul alanlarımızı seçerek.

display: block; Komutumuz ile alanımızın tekrar block halinde açılmasını istedik.

}

Ve artık menümüz hazır basit bir şekilde açılır bir menünün nasıl yapıldığını öğrendiniz artık geliştirmek size kaldı ilerleyen derslerde daha kapsamlı daha çok animasyon ve efek kullanarak menüler tasarlayacağız ancak temel mantığını kavramanız çok önemli. umarım yararlı bir ders olmuştur aklınıza takılan soruları yorum kısmında belirtebilirsiniz.

Hakkında BilgeBank

İlgili Makale

Position Fixed Kullanımı

CSS İle Pozisyon Konumlandırma (11. Ders Position Fixed Kullanımı)

Css ile alanlarımızda düzenlemeler yaparken position özelliğini kullanırız. Position özelliğinin 4 farklı değeri vardır; Static, …

Bir Cevap Yazın