İçindekiler
Neye ihtiyacımız var?
Yerel bir sunucu (Xampp kullandığımı size daha önce söylemiştim)
·
A kod düzenleyici (yüce metin 3 kullanın)
Aşama 1
Yerel sunucumun dizinine gidip bu projeyi saklamak için yeni bir klasör oluşturarak başlayacağım, içine "menu_hover" diyeceğim ve css dosyalarını içerecek bir tane daha ekleyeceğim.
BÜYÜT
BÜYÜT
Adım 2
Şimdi kod editörümüzde yeni bir html5 yapısı ekleyerek başlayacağız, buna kendi CDN adreslerinden bootstrap'e karşılık gelen stil sayfalarını sunucumuzda yer kaplamaması için ekleyeceğim, ayrıca "style" adında bir stil sayfası ekleyeceğim. Daha önce oluşturduğumuz "css" klasörümüzde saklanacak olan .css" …
Daha sonra bu dosyayı 1. adımda oluşturduğumuz "menu_hover" klasörüne "menu.html" olarak kaydedeceğiz.
BÜYÜT
Aşama 3
Şimdi "menu.html" dosyamıza bir etiket ekleyeceğiz ve style.css dosyasında özelliklerini ayarlayarak ekranda nasıl görüneceğini belirleyeceğiz…
BÜYÜT
BÜYÜT
BÜYÜT
4. Adım
Menümün 4 linkten oluşmasını istiyorum, bunu başarmak için ekleyeceğim etiketin içine 4Bunları tanımlamak için "box_menu" sınıfı ile her birine "bir"den "dört"e artan bir kimlik ekleyeceğim.
BÜYÜT
Adım 5
style.css dosyamıza "box_menu" sınıfının ve "bir, iki, üç ve dört" katmanların özelliklerini ekleyeceğiz.
6. Adım
Göreceli bir konum kurarak "box_menu" sınıfının davranışını tanımlamaya başlayacağız, bu durumda 4 bağlantımız olacağını ve bunları içeren katmanın, yani ekranın %80'ini kapladığını unutmayın, bu nedenle box_menu sınıfı içindeki kullanılabilir alanın %100'ünü işgal eden 4 öğeye ihtiyacımız var, bunun için %100'ü alacağız ve yerleştirmek istediğimiz bağlantı veya öğe sayısına böleceğiz, bu durumda 4 tane olduğu gibi 100/4 = 25 olur, çünkü "box_menu" sınıfımızın genişliği %25 olmalıdır. Ayrıca %100 durmasını ve elemanların yan yana görünmesi için sola kaymasını söyleyeceğiz.
BÜYÜT
7. Adım
Daha sonra öğelerin her birini göstereceğimiz arka plan rengini tanımlayacağız, 4. adımda artık css'imize birden dörde kadar id ekleyeceğiz, bu katmanların her birinin nasıl görüneceğini tanımlayacağız. bunun için şunları yapacağız…
BÜYÜT
BÜYÜT
8. Adım
Peki 4. adımda bıraktığımız gibi "menu.html" belgesine geri dönelim, şimdi menümüzün sahip olacağı simgeleri ve metinleri eklemeye devam edeceğiz.Bunun için resim kullanmayacağız ama gidiyoruz. kendimize önyükleme konusunda biraz yardımcı olmak için ve “Font Awesome” paketindeki simgeleri kullanacağız, bunun için tarayıcıya gidiyoruz ve web'e erişiyoruz https: // fortawesome… .o / Font-Awesome / “Başlayın” a tıklayın ” menüsüne gidin ve “EN KOLAY: MaxCDN tarafından BootstrapCDN bölümü”ne gidin.
BÜYÜT
BÜYÜT
BÜYÜT
BÜYÜT
BÜYÜT
BÜYÜT
BÜYÜT
BÜYÜT
BÜYÜT
BÜYÜT
9. Adım
Simgeler oldukça küçük, boyutlarını 3 kat artıracağım, bunun için bir "fa-3x" sınıfı ekleyeceğim.
BÜYÜT
BÜYÜT
Adım 10
Şimdi, efekti tamamlamak için css dosyasını biraz değiştireceğim, "box_menu" sınıfını değiştirerek, metni merkeze hizalayarak ve ona bir display = "block" vererek başlayacağım;
BÜYÜT
11. Adım
Daha sonra simgelerin nasıl görüneceğini kontrol etmek için bir sınıf yazacağım, içinde beyaz olarak görüntülendiğini, etraflarında yuvarlak bir kenar olduğunu ve geçiş animasyonu olduğunu tanımlayacağım …
BÜYÜT
Adım 1/2
Etiketteki metinlerle ilgili olarak
Onları beyaza yerleştireceğim ve biraz aşağı doğru animasyon efekti ekleyerek opaklığı biraz azaltacağım.
BÜYÜT
Adım 13
Şimdi elementlerimizin üzerine gelindiğinde nasıl davranacağını tanımlayacağım ve efekti yumuşatmak için ona küçük bir animasyon ekleyeceğim.
BÜYÜT
Sonunda Size kaynak koduyla birlikte bir .zip bırakacağımBu öğreticiyi beğendiyseniz, yorumunuzu bırakın, net olmayan bir şey varsa lütfen bana sorun, belirli bir konuda bir eğitim istiyorsanız bana bildirin …
Umarım işinize yarar, saygılar…
