Şimdi bu yayını okuyan herkese iyi günler. Bugün size hiçbir web kaynağının onsuz yapamayacağı site oluşturma araçlarından birinden bahsetmek istiyorum. Bu site menüsü veya dedikleri gibi site haritası. Bugün, menünün sonsuz çeşitlilikte türü ve alt türü var.
Çevrimiçi mağazaların, blogların, eğitim hizmetlerinin ve diğer kaynakların geliştiricileri, giderek daha fazla yeni ve olağandışı haritalar deniyor ve yaratıyor. Makaleyi okuduktan sonra, her tür gezinme çubuğunun hangi ana gruplara ayrıldığını öğrenecek, her birini deneyebilir ve ayrıca bir html sitesi için menü kodunun nasıl yazılacağını öğreneceksiniz. Şimdi işe başlayalım!
Gezinme çubuğu oluşturmak için araçlar
İşaretleme dilinde menü oluşturmanın birkaç yolu vardır. Ana konseptleri sırasız bir liste kullanmaktır. Bu nedenle, her zamanki html 4'ümüzde geliştiriciler sayfaya etiketler yazarlar.
- ve
- .
Önceki yayınlarda tartışıldığı gibi, eşleştirilmiş öğe
- sırasında madde işaretli bir liste oluşturur
- - listenin bir öğesi. Anlaşılır olması için basit bir menünün kodunu yazalım:
Navigasyon Site navigasyonu
- ev
- haftanın haberleri
- teknolojik gelişmeler
- Sohbet odası
Bununla birlikte, platformun ortaya çıkmasıyla birlikte, biçimlendirme dili ek etiketlerle desteklenmiştir. Bu nedenle modern web sitelerinin menüsü özel bir tasarım kullanılarak oluşturulur. etiket< menü>... Kullanımda, bu öğe madde işaretli listelerden farklı değildir.
bir yerine < ul> reçete < menü>... Ancak, işin yanından değerlendirildiğinde önemli farklılıklar ortaya çıkıyor. Böylece, ikinci örnek, arama programlarının ve robotların çalışmasını hızlandırır. Sitenin yapısını analiz ederken, bu kod parçasının site haritasından sorumlu olduğunu hemen anlarlar.
Yatay, dikey ve açılır menüler vardır. Bazen gezinme çubuğu bir resim olarak tasarlanır. Teknoloji segmenti genişledikçe, web servisleri duyarlı hale getirildi, yani. sayfa yapısı, cihazın ekran boyutuna otomatik olarak uyum sağlar. Listelenen menü gruplarını ele alalım.
Yatay bir gezinme modeli oluşturalım
Bu tür navigasyon en popüler olanıdır. Panel yatay olarak tasarlandığında, tüm menü öğeleri sayfa üstbilgisinde veya "altbilgide" bulunur (bazen gezinme öğeleri çoğaltılır, aynı anda hem yukarıda hem de aşağıda görüntülenir).
Örnek olarak, menü öğeleri css (basamaklı stil sayfaları) kullanılarak dekore edilecek veya daha doğrusu dönüştürülecek yatay bir panel oluşturacağız. Böylece, her bir eleman eğimli bir dikdörtgen içinde olacaktır. İlginizi çekti mi?
Dönüşüm için, adında bir css özelliği kullanıyoruz. dönüştürmek... Dönüşümü belirtmek için yerleşik işlevi kullanın çarpıkX, burada eğim açısı derece olarak gösterilir.
Ne yazık ki, her tarayıcı, belirtilen standartlara rağmen bu özellik ile kendi tarzında çalışır. Bu nedenle, bunu belirtmek için özel önekler oluşturulmuştur veya oluşturulmuştur:
- -ms- (Internet Explorer)
- -o- (Opera)
- -webkit- (Chrome, Safari)
- -moz- (Firefox)
Ve şimdi edindiğimiz bilgileri bir örnek yazmak için uygulayacağız.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 Yatay çubuk
Yatay çubuk
Ve şimdi dikey olarak. dik dedim!
İkinci program için önceki kodu temel alacağız. Dikey menü öğelerimin eğimli değil yuvarlak olmasını istedim.
Bunun için bir tane daha css özelliği kullandım sınır yarıçapı.
Önceki makalelerde, bu parametreyle zaten çalıştım, bu yüzden işleyişini anlamada zorluk olmayacağını düşünüyorum.
Dikey panel
Gördüğünüz gibi, bu koddaki ana değişiklik, bir beyannamenin olmamasıdır. ekran: satır içi blok aslında, navigasyon öğelerinin yatay düzenlenmesinden sorumluydu.
Menüdeki alt öğeler: açılır liste
Gezinme çubuklarının ana gruplarını inceledik, ancak birkaç çeşit daha var veya daha iyisi eklentiler var.
Bazen bazı noktaların ana noktaları tamamladığı durumlar ortaya çıkar. Bu durumda, açılır listeler olmadan yapamazsınız. css araçlarıyla yapılan dönüşümlerle oluşturulurlar.
Aşağıda bu yaklaşımı uygulayan küçük bir programın kodunu ekledim.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 Açılır liste
Açılır liste
Görev
Öğeleri isteğe bağlı bir eğime sahip olan yatay bir menü yapın (Şekil 1).
Pirinç. 1. Eğik öğeler içeren menünün görünümü
Çözüm
Dönüştürme stili özelliği, öğenin dönüştürülmesinden sorumludur; değeri olarak, istenen eğimi ayarlayan skewX işlevi kullanılır. Eğim açısını derece olarak ayarlamak daha kolaydır, örneğin 30deg, dikeyden 30º'dir. Dönüşüm aynı zamanda tüm alt öğeleri de etkiler, bu nedenle öğenin içindeki metin de eğri olacaktır, bu da okunabilirliği ve güzelliğini en iyi şekilde yansıtmaz. Bu nedenle eğimi tekrar metne uygulamak önemlidir, ancak diğer yönde, bunun için sadece derece değerinin önündeki işareti değiştirmek yeterlidir.
Tarayıcılar transform özelliğini ağırlıklı olarak kendi önekleriyle destekler, bu nedenle stillerde çok yönlülük için Firefox için -moz-, Safari ve Chrome için -webkit-, Opera ve -ms için -o- ekleyerek aynı değerle birden çok kez tekrarlamalısınız. - örnek 1'de gösterildiği gibi Internet Explorer tarayıcısı için.
Örnek 1. Bir menü öğesini yatırma
HTML5 CSS3 IE Cr Op Sa Fx
Menü - Joker
- pazuzu
- palpatine
- doktor kıyamet
Bu örnekte, madde işaretli bir liste kullanılarak yatay bir menü oluşturulmuştur. Listeyi tam olarak yatay yapmak için stiller, li öğesine satır içi blok değerine sahip bir görüntüleme özelliği ekler. Skew için, transform özelliği bir skewX işlevi ve -30º değeriyle uygulanır. Bu özellik, liste içindeki bağlantılara da uygulanır, ancak 30º'lik bir pozitif değerle, bu, harflerin eğik değil, doğru görüntülenmesini sağlar.
Chrome, Safari ve Firefox tarayıcıları blok veya satır içi blok öğeleri için transform özelliğini kullanır, bu nedenle bağlantılar blok değeriyle görüntülenecek şekilde ayarlanır.
Görev
CSS ve HTML araçlarıyla açılır menü oluşturun.
Çözüm
İlk önce bir liste oluşturalım, yatay olarak yerleştirelim ve stillendirelim. Bu ana menü olacak ve ardından öğeleri için bir açılır menü yapacağız.
Aşağıya doğru açılan menü
Şöyle bir listemiz var:
Şekil 1. Hazırlık çalışması.
Lütfen dikkat: üzerine geldiğinizde bağlantının stili değişir. Bu, hover sözde sınıfı kullanılarak gerçekleştirilir. Bu sözde sınıf, fare düğmesine basılmadığında imleç üzerine getirildiğinde öğenin stilini ayarlar. Bir düğme tıklaması varsa, bu başka bir sözde sınıftır.
Şimdi problemimizin çözümüne geçelim. "Hizmetler" öğesi için bir açılır menü yapalım, açılır bölümler ekleyelim: "Satın Al", "Sat", "Değişim". Bu öğeler, etiketin içine yerleştirilmiş ayrı bir listedir.
-
Bu listeyi oluşturalım ve görünümünü anlatan stiller ekleyelim.
Aşağıya doğru açılan menü
Şimdi şöyle bir listemiz var:
Şekil 2. Hazırlık çalışması. Bu kesinlikle istediğimiz şey değil. Varsayılan olarak, bu liste gizlenmeli ve yalnızca fareyle üzerine gelindiğinde görünür hale gelmelidir. Kural kuralını kullanarak bir öğeyi gizleyebilirsiniz (ekran: yok). Ve imleci üzerine getirdiğinizde, kuralları tekrar görünür hale getirerek etkinleştirmeniz gerekir (ekran: satır içi blok).
Aşağıya doğru açılan menü
Şimdi menümüz kayboluyor ve yeniden görünüyor, ancak mevcut blokların önceden belirlenmiş sınırlarını değiştirmeden mevcut öğelerin üstünde görünmesini istiyoruz.
Bir elemanın diğer elemanların gösterimini etkilemeden gösterilebilmesi için mutlak bir değerle konumlandırılması gerekir.
Aşağıya doğru açılan menü
Burada ne yaptık:
- konumlandırma kuralı (konum: göreceli;). Bu, iç içe listenin mutlak konumunun koordinatlarının raporunun ekranın köşesinden değil, bu bloğun sol üst köşesinden başlaması için yapılır.
- Üst öğeye eklendi
- kural (yükseklik: 20 piksel;). Açılır listeyi konumlandırmayı kolaylaştırmak için bir yükseklik verdik.
- Açılan kutunun mutlak konumunu (konum: mutlak;) ayarlayın ve koordinatları ayarlayın: üst ve sol.
Açılır menü artık düzgün çalışıyor.
Şekil 3. Son sürüm. Elbette burada açılır menünün daha güzel bir görünümünü yapabilirsiniz ama bizim görevimiz çerçevesinde bu kadarı yeterli.
Eğitim sorunu çözüldü. Hoşçakal.
Sitede fareyle üzerine gelindiğinde açılan yatay menüler görmek nadirdir, ancak bunlar çok güzel ve işlevseldir. Veya dedikleri gibi - kullanılabilir. Bugün saf css kodunu kullanarak kullanılabilir bir açılır yatay menü oluşturacağız. İnsanların bu etkiyi elde etmek için javascript kullandığını sık sık fark ettim. Aslında her şey ancak CSS ile yapılabilir. CSS'deki açılır yatay menüler için iki seçeneğe bakalım. Bir seçeneğin olduğunda iyi, bence kabul ediyorsun.
Basit bir yatay menüye ihtiyacınız varsa. Yaratılışla ilgili makaleyi okuduk. Temel bilgilerde uzmanlaştıktan sonra açılır menünüzü oluşturmaya başlayın.
Seçenek 1 - Açılır yatay menü
Netlik için aşağıdaki ekran görüntüsüne bakın. Muhtemelen bu yatay menü yapısına aşinasınızdır.
Daha fazla netlik için HTML menü yapısına bir göz atalım. Menünün yatay konumu ve geçerliliği tam olarak ne elde edildiğinden emin olalım. Menü css yapısı:
Alt menü öğelerini gösterme ve gizleme CSS: ul> li: hover ul ile yapılır. Yani, oldukça basit. Bu anahtar ile tüm alt menülerin davranışını tanımlayabilirsiniz. Normal bir yatay menü oluştururken display:block'a ek olarak, arka plan rengi vb. gibi başka stiller ekleriz. Normal bir menü ile bir açılır menü arasındaki tek fark, iç içe UL'ler tasarlamamamızdır. Gezinmekte olan LI'ye bağlı öğeyi takmanız gerekir (UL> LI: vurgulu).
Şimdi CSS koduna bir göz atalım:
#başlık (yükseklik: 120 piksel; konum: göreli; arka plan: şeffaf url (header_bkg.png) tekrar-x kaydırma üst orta;) #nav (kenar boşluğu: 0 piksel; dolgu: 0 piksel; konum: mutlak; üst: 70 piksel; ekran: blok ;) #nav> li (list-style-type: yok; kayan nokta: sol; ekran: blok; kenar boşluğu: 0px 10px; konum: göreceli; dolgu: 10px; genişlik: 100px;) #nav> li: vurgulu ul (ekran : blok;) #nav> li: vurgulu (arka plan rengi: # 808080; -moz-border-radius: 10px; -webkit-border-radius: 10px;) #nav li ul (marj: 0px; dolgu: 0px; görüntüleme: yok;) #nav li ul li (liste stili-türü: yok; kenar boşluğu: 10px 0 0 0;) #nav li ul li a (ekran: blok; dolgu: 5px 10px; renk: # A2E200; metin- dekorasyon: yok;) #nav li ul li: fareyle üzerine gelin (arka plan rengi: # 606060; -moz-border-radius: 5px; -webkit-border-radius: 5px;) #nav li span (imleç: işaretçi; kenar boşluğu : 0px 10px; yazı tipi ağırlığı: kalın;)
İşte saf CSS koduyla bunu nasıl yapabileceğiniz. Şimdiye kadar kafam ıslanmadı, JavaScript'i ne için kullanmalı, bunun dışında.
Seçenek 2 - yatay menü + IE6 çözümü
Seçenek 1'in IE6'da çalışmayacağını unutmayın. IE6 ile menü uyumluluğu için çözüm, bir parça js kodudur. Daha da önemlisi, bir menü oluşturmak. Aşağıda, gelecekteki menünün bir ekran görüntüsü verilmiştir:
Menü yapısı ilk sürüme benzer, bu yüzden kodun kendisine geçelim.
#menu (dolgu: 0; kenar boşluğu: 0; yazı tipi boyutu: %100; yazı tipi ailesi: Georgia;) #menu li (liste stili: yok; kayan nokta: sol; yükseklik: 33 piksel; dolgu: 0; kenar boşluğu: 0 ; genişlik: 150 piksel; metin hizalama: merkez; arka plan: # 171717; konum: göreceli; üst dolgu: 12 piksel;) #menu li ul (liste stili: yok; dolgu: 0; kenar boşluğu: 0; genişlik: 150 piksel; görüntü: yok; konum: mutlak; sol: 0; üst: 45 piksel;) #menu li ul li (kayan: yok; yükseklik: 33 piksel; kenar boşluğu: 0; genişlik: 150 piksel; metin hizalama: merkez; arka plan: # 7F7F7F; ) #menu li a (ekran: blok; genişlik: 150 piksel; yükseklik: 33 piksel; renk: #fff; metin dekorasyonu: yok;) #menu li: hover ul, #menu li.jshover ul (ekran: blok;) # menü li: vurgulu, #menu li.jshover (arka plan: # 424242;)
JS - IE6 için çözüm
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
- listemiz bir bağlantı içerecektir:
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ı tipi 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:
Belgenin adı
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
- Liste öğelerinin birbiri ardına yerleştirilmesi için değeri satır içi olarak ayarlamanız gerekir.
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
- alt maddelerle ilgili bir üst bağlantı içeren. Artık gelecekteki gezinme çubuğumuz için net bir yapıya sahibiz:
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
- liste tekrar bir blok elemanına dönüştürüldü:
#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: 30 piksel;) 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 yok sayılacak ve listeyi takip eden içerik kaydırılacaktır. 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;)
- - listenin bir öğesi. Anlaşılır olması için basit bir menünün kodunu yazalım:
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?