CSS Gezinme Çubuğu nedir?

CSS'de gezinme çubuğu, web sitesi tasarımında çeşitli seçicilere veya sayfa kullanıcılarına gezinme bağlantıları veya menüler sağlamak için bir arayüzde kullanılan gezinme çubuğu olarak da bilinir. Kullanıcılar bir web sitesinin içeriğini görsel bir kılavuz olarak kullanarak kolayca gezinebilirler.

c biçimli dize

Gezinme çubuğunun yardımıyla bir web sayfasının sunumunu ve stilini geliştirebiliriz ve ayrıca CSS kullanılarak açıklanan tasarım, renkler, yazı tipleri ve boşlukları da içerir. Bir CSS gezinme çubuğu, belirli bir görünüm ve işlevsellik oluşturmak için CSS özellikleri ve kuralları kullanılarak geliştirilir ve stillendirilir.

CSS Gezinme Çubuğunun Özellikleri

Gezinme çubuğunun bazı özellikleri şunlardır:

Düzen Seçenekleri:CSS'de, bir gezinme çubuğu bir web sayfasının kenarı boyunca dikey olarak yerleştirilebilir veya üst kısmına yatay olarak konumlandırabiliriz.Gezinme için bağlantılar:Menü, sitenin çeşitli sayfalarına ve bölümlerine bağlantılar içerir. Bu bağlantılarda sıklıkla düğme, metin veya simge stili bulunur.Açılır Menüler:Açılır menüler, gezinme çubuklarına eklenebilecek başka bir özelliktir. Kullanıcı bir menü öğesinin üzerine geldiğinde veya onu seçtiğinde ek bağlantılar veya seçenekler görüntülenir.Stil:CSS, tasarımcıların gezinme çubuğunun renkler, yazı tipleri, kenarlıklar ve fareyle üzerine gelme efektleri gibi görsel öğelerini değiştirmesine olanak tanır. Bu, web sitesinin genel estetiğiyle harmanlanan birleşik ve görsel olarak çekici bir tasarım üretilmesine yardımcı olur.Duyarlı tasarım:Modern gezinme çubukları sıklıkla çeşitli ekran boyutlarına ve cihazlara göre ayarlanabilen duyarlı bir şekilde tasarlanmıştır. Duyarlı tasarımın yardımıyla, masaüstü ve mobil cihazlarda navigasyonun çekici ve hoş olmaya devam edeceğini garanti edebiliriz.Etkileşim:CSS'nin yardımıyla, gezinme öğelerine tıklandığında bağlantı rengini değiştirmek gibi etkileşimli efektler eklemek için de kullanılabilir veya üzerine gelindiğinde vurgu efektini de gösterebiliriz.

CSS gezinme çubuğunun yardımıyla kullanıcı deneyimini geliştirebilir ve ziyaretçilerin bir web sitesinin içeriğinde gezinmesini kolaylaştırabiliriz, dolayısıyla bu, web tasarımının çok önemli bir parçasıdır.

Örnek

