CSS3 Açılır Menü Oluşturma

CSS3 Açılır Menü Oluşturma


Adım 1 - HTML İşaretleme

 
Alt menüyü oluşturmak için listenin içinde başka sırasız bir liste ekleyin.
 
Kodlar:
 

 

 
Adım 2 - Menü Yerleşimi
 
 
Menünün tüm unsurlarından kenar boşluklarını, dolguyu, kenarlığı ve dış çizgiyi kaldırmaya başlayacağız. Ardından menüye sabit bir genişlik ve yükseklik, yuvarlatılmış köşeler ve CSS3 degradeleri ekleyeceğiz. Bağlantıları yatay olarak hizalamak için listeleri sola kaydırıyoruz. Aynı zamanda pozisyonu göreceli olarak ayarlamamız gerekir, çünkü alt menüleri hizalamak için buna ihtiyacımız olacak.
 
 
Kodlar:

 

Alt menüyü geçici olarak stil yapmak daha kolay olacak şekilde geçici olarak gizleyeceğiz.

Kodlar:

 

Adım 3 - Menü Bağlantıları
 
 
Bir metin gölge ve renk geçişi katacak yazı tipi, renk, dolgu vb gibi bazı temel CSS özelliklerini katacak zaman gelme durumuna üzerinde renk değişiklikleri. Bağlantı ayırıcıyı oluşturmak için sola ve sağa bir kenarlık ekleyin ve ardından sol kenarlığı ilk bağlantıdan ve sağ kenarlığı son bağlantıdan kaldırırız. Fareyle üzerine gelme durumu için yalnızca metin rengini değiştireceğiz.
 
 
Kodlar:

 

 

Adım 4 - Alt Menü
 
 
Önce, ikinci adıma eklediğimiz bu kod satırını kaldıralım.
 
 
Kodlar:

 

Şimdi alt menüyü stil edeceğiz . Alt menü 40px'i menü öğesinin solundan 0px ve üstten konumlandırmaya başlayacağız ve alt köşeleri yuvarlak köşeler ekleyeceğiz. Solukluğu 0 yapacak ve geçiş efekti efektini oluşturmak için fareyle üzerine 1 geçeceğiz. Kaydırma aşağı ve yukarı efekti için, listenin yüksekliğini, gizlendiğinde 0 piksel ve geçiş durumunda 36 piksel olarak ayarlamamız gerekir.

 

Kodlar:


Alt menü bağlantılarının genişliğini 100 piksele ayarlayacağız. Sol ve sağ kenarlıklar yerine bir alt çerçeve ekleyip son bağlantıdan kaldırıyoruz.

 

Kodlar:

 

Bitirmek için yalnızca her alt menü bağlantısına bir simge eklemeliyiz . Bunu yapmak için her biri için özel bir sınıf oluşturur ve bir arka plan resmi ekleriz.

 

Kodlar:

 

 

 

 

 

 

 

 

 

 

 

 

 YUKARI