yandex

CSS3 ile Dikey Menü Yapımı

Bu içerik 1 sene önce dogukanbatal tarafından yazılmıştır.
Paylaş:

Merhaba arkadaşlar bu dersimizde CSS3 ile hoş görünümlü bir Dikey menü yapıcaz, başlayalım hemen…

 

CSS3 ile Dikey Menü Yapımı

Yapacağımız menünün demo halini görmek için buraya tıklayabilirsiniz.

 

HTML Kodları

İlk olarak menü için HTML yapımızı oluşturalım.

Aşağıda görmüş olduğunuz gibi ilk olarak "menu" adında bir ul oluşturdum.Daha sonra sırasıyla

li > a > i şeklinde yapı oluşturalım.

 

Menü ikonlu olacağı için "fa fa-question-circle" bu şekilde font awesome ikonlarını kullandık.

 

Ayrıca bu konuda bilgi sahibi olmak için Font Awesome Nedir ? Nasıl Kullanılır ? adlı yazımı incelemenizi tavsiye ederim.

 

CSS Kodları

Buradada CSS kodlarımızı yazıyoruz, idsi "menu" olan ulnin stil kodlarını yazıyoruz.Daha sonra sırasıyla ul#menu içerisindeki li, a, span, i nesnelerini düzenliyoruz.
 
Menünün daha efektif durması amacıyla hover (fare üzerine gelince çalışacak kısım) bölümünde transition kullandık.
 
Ayrıca bu konuda bilgi sahibi değilseniz CSS3 Transition Kullanımı adlı yazımı inceleyebilirsiniz.

Evet tüm işlemleri yaptık menümüz hazır bir sonraki yazıda görüşmek üzere ayrıca menüyü codepen`de görüntülemek için buraya tıklayabilirsiniz.

YORUMLAR ;