CSS kullanarak nasıl yatay gezinme çubuğu oluşturabileceğimize dair basit bir örnek alalım:

 /* Basic styling for the navigation bar */ .navbar { background-color: #333; /* Background color */ overflow: hidden; /* Clear floats */ } /* Style for navigation bar links */ .navbar a { float: left; /* Float the links to the left */ display: block; /* Display links as blocks */ color: white; /* text color */ text-align: center; /* Center-align the text */ padding: 14px 16px; /* Padding around the links */ text-decoration: none; /* Remove underline from links */ } /* Change color on hover */ .navbar a:hover { background-color: #ddd; /* Background color on hover */ color: black; /* Text color on hover */ } <a href="#home">Home</a> <a href="#about">About</a> <a href="#services">Services</a> <a href="#portfolio">Portfolio</a> <a href="#contact">Contact</a> 

Çıktı:

Bu örneğin yatay gezinme çubuğunda beş bağlantı oluşturuluyor: 'Ana Sayfa', 'Hakkında', 'Hizmetler', 'Portföy' ve 'İletişim'. Gezinme çubuğunu, bağlantıları ve fareyle üzerine gelme efektlerini biçimlendirmek için temel CSS özelliklerini kullandık. Tercih ettiğiniz tasarım renklere, yazı tiplerine, dolgulara ve diğer stillere yansıtılabilir.

CSS Gezinme Çubuğunun Sınırlaması

CSS gezinme çubuğunun bazı sınırlamaları vardır ve bunlardan bazıları şunlardır:

Sınırlı Etkileşim Karmaşıklığı:CSS basit vurgulu efektler ve geçişler üretebilirken, JavaScript'in birden fazla seviyeye sahip iç içe açılır menüler gibi daha karmaşık etkileşimli özellikler uygulaması gerekebilir.Tarayıcılar Arası Uyumluluk:Farklı web tarayıcıları CSS kurallarını farklı şekilde yorumlayabilir ve böylece gezinme çubukları farklı görünebilir ve farklı davranabilir. Tüm tarayıcılarda tek tip tasarım sağlamak zor olabilir.Duyarlı Tasarımın Zorlukları:Çeşitli ekranlarda ve cihazlarda iyi çalışan bir gezinme çubuğu oluşturmak zor olabilir. Gezinme çubuğunun düzenini çeşitli ekran çözünürlüklerine göre değiştirmek için sıklıkla medya sorguları ve ek CSS kuralları gerekir.Sınırlı Animasyon:CSS temel animasyonları işleyebilir ancak düzgün kaydırma gibi daha karmaşık animasyonlar veya efektler oluşturmak için JavaScript veya CSS kitaplıklarına ihtiyaç duyulabilir.Karmaşık stil:Gezinme çubukları için son derece benzersiz ve karmaşık tasarımlar oluşturmak, güncellenmesi zor olabilecek karmaşık CSS tekniklerini gerektirebilir.Erişilebilirlik sorunları:Tamamen CSS'den yapılan gezinme çubukları her zaman ekran okuyuculara ve diğer yardımcı teknolojilere yönelik yönergelere uymayabilir. Navigasyonun tüm kullanıcılar tarafından erişilebilir olmasını sağlamak için ekstra özen gösterilmelidir.

Bu dezavantajlara rağmen, CSS gezinme çubuklarının web tasarımında çok yönlülüğü ve yaygın kullanımı devam etmektedir. Ancak daha gelişmiş özellikler ve kusursuz bir kullanıcı deneyimi için bunların JavaScript ve diğer teknolojilerle desteklenmesi gerekebilir.

Yatay Gezinme Çubuğu

Yatay gezinme çubuğu, genellikle sayfanın üst kısmında bulunan yatay bağlantı listesidir.

Bir örnek kullanarak yatay gezinme çubuğunun nasıl oluşturulacağını görelim.

Örnek

Bu örnekte şunu ekliyoruz: taşma: gizli engelleyen özellik O öğelerin listenin dışına çıkmasını engellemek, Ekran bloğu özelliği, bağlantıları blok öğeleri olarak görüntüler ve bağlantı alanının tamamını tıklanabilir hale getirir.

1/1000

Biz de şunu ekliyoruz şamandıra: sol Blok elemanlarının yan yana kaydırılmasını sağlamak için float'ı kullanan özellik.

Tam genişlikte arka plan rengini istiyorsak şunu eklemeliyiz: arka plan rengi mülkiyet

1'den 10'a kadar döngü için bash

 ul { list-style-type: none; margin: 0; padding: 0px; overflow: hidden; background-color: lightgray; } li { float: left; } li a { display: block; color: blue; font-size:20px; text-align: center; padding: 10px 20px; text-decoration: none; } .active{ background-color: gray; color: white; } li a:hover { background-color: orange; color: white; } <ul> <li> <a href="#home">Home</a> </li> <li> <a href="#">Java</a> </li> <li> <a href="#">HTML</a> </li> <li> <a href="#">CSS</a> </li> </ul> 

Sınır bölücüler

Gezinti çubuğundaki bağlantılar arasına kenarlığı şunu kullanarak ekleyebiliriz: sınır sağ mülk. Aşağıdaki örnek bunu daha açık bir şekilde açıklamaktadır.

Örnek

 ul { list-style-type: none; margin: 0; padding: 0px; overflow: hidden; background-color: lightgray; } li { float: left; border-right: 1px solid blue; } li a { display: block; color: blue; font-size:20px; text-align: center; padding: 10px 20px; text-decoration: none; } .active{ background-color: gray; color: white; } li a:hover { background-color: orange; color: white; } <ul> <li> <a href="#home">Home</a> </li> <li> <a href="#">Java</a> </li> <li> <a href="#">HTML</a> </li> <li> <a href="#">CSS</a> </li> </ul> 

Sabit Gezinme çubukları

Sayfayı kaydırdığımızda sabit gezinme çubukları sayfanın altında veya üstünde kalır. Aynısının bir örneğine bakın.

Örnek

 ul { list-style-type: none; position: fixed; width:100%; top:0; margin: 0; padding: 0px; overflow: hidden; background-color: lightgray; } li { float: left; border-right: 1px solid blue; } li a { display: block; color: blue; font-size:20px; text-align: center; padding: 10px 20px; text-decoration: none; } .active{ background-color: gray; color: white; } li a:hover { background-color: orange; color: white; } <ul> <li> <a href="#home">Home</a> </li> <li> <a href="#">Java</a> </li> <li> <a href="#">HTML</a> </li> <li> <a href="#">CSS</a> </li> </ul> <h2>Side navigation bar with height: 100%; and position: fixed;</h2> <h3>Scroll the page, and see how the sidenav sticks to the page</h3>