Son güncelleme: 27/04/2016
Gezinme çubuğu, site sayfaları arasında veya dış kaynaklara geçiş sağladığı için sitede önemli bir rol oynar. Basit bir gezinme çubuğunun nasıl oluşturulacağına bir göz atalım.
Aslında, bir gezinme çubuğu, genellikle sırasız bir liste biçimindeki bir bağlantı koleksiyonudur. Çeşitli gezinme çubukları vardır: dikey ve yatay, tek düzeyli ve çok düzeyli, ancak her durumda, her gezinmenin merkezinde bir öğe vardır. ... Bu nedenle, bir gezinti çubuğu oluştururken, bağlantı öğesinin sınırlamalarından kaynaklanan bir takım zorluklarla karşılaşabiliriz. Yani, eleman küçük harftir, yani genişliği, yüksekliği ve dolgusunu belirtemeyiz. Bağlantının genişliği otomatik olarak ihtiyaç duyduğu yeri alır.
Dikey menü
Dikey menüler için bu soruna ortak bir çözüm, bağlantıyı bir blok öğesi yapmaktır.
display:block özelliğini ayarladıktan sonra link bloğunun genişliğini, padding vb. tanımlayabiliriz.
yatay menü
Yatay menü oluşturmanın iki yöntemi vardır. Birincisi, float özelliğini kullanmak ve soldan birbiri etrafında akan bağlantılardan kayan elemanlar oluşturmaktır. İkinci yol ise display: inline-block özelliğini ayarlayarak bir bağlantı satırı oluşturmaktır.
Şamandıraları kullanma
Float kullanarak bir gezinme çubuğu oluşturma algoritması iki aşamaya ayrılmıştır. İlk adımda, bağlantıyı çevreleyen li öğesi float: left; ... Bu, listenin sağ elemanı listenin sol elemanı etrafına sarıldığında, listenin tüm elemanlarının yeterli genişlikte bir satırda düzenlenmesine izin verir.
İkinci aşama, bize genişliği, dolguyu, genel olarak, blok öğelerinin karakteristiği olan tüm işaretleri ayarlama yeteneği veren bağlantı öğesi ekranını ayarlamaktır: blok.
satır içi ve satır içi blok
Yatay bir gezinme çubuğu oluşturmak için, her bir li öğesini satır içi yapmamız, yani onu görüntüleme: satır içi olarak ayarlamamız gerekir. Bundan sonra, li öğesinde bulunan bağlantı öğesi için display: inline-block: ayarlayabiliriz:
Gezinti çubuğu - bu, programın komut arayüzünün öğelerinden biridir. Bir bölümün veya yardımcı bir pencerenin bir tür "içindekiler tablosu" dur (Şekil 1.9). Bununla birlikte, bir bölümde veya yardımcı bir pencerede bulunan bir veya daha fazla bilgiyi görüntüleyebilirsiniz.
Gezinti çubuğu, gezinme komutlarını, yani veri değişikliklerine neden olmayan, ancak yalnızca istenen bilgilere gitmenizi sağlayan komutları içerir. Kural olarak, bunlar bazı listelere geçmek için kullanılan komutlardır. Böyle bir komut çağrıldığında, çalışma alanında önceki içeriğin yerine karşılık gelen liste görüntülenir.
Örneğin, komutu çağırmanın bir sonucu olarak Depolarçalışma alanında bir depo listesi açılacaktır (Şekil 1.10).
Şekil 1.9 - Yönetilen uygulamanın Masaüstünün komut arayüzünün gezinme paneli 1C: İşletme 8 modunda Yapılandırma
Şekil 1.10 - Yönetilen uygulamanın Masaüstünün komut arayüzünün navigasyon komutunu çağırma 1C: İşletme 8
Aynı listenin veya farklı listelerin farklı kısımlarını analiz etmenin veya karşılaştırmanın gerekli olduğu durumlar vardır. Bu durumda aynı anda birkaç liste açabilirsiniz (Şekil 1.11). Biri ana pencerede, diğerleri ikincil pencerelerde.
Listeyi yardımcı bir pencerede açmak için navigasyon komutunu çağırırken tuşunu basılı tutmanız gerekir. Vardiya.
Şekil 1.11 - Yönetilen uygulamanın Masaüstünün komut arayüzünün birkaç listesinin açılmasıyla navigasyon komutunu çağırma 1C: İşletme 8
Gezinti bölmesindeki komutlar genellikle üç standart grupta bulunur (Şekil 1.12).
İlk grup - Önemli... Adı görüntülenmez, ancak bu grubun komutları kalın harflerle yazılmıştır. Burada, bu bölümde en sık kullanılan bilgilere gitmek için komutlar verilmiştir.
İkinci grup - Yaygın... Bu grubun da başlığı yoktur, komutları normal yazı tipinde görüntülenir.
Üçüncü grup - Ayrıca bakınız... Bu gruptaki komutların önüne Ayrıca bkz. başlığı gelir ve bu bölümdeki çalışma için gerekli değildir. Ama faydalı olabilirler.
Şekil 1.12 - Yönetilen uygulamanın Masaüstünün komut arayüzünün birkaç listesinin açılmasıyla navigasyon komutunu çağırma 1C: İşletme 8
Standart gruplara ek olarak, gezinme çubuğu geliştirici tarafından oluşturulan grupları da içerebilir.
Bir grup takımda Yaygın ek komut grupları mevcut olabilir. Bu tür grupların başlıkları vardır ve içlerinde bulunan komutlar sol kenardan girintili olarak görüntülenir (Şekil 1.13). Bu grupların başlıklarına tıklanarak komutlar gizlenebilir ve görüntülenebilir.
Program bölümleri birinci seviye alt sistemlerden oluşuyorsa, navigasyon panelindeki komut grupları ikinci ve alt seviyelerin alt sistemlerinden oluşur (Şekil 1.14).
Kural olarak, gruplarda bulunan ekiplerin sayısı Önemli ve Ayrıca bakınız- harika değil. Bir gruptayken Ana oldukça fazla sayıda komut olabilir. Bu nedenle, bu ekiplerin ek bir gruplaması kullanılır, bu da kompozisyonlarında gezinmeyi kolaylaştırır.
Şekil 1.13 - Yönetilen uygulamanın Masaüstünün komut arayüzünün ek komut grupları 1C: İşletme 8
Şekil 1.14 - Yönetilen uygulamanın Masaüstünün komut gruplarının ve komut arayüzünün yazışmaları 1C: İşletme 8
Kullanıcı, gezinme çubuğunun bileşimini özelleştirme olanağına sahiptir: komutlar ekleyin veya kaldırın, sıralarını değiştirin. Örneğin, takım gruplarını kaldırabilir Özellikler ve Fiyat:% s, ve komut Denge ayarlamaları gruba geç Ayrıca bakınız(şek. 1.15)... Program, kullanıcı tarafından yapılan ayarları otomatik olarak hatırlar ve bir dahaki sefere, kullanıcının yapılandırdığı gibi gezinme çubuğunu gösterir.
Şekil 1.14 - Yönetilen uygulamanın Masaüstünün komut arayüzünün kullanıcı tarafından yeniden yapılandırılması 1C: İşletme 8
Web siteniz tek bir web sayfasıyla sınırlı değilse, bir gezinme çubuğu (menü) eklemeye değer. Menü - bir web sitesinin, ziyaretçinin sitede gezinmesine yardımcı olmak için tasarlanmış bir bölümü. Herhangi bir menü, sitenin iç sayfalarına giden bağlantıların bir listesidir. Sitenize gezinme çubuğu eklemenin en kolay yolu, CSS ve HTML kullanarak bir menü oluşturmaktır.
Dikey menü
Dikey menü oluşturmanın ilk adımı madde işaretli bir liste oluşturmaktır. Ayrıca listeyi tanımlayabilmemiz gerekecek, bu yüzden ona "navbar" kimliğiyle bir id niteliği ekleyeceğiz. her eleman
Sıradaki görevimiz varsayılan liste stillerini sıfırlamak. Doldurma ve dolguyu listenin kendisinden ve madde işaretlerini liste öğelerinden kaldırmamız gerekiyor. Ardından istenen genişliği ayarlayacağız:
#navbar (kenar boşluğu: 0; dolgu: 0; liste stili türü: yok; genişlik: 100 piksel;)
Şimdi bağlantıların kendilerine stil verme zamanı. Onlara bir arka plan rengi ekleyeceğiz, metin parametrelerini değiştireceğiz: yazı tipinin rengi, boyutu ve ağırlığı, alt çizgiyi kaldıracağız, küçük girintiler ekleyeceğiz ve ekranı yeniden tanımlayacağız. satırdan bloğa eleman. Ek olarak, liste öğelerine sol ve alt çerçeveler eklendi.
Değişikliklerimizin en önemli kısmı, öğeleri engellemek için satır içi öğeleri yeniden tanımlamaktır. Artık bağlantılarımız liste öğelerinin tüm kullanılabilir alanını kaplıyor, yani bağlantıyı takip etmek için artık imleci metnin üzerine getirmemize gerek yok.
#navbar a (arka plan rengi: # 949494; renk: #fff; dolgu: 5 piksel; metin dekorasyonu: yok; yazı tipi ağırlığı: kalın; kenarlık-sol: 5 piksel katı # 33ADFF; ekran: blok;) #navbar li ( sol kenarlık: 10 piksel düz # 666; kenarlık-alt: 1 piksel düz # 666;)
Yukarıda açıklanan tüm kodları tek bir örnekte birleştirdik, şimdi dene düğmesine tıklayarak örneğin bulunduğu sayfaya gidebilir ve sonucu görebilirsiniz:
Denemek "
Fare imlecini bir menü öğesinin üzerine getirdiğinizde, görünümü değişerek kullanıcının dikkatini çekebilir. Hover sözde sınıfını kullanarak böyle bir efekt yaratabilirsiniz.
Önceki dikey menü örneğimize geri dönelim ve stil sayfasına aşağıdaki kuralı ekleyelim:
#navbar a: vurgulu (arka plan rengi: # 666; kenarlık-sol: 5 piksel düz # 3333FF;) Deneyin "
yatay menü
Önceki örnekte, çoğunlukla ana içerik alanının solunda veya sağındaki sitelerde bulunan dikey gezinme çubuğuna baktık. Ancak, gezinme bağlantılarına sahip menüler de genellikle bir web sayfasının üst kısmında yatay olarak konumlandırılır.
Normal bir liste şekillendirilerek yatay bir menü oluşturulabilir. Öğeler için görüntüleme özelliği
Menü öğelerini yatay olarak konumlandırmak için önce bağlantıları olan madde işaretli bir liste oluşturun:
Listemiz için varsayılan listeler için kullanılan stili sıfırlayan ve liste öğelerini bloktan küçük harfe yeniden tanımlayan birkaç kural yazalım:
#navbar (kenar boşluğu: 0; dolgu: 0; liste stili türü: yok;) #navbar li (ekran: satır içi;) Deneyin "
Şimdi tek yapmamız gereken yatay menümüzün stilini tanımlamak:
#navbar (kenar boşluğu: 0; dolgu: 0; liste stili tipi: yok; kenarlık: 2 piksel katı # 0066FF; kenarlık yarıçapı: 20 piksel 5 piksel; genişlik: 550 piksel; metin hizalama: merkez; arka plan rengi: # 33ADFF; ) #navbar a (renk: #fff; dolgu: 5px 10px; metin-dekorasyonu: yok; yazı tipi-ağırlığı: kalın; görüntü: satır içi blok; genişlik: 100px;) #navbar a: vurgulu (sınır yarıçapı: 20px 5px ; arka plan rengi: # 0066FF;) Deneyin "
Aşağıya doğru açılan menü
Oluşturacağımız menü, yatay gezinme çubuğunda yer alan ana gezinme bağlantılarına ve yalnızca bu alt öğelerin başvurduğu menü öğesinin üzerine fare imlecini getirdikten sonra görüntülenecek olan alt öğelere sahip olacaktır.
Öncelikle menümüz için HTML yapısını oluşturmamız gerekiyor. Ana gezinme bağlantılarını madde işaretli bir listeye koyacağız:
Alt öğeleri öğeye yuvalayarak ayrı bir listeye yerleştireceğiz
Denemek "
Şimdi CSS kodunu yazmaya başlayalım. İlk olarak, web sayfasında her zaman görünmemeleri için alt öğelerin listesini bir display: none; bildirimi ile gizlemeniz gerekir. Alt öğeleri görüntülemek için, bir öğenin üzerine gelindiğinde buna ihtiyacımız var
#navbar ul (ekran: yok;) #navbar li: vurgulu ul (ekran: blok;)
Her iki listeden de varsayılan kenar boşluklarını ve işaretçileri kaldırın. Gezinme bağlantılarına sahip liste öğelerini yatay bir menü oluşturarak kayan hale getiriyoruz, ancak alt öğeleri içeren liste öğeleri için kayan noktayı ayarlayın: yok; böylece birbirlerinin altında görünürler.
#navbar, #navbar ul (kenar boşluğu: 0; dolgu: 0; liste stili-türü: yok;) #navbar li (kayan: sol;) #navbar ul li (kayan: yok;)
Ardından, açılır alt menümüzün gezinme çubuğunun altındaki içeriği aşağı kaydırmadığından emin olmamız gerekiyor. Bunu yapmak için, liste öğelerinin konumunu vereceğiz: göreceli; ve alt öğeleri içeren bir liste konum: mutlak; ve %100 değerine sahip bir top özelliği ekleyin, böylece kesinlikle konumlandırılmış bir alt menü tam olarak bağlantının altında görünecek.
#navbar ul (ekran: yok; konum: mutlak; üst: %100;) #navbar li (kayan: sol; konum: göreceli;) #navbar (yükseklik: 30px;) Deneyin "
Üst listenin yüksekliği bilerek eklendi, çünkü tarayıcılar öğenin içeriği olarak kayan içeriği dikkate almadığından, yükseklik eklemeden listemiz tarayıcı tarafından göz ardı edilecek ve listeyi takip eden içerik sarılacak. menümüz.
Şimdi hem listelerimize stil vermemiz gerekiyor hem de açılır menü hazır olacak:
#navbar ul (görüntü: yok; arka plan rengi: # f90; konum: mutlak; üst: %100;) #navbar li: vurgulu ul (görüntü: blok;) #navbar, #navbar ul (kenar boşluğu: 0; dolgu: 0; liste stili-türü: yok;) #navbar (yükseklik: 30 piksel; arka plan rengi: # 666; sol dolgu: 25 piksel; minimum genişlik: 470 piksel;) #navbar li (kayan nokta: sol; konum: göreli; yükseklik: %100;) #navbar li a (ekran: blok; dolgu: 6 piksel; genişlik: 100 piksel; renk: #fff; metin dekorasyonu: yok; metin hizalama: merkez;) #navbar ul li (kayan nokta: yok; ) #navbar li: vurgulu (arka plan rengi: # f90;) #navbar ul li: vurgulu (arka plan rengi: # 666;)
Bu, özellikle fotoğrafların rötuşlanması ve işlenmesiyle uğraşanlar için yararlı bir materyaldir, çünkü işinizde çalışma görüntüsünün alanında hızlı bir şekilde gezinmeniz gerekir.
Öyleyse, rollerle tekrar ilgilenelim:
Photoshop senin uçağın!
Sen bir pilotsun!
Dümeniniz gezinme çubuğudur!
içindeki görüntüyü kontrol etmek için Photoshop bir gezinme çubuğu kullanıyoruz.
Gezinme çubuğu görünmüyorsa, menüde etkinleştirilmelidir. pencere(Windows) - (Gezgin) öğesini seçin.
Gezinme çubuğuna daha yakından bakalım:
Bir harfle işaretlenmiş alanda Aölçek düzenleyicisini görüyoruz.
Şu anda, görüntü ölçeklenir 81.97% gerçek boyuttan.
Buradan değerleri girebilirsiniz 0.11% önce 1600% .
Kaydırıcıyı da kullanabiliriz (harf ile işaretlenmiştir) E):
sağa sürüklemek - arttırmak, Sola - azaltmak.
Simgeye tıklayarak (harf ile işaretlenmiştir) V) Küçük adımlarla kademeli olarak azaltabiliriz.
Ve bu simge (harf ile işaretlenmiştir) İLE BİRLİKTE) artışlar. Bir harfle işaretlenmiş kırmızı kare NS, bize görüntünün ne kadarının belgede göründüğünü söyler.
Görüntüyü sürekli büyütürsek bu pencere küçülür ve küçülür.
Bu kareyi hareket ettirebiliriz - aşağıdaki gibi bir simge görünene kadar gezinme alanındaki resmin üzerine gelin:
Bu olduğunda, farenin sol düğmesini basılı tutmanız ve pencereyi görüntünün o anda ayarlamanız gereken alanına sürüklemeniz yeterlidir.
Gözlemek: kareyi yalnızca görüntünün kendisinden daha küçükse sürükleyebilirsiniz.
Ekran görüntülerine bir göz atın:
üstte - kırmızı kareyi hareket ettiremeyiz, altta sorunsuz hareket edebiliriz:
Gezinme çubuğunun kendisini de büyütebileceğimizi not etmek önemlidir.
Panelin sağ alt köşesini sürüklemeniz yeterlidir (ekran görüntüsünde kırmızı ile işaretlenmiştir):
Bu, daha fazla ayrıntı görmenizi sağlar:
Bu materyalin sizin için yararlı olacağını ve sonsuz görüntünüzde gözleriniz kapalı dolaşacağınızı umuyoruz.
İyi yolculuklar!
Avatarların psikolojideki değeri
Avatarların psikolojideki değeri
MS Word'de bir harf nasıl vurgulanır
Bir kişinin avatarı ne anlama gelir?
Kendi Twitter Anınızı Nasıl Yaratabilirsiniz?