HTML, CSS ve JavaScript Kullanarak Animasyonlu Kenar Çubuğu Oluşturun
Web teknolojilerini kullanarak bir geçiş özelliği ile sıfırdan özel bir kenar çubuğu oluşturmayı öğrenin.
Bu makalede, web uygulamanız için pürüzsüz animasyonlu bir kenar çubuğu uygulamak için size adım adım bir yol göstereceğim. Varsayılan olarak, kenar çubuğu görünürdür, bir düğmeyi kullanarak değiştirebilir ve sağ görünüm bölümünü daraltabilir veya genişletebilirsiniz.
Özel Kenar Çubuğu Oluşturmak İçin 3 Adım
- Kenar Çubuğu için HTML'yi ekleyin
- Kenar Çubuğu için CSS Stilleri Ekle
- Kenar Çubuğunu Genişletmek veya Daraltmak için JavaScript Ekle
Projenizi tercih ettiğiniz metin düzenleyicide açın ve bodyöğeye aşağıdaki kod parçacığını ekleyin. Aşağıdaki kod parçacığında iki HTML bloğu olduğunu unutmayın. Birinin adında bir kimliği mySidebarvar ve diğerinin adında bir kimliği var main. Kenar çubuğunun içeriği, kimliğe sahip öğenin içinde yer alacaktır mySidebar. Oysa kimliğe sahip olan öğe main, görünüm sayfasının sağ tarafında görüntülenecek içeriği saklayacaktır.
2. Adım: Kenar Çubuğu için CSS Stilleri Ekleyin
Şimdi, uygulamaya, kenar çubuğuna görsel efektler veya animasyonlar ekleyecek bir CSS stil sayfası ekleyin. Adlandırılmış bir dosya oluşturun sidebar.cssve proje yapınıza göre bir dizine koyun ve headuygulamanızın bölümüne bağlayın.
<link rel="stylesheet" href="sidebar.css">
3. Adım: Kenar Çubuğunu Genişletmek veya Daraltmak için JavaScript Ekleyin
Şimdi, özelliğin kenar çubuğunu göstermesini veya gizlemesini sağlayacak uygulamaya bir JavaScript dosyası ekleyin. Adlandırılmış bir dosya oluşturun sidebar.jsve proje yapınıza göre bir dizine koyun ve headuygulamanızın bölümüne bağlayın.
<script src="sidebar.js"></script>
Sonuç
Tebrikler! Web teknolojilerini kullanarak özel daraltılabilir kenar çubuğunuzu nasıl oluşturacağınızı öğrenmeyi tamamladınız. Devam edin ve ihtiyaçlarınıza göre özelleştirerek çarpıcı kenar çubukları oluşturun ve ekran görüntülerini yorumlar bölümüne gönderin.
Bu gönderiyi okumaktan zevk aldıysanız ve sizin için yararlı bulduysanız, lütfen alkışlayın, arkadaşlarınızla paylaşın ve gelecek gönderilerimden haberdar olmak için beni takip edin. Benimle LinkedIn üzerinden bağlantı kurabilirsiniz .
Suggested posts
Tehdit Avı için OSINT'in Toplanması
Merhaba, siber meraklıları! Tehdit avı için OSINT serisine tekrar hoş geldiniz. İlk makalede, size OSINT'e genel bir bakış ve onun tehdit avlamadaki önemi hakkında bilgi verdim.
Gezegeni Nasıl Kurtarır ve Para Kazanırsınız?
Kaç kez bir plastik şişeyi, cam kavanozu, alüminyum kutuyu veya yeşil enerji paketini iki kere düşünmeden çöpe attınız? Kaç kez geri dönüşüm karşılığında bir şey alabilmeyi diledin? Çoğu insan gibiyseniz, cevap muhtemelen birçok kez. Geri dönüşüm genellikle herhangi bir acil veya somut fayda sağlamayan bir güçlük, angarya veya görev olarak görülür.
Related posts
Tasarımda iki yıl - İyi, kötü ve çirkin…
"Hey Siri, Olivia Dean'in Me Dive oyununu çal." Nijerya, Akure'deki Future Academy Africa'da stajıma başladığımda Mayıs 2021'di.
İşyeri Devrimi: En İyi Uzmanlar Hibrit ve Uzaktan Çalışmayı Tartışıyor
Günümüzün hızla gelişen iş ortamında, hibrit ve uzaktan çalışma kavramı benzeri görülmemiş bir ivme kazandı. Şirketler, çalışanlarının değişen ihtiyaç ve beklentilerine uyum sağlamaya devam ederken, çeşitli alanlardan uzmanlar bu dönüştürücü çalışma biçiminin faydalarını, zorluklarını ve geleceğini tartışmak için bir araya geldi.
Yavaş Erozyon: İnsanların Kariyerlerinde Boşa Harcadıkları Yolları Ortaya Çıkarma
Günümüzün hızlı tempolu ve rekabetçi dünyasında, kişinin kariyeri kişisel gelişim, finansal istikrar ve genel yaşam memnuniyetinde önemli bir rol oynamaktadır. Bununla birlikte, birçok kişi profesyonel yaşamlarında giderek tükenmekte olan amansız bir durgunluk ve tatminsizlik döngüsüne kapılmış durumda.