CSS İle Menü Yapımı (7. Ders Css İle Yatay Menü) | BilgeBank
Cuma , Ekim 20 2017
Anasayfa / DERSLER / Web Tasarım Dersleri / CSS Dersleri / CSS İle Menü Yapımı (7. Ders Css İle Yatay Menü)

CSS İle Menü Yapımı (7. Ders Css İle Yatay Menü)

Css ile Sayfamıza menü yapımının mantığını kısaca öğrenelim. Bu dersimizde basit bir menü yapımını öğreneceğiz, çünkü işin temel mantığını öğrenmeniz çok önemli. İlerleyen derslerimizde daha kapsamlı açılır efektli menüler yapımını elimden geldiğince öğretmeye çalışacağım. CSS Genel Tasarım Yapısı (4. Ders Alan Oluşturma) Dersimizde ki Sayfa Şablonumuza basit bir menü yapalım ve bunun için head alanımızdaki <div id=”menu”>alanımıza birkaç html yapısı oluşturalım.

<div id=”menu”> Alanımızın içine ul etiketi ile bir sıralama alanı oluşturduk ve içine li etiketleri ile listeleme yaptık ve listelerimizi a etiketimiz ile link verdik ve Css ile düzenlemeye başlayalım.

<div id=”menu”> Alanımızı #menu olarak Css alanımıza tanıttık ve

height:50px; Komutumuz İle bu alanın 50px yüksekliğinde olmasını istedik.

background:#D2D0D1; Komutumuz ile bu alanın arka planının gri tonlarından olan #D2D0D1 tonunda olmasını istedik.

border-radius:20px; Komutumuz ile bu alanın kenarlarına ovallik verdik.

margin:5px 0px 5px 0px; Komutumuz ile de alanımızın Üstten ve Aşağıdan 5px boşluklar bırakmasını istedik.

#menu ul { Tanımlamız ile <div id=”menu”> Alanımızın içinde bulunan ul etiketlerinde işlem yapacağımızı tanımladık.

padding: 0; margin: 0; Komutumuz ile ul İle sıralama yaptığımız tüm alanın iç ve dış boşluklarını sıfırladık.

}

#menu ul li { Tanımlamız ile <div id=”menu”> Alanımızın içinde bulunan ul etiketlerindeki li etiketlerinde işlem yapacağımızı tanımladık.

float:left;  Komutumuz ile alt alta olan liste alanımızı yan yana yapıp yatay menü için hazırladık.

list-style-type:none; Komutumuz ile li etiketlerinde oluşan yazının başındaki noktalama işaretlerini bu komutla kaldırdık.

}

#menu ul li a{ Tanımlamız ile <div id=”menu”> Alanımızın içinde bulunan ul sıralamasındaki li listesinin içindeki a etiketleri için işlem yapacağımızı tanımladık.

text-decoration: none; Komutumuz ile a etiketlerinde oluşan altı çizgili yazımın altındaki çizgiyi yok ediyoruz.

display:block; Komutumuz ile a etiketlerinin her birinin bir alan olduğunu tanımlıyoruz.

padding:10px; Komutumuz ile alan olarak tanımladığım a etiketlerine 10px lik bir boşluk vererek aralarındaki boşluğu oluşturuyoruz.

font:25px Arial; Komutumuzla yazı boyutunu ve ve tipini belirliyoruz.

color:#ED2C2C; Komutumuz ile yazımızın kırmızı renk tonlarından #ED2C2C Tonuyla olmasını belirliyoruz.

}

#menu ul li a:hover{ Tanımlamız oluşturduğumuz menümüze ufak bir efekt veriyoruz. :hover tanımlaması alanımızın üstüne maus ile gelindiğinde yapmasını istediğimiz komutları vermemize yarar.

background:#ED2C2C; Komutumuz ile arka plan rengimizin kırmızı renk tonlarından #ED2C2C Tonuyla olmasını belirliyoruz.

color:#D2D0D1; Komutumuz ile yazımızın Gri renk tonlarından #D2D0D1 Tonuyla olmasını belirliyoruz.

border-radius:20px; Komutumuz ile kenarlarının oval olmasını istiyoruz.

}

Bu Kodların Ön İzlemesine Buradan Bakabilirsiniz

Hakkında BilgeBank

İlgili Makale

html 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ı …

Bir Cevap Yazın