Bir web sayfasında kullanıcılarınıza dil seçenekleri sunmak, küresel bir kitleye ulaşmak ve kişiselleştirilmiş bir kullanıcı deneyimi sağlamak açısından önemlidir. HTML, CSS ve JavaScript kullanarak dil seçeneklerini web sayfanıza sorunsuz bir şekilde entegre edebilirsiniz. Bu blog yazısında, HTML, CSS ve JavaScript kullanarak dil seçenekleri oluşturma adımlarını keşfedeceğiz. Dil seçimi imkanı sunarak kullanıcı etkileşimini artırın ve web siteniz için daha geniş bir kitleye kapılarını açın. Haydi, HTML ve JavaScript ile dil seçenekleri oluşturma dünyasına birlikte adım atalım!
Diyelim ki farklı dillerde aynı içeriğe sahip sayfalarınız var ve bunları her bir web sayfasında kullanmak veya ziyaretçilere göstermek istiyorsunuz. Çünkü dil seçeneği, küresel pazar hedefleriniz için önem teşkil eder. Eğer kullanıcı sayfanızı ziyaret ediyor ve içeriği anlayamıyorsa, o halde onunla temas kurmanız pek mümkün değildir. Bu sorunu aşmak için birden fazla dil seçeneği olan bir yapıyla hareket ediyorsunuz. Ancak ürününüzün açıklamalarının farklı dillerde de var olduğunu göstermek istiyorsunuz. O halde doğru adrestesiniz.
Aşağıdaki kod, size bir drop-down menüsü oluşturur.
HTML ve JavaScript ile ilgili açıklamalar
Bu kod, “language-container” class’ına sahip bir <div> elemanı içinde yer alan bir dil seçimi dropdown menüsünü temsil eder. İşte kodun her bir parçasının ne yaptığının açıklaması:
<select>: Bu, bir dropdown menüsü oluşturmak için kullanılan bir HTML elemanıdır. Kullanıcıların mevcut listeden bir seçenek seçmelerine izin verir.onchange="window.location.href = this.value;": Bu, dropdown menüsündeki seçilen seçenek değiştiğinde tetiklenen bir inline JavaScript olay yöneticisidir. Seçilen<option>‘ınvalueözniteliğinde belirtilen URL’ye kullanıcıyı yönlendirir.<option value="">🌐 Choose another language</option>: Bu<option>elemanı, dropdown menüsü gösterildiğinde görünen bir varsayılan seçenek olarak görev yapar. Boş birvalueözniteliğine sahiptir, bu da belirli bir URL’ye yönlendirme yapmadığını gösterir.<option value="https://advdyn.com/managed-service/">🇹🇷 Turkish</option>: Bu<option>elemanı, Türkçe için bir dil seçeneğini temsil eder.valueözniteliği “https://advdyn.com/managed-service/” olarak ayarlanmıştır, bu da bu seçenek seçildiğinde yönlendirilecek URL’yi belirtir. Emoji bayrağı “🇹🇷”, Türkçe dili görsel olarak temsil etmek için kullanılır.- Benzer şekilde, diğer
<option>elemanları da İngilizce ve Almanca gibi farklı dil seçeneklerini temsil eder.
Bu kodu kullanarak, bir kullanıcı dropdown menüsünden bir seçenek seçtiğinde, seçilen seçeneğe bağlı olarak dilin değişmesini veya farklı bir sayfaya yönlendirilmeyi sağlayabilirsiniz.
CSS ile ilgili açıklamalar
Bu kod, “language-container” class’ına sahip bir elementin CSS kurallarını temsil eder. İşte kodun her bir parçasının ne yaptığının açıklaması:
.language-container select: Bu seçici, “language-container” class’ına sahip <select> elementini hedefler. Dropdown menüsüne aşağıdaki stilleri uygular:
display: flex;: Bu, flexbox düzenini kullanarak dropdown menüsünün görüntülenme stilini belirtir.border-radius: 15px;: Bu, dropdown menüsüne yuvarlatılmış köşeler ekleyerek görsel olarak çekici bir görünüm sağlar.padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px;: Bu padding değerleri, dropdown menüsünün içinde biraz boşluk bırakarak seçenekler etrafında bir soluklama alanı oluşturur.
.language-container: Bu seçici, “language-container” class’ına sahip elementi hedefler ve aşağıdaki stilleri uygular:
display: flex;: Bu, flexbox düzenini kullanarak elementin görüntülenme stilini belirtir.justify-content: center;: Bu, içeriği yatay olarak merkezlemek için kullanılır.align-items: center;: Bu, içeriği dikey olarak merkezlemek için kullanılır.padding-bottom: 10px;: Bu, container elementi ile altındaki diğer elementler arasında bir boşluk oluşturmak için alt kenara bir padding ekler.
Bu CSS kurallarını kullanarak, dil seçimi dropdown menüsünün ve container elementinin görünümünü özelleştirebilir, istenen görsel düzeni ve hizalamayı elde edebilirsiniz.
