Son zamanlarda bazı web siteleri Bu Tugay ve Hepiniz aşağı kaydırıldığında yeniden boyutlandırılan dinamik ve animasyonlu bir menü kullanmaya başladı. İçerik için daha fazla alan sağlamak için ana gezinmeyi en aza indirgemek. Bu öğreticide, bu menüyü HTML5, CSS3 ve jQuery ile nasıl oluşturabileceğinizi açıklayacağım.
Bu tür bir menü tüm içeriğiniz boyunca içeriğinize özel bir odaklama yapmak istiyorsanız harikadır ve aynı zamanda bir kullanıcının bir web sitesine yaptığı ilk ziyarette daha büyük ve daha etkili bir gezinme oluşturmanızı sağlar. Web sitenizin markasını veya logosunu, yukarıdaki kat görünümü için harika bir şekilde daha iyi gösterebilirsiniz; ve kullanıcıyı bir ziyarette meşgul ettikten sonra, daha küçük ve en aza indirilmiş bir versiyon, kullanıcının esas olarak içeriğinize odaklanmasını sağlamak için dikkatlice gizlenir.
Bunu yapmanın çeşitli yolları var. Bu öğreticide, logonun yanı sıra ilk genişliğin basitleştirilmiş bir versiyonunu oluşturarak, tam genişlikte bir sabit menü çubuğunun nasıl oluşturulacağını açıklayacağım. Tercih ederseniz logo görüntüsünü, baş harfleri veya bir simge gibi logonuzun başka bir varyasyonuna göre değiştirebilirsiniz, ancak tutarlılığın burada gerçekten önemli olduğunu unutmayın, böylece kullanıcı öğenin nasıl değiştiğini ve ana amacının nasıl olduğunu anlayacaktır. hala orijinal olanıdır; web sitesinde geziniyor.
Başlamadan önce demoyu kontrol et veya kaynağı buradan indirin .
İhtiyacımız olan temel HTML kodunu oluşturarak başlayacağız. Başlangıç noktası için gerçekten basit bir HTML5 yapısına yapışacağız.
How to create a dynamic top bar | Webdesigner Depot İlk HTML kodumuzun tamamlandığına göre, menü için kodun yanı sıra HTML dosyanızın başındaki diğer ayrıntıları da ekleyeceğiz.
How to create a resizing menu bar | Webdesigner Depot Hadi o menüyü küçük alalım!
Yolun sonu.
In our
: dosya oluşturucuyu tanımlamak için yazarın meta etiketini ekledik; Bundan sonra, HTML dosyanızdaki hemen hemen her elemanı sıfırlayacak olan Eric Meyer'in ünlü reset.cs'lerini dahil ettik ve size daha temiz ve kolay bir belge sunacağız. Ve jQuery'yi daha sonra kullanacağımızdan beri, kafa elemanımızın son satırında jQuery CDN'si aracılığıyla aktarıyoruz.Belgeyi olabildiğince basit tutmak için çoğu dosyaya sıcak bağlantı yaptım, ancak tercih ederseniz, tüm bu dosyaların en son sürümlerini yükleyip bunları HTML dosyanız boyunca yerel olarak kullanabileceğinizi ve sürüm uyumluluklarıyla ilgili olası sorunları önleyebileceğinizi unutmayın. gelecekte bu dosyalardaki değişiklikler.
Bizim içinde
etiketini, varsayılan HTML5'i kullandık