Yatay CSS menüsü nasıl yazılır? CSS - düzen tasarımcıları için yatay menü. Bölümler içeren yatay menü
Bu dersten başlayarak, popüler düz stili kullanarak siteyi sıfırdan düzenlemeye başlayacağız. Bu konu çok kapsamlı ve buna birden fazla ders ayıracağız. Pratik ne anlama geliyor?
Serbest çalışan borsada tek taraflı bir site düzenine ilişkin taleplerinizin reddedildiği açıktır. Vekil size .psd şeklinde bir düzen verdi ve sizden HTML tarafını aydınlatmanızı istedi. Düzen tasarımcısının da düzeni resimlere ayırması gerekiyor, ancak bu adımı atlıyoruz, geri kalan zaman Photoshop'ta harcanacak. Bu konuda Photoshop'taki temel dersleri bağımsız olarak keşfedebilirsiniz.
Milletvekilinin nazik bir insan olduğu ve bize düzeni verdiği ve daha sonra resimleri kestiği ortaya çıktı. Bir HTML sayfası oluşturmak için şunlara ihtiyacımız var: bir .psd düzeni, resim içeren bir klasör, Photoshop, Notepad++ ve bir tarayıcı.
Düzenden bahsediyoruz, ancak bu yalnızca tam teşekküllü bir HTML sayfası oluşturabileceğimiz bir resim.
Düzenimizin klasik düz bir tasarım olduğunu lütfen unutmayın. Düz tasarım - bu "düz" anlamına gelir, burada hacimsel gölgeler, degradeler ve diğer "çanlar ve ıslıklar" elde edemezsiniz.
Düzeni Photoshop'ta açıyoruz ve gerekli tüm bilgileri alıyoruz - renk, yazı tipi, boyut ve kodu yazmaya başlıyoruz, önce logo ve gezinme menüsünden oluşan sitenin başlığına gidiyoruz. Sitemizin her cihaza veya ayrı ekrana uyumlu olacağı anlaşıldığından tüm boyutlar % ve em olarak belirtilmektedir.
Web sitesi başlık düzeniBaşlığımızın bir HTML tarafını ve ayrıntılı düzenini oluşturalım. Başlık yerine eşleştirilmiş başlık etiketinin ortasına yazın.
- Golovna
- Portföy
- Benim hakkımda
- Temas etmek
CSS stili olmadan başlık, olması gerekenden tamamen farklı görünür. Style.css dosyasında başlığın düzen ile tutarlı görünmesi için farklı otoriteler için seçiciler yazacağız.
Ana noktalara bakalım. Logo ve gezinme menüsü tek satırda görünür. Div'deki logolu kayan nokta, kayan nokta olarak ayarlanmıştır: left; Gezinme menüsü artık logonun sağında olacak. Menü öğeleri tek satırda görüntülenir - ekran: satır içi blok; - koduna boş bir div ekleyerek sarmalamayı temizleyebilirsiniz, stillerde açıkça şu şekilde yazılmıştır - .clear(clear:both;)
style.css dosyası için web sitesi başlık kodu:
Vücut (
yazı tipi ailesi: "Lato", Verdana;
yazı tipi boyutu: %100;
arka plan: #fff;
}
.dürüm
{
kenar boşluğu: 0 otomatik;
genişlik: %70; /* tarayıcı pencerenize gidin */
}
.başlık(
dolgu: 1,3em 0em; /* metnin yanındaki alanlar */
}
.logo(
şamandıra: sol; /* logonun etrafına sarın */
}
.logo a (
Ekran bloğu; /* bloğa yeniden atama */
}
.nav(
Sağa çık; /* logonun etrafına sarın */
üst kenar boşluğu: 0,82em;
}
.nav > ul > li (
ekran:satır içi blok; /* satır bloğuna yeniden atama */
}
.nav > ul > li.active a(
arka plan: #d0a5a5;
renk: #ffffff;
}
.nav > ul > li > a (
Ekran bloğu;
yazı tipi ailesi: "Lato", sans-serif;
yazı tipi boyutu: 1,1em;
metin dönüşümü: büyük harf;
dolgu: 0,5em 1em;
renk: #444;
-webkit geçişi: 0,9 saniye; /* yumuşak bir geçiş */
-moz-geçiş: 0,9s;
-o-geçiş: 0,9s;
geçiş: 0,9 saniye;
}
.nav > ul > li > a:hover (
renk: #fff;
arka plan: #d0a5a5;
}
Web sitesi başlık düzeni için HTML kodu:
Pug "Vadi" portföyü
- Golovna
- Portföy
- Benim hakkımda
- Temas etmek
/* yuvarlatılmış */
Sıfırdan bir web sitesi düzenleme sürecinde web sitesi için hazır başlığı kaldırıyoruz.
Merhaba, blogumun okuyucuları! Bugünkü makalemiz düzen tasarımcıları için daha da ilginç olacak. Çünkü bugün basit bir yatay menü oluşturmak için yanınızda olacağız. Doğrudan sayfa düzenine geçmeden önce, makalenin konusunu seçmeye karar verenler hakkında birkaç söz söylemek istiyorum.
Aslında her şey basit, site için son dersin konusunu düşündüğümde, düzen tasarımı hakkındaki bilgilerimi düşünmeye ve analiz etmeye başladım, bu yüzden düzen tasarımcısı olmanın ilk aşamasında tökezlemek zorunda kaldım, ki bu benim için en zoruydu, zekice tüm galusiler için vb. İnsanların bir düzen tasarımcısı olarak kariyerlerine başlarken nelerden yararlanabilecekleri konusunda daha bilgili olabilmek için tüm bu yiyecekleri kendime koydum. Ve özellikle benim için, düzeni yazmaya başladığımdan beri, en çok çeşitli menülerin düzeniyle ilgileniyordum, özellikle de zengin menü söz konusu olduğunda. Ve bugün menüden ve daha spesifik olarak yatay menüden bahsediyoruz. Haydi başlayalım!
Yatay menümüzün düzenine başlayalım!Kolayca tahmin edebileceğiniz gibi, önce standart düzende bir HTML sayfası oluşturmamız ve önüne bir stil dosyası eklememiz gerekiyor. Bu konuya daha fazla değinmeyeceğim, çünkü yeni başlamadığınızdan eminim, böylece size vücut ile kafanın ve stillerin nasıl bağlantılı olduğunu açıkça anlatabilirim. Ayrıca css dosyasındaki menümüz için stillere ek olarak stilleri sıfırlamak ve tüm tarayıcılarda aynı görünümü elde etmek için en basit sıfırlamayı yazacağımı da söyleyeceğim. En basit sıfırlamam şöyle görünüyor:
Şimdilik stilleri sıfırlamaktan bahsetmeyeceğiz, çünkü özünde bu başka bir yazının konusu, açıklama kodu hakkında bilmeniz gereken tek şey, bu kodun yazacağımız, sıfırlayacağımız tüm sayfa öğeleri için gerekli olduğudur. Kenar boşluğu ve dolgunun yanı sıra sayfamızın tüm tarayıcılarda aynı görünmesini sağlamak için çalışmamız gerekiyor.
Peki bu aşamada elimizde ne var? Standart düzende bir html sayfamız var:
Yatay menü
Ve bu sayfaya bağlı bir stil dosyamız (veya style.css) var, bunun yerine şunu kullanın:
Bir sonraki adım menümüz için HTML işaretlemesi oluşturmak olacaktır.
Menü için bir düzen oluşturmaBizce HTML5'te ortaya çıkan yeni etiketi inceleyeceğiz, trendi ve standardı takip etmek için hemen yeni etiketleri benimsemenizi tavsiye ederim. Kendi düzenleri var, bu yüzden çok erken, tıpkı düzen tasarımcılarının tablo düzeninden blok düzenine geçtiği gibi, yine de onlara geçmeniz gerekecek, böyle bir gerçekliğin trendi takip etmesi daha iyidir!
Zaten yeni HTML 5 etiketlerini desteklemekten bahsettiğimiz için, eski tarayıcılarda bununla ilgili sorun yaşamamamız için, belgemizin özel bir kitaplık - html5shiv içermesi gerekiyor. içine sokmamaya çalışın
sayfanızın bölüm başlığını aşağıdaki kodla kullanın:
Aşağıdaki etiketlerin tümü (ve HTML5'te bulunan diğer etiketler) eski tarayıcılar tarafından normal şekilde ayrıştırılacaktır.
İşaretlememize dönelim. Daha sonra etiketimize bir işaretleme listesi eklememiz gerekiyor; şöyle görünür:
- Golovna
- Hakkımızda
- Portföy
- Blog
- Kişiler
Bu nedenle, bir notla, stilleri yazmadan hemen önce başlama saatini durdurduk, böylece menümüz artık pek de fazla değil gibi görünüyor:
Yatay menümüz için yazma stilleriVe böylece, her şeyden önce, menüyü düzenlerken listeye işaretçiler eklememiz gerekiyor, açıkçası buna ihtiyacımız yok, bu yüzden bunu şu şekilde yapmalıyız:
Ul( liste stili: yok; )
Bundan sonra menümüz şu şekilde görünecek:
Menümüzün tarayıcının kenarlarına yapışması pek hoşuma gitmiyor, düzeltelim:
Bu kod ile menümüzün genişliğini ayarladık, ön ve alt kısmını 50px verdik ve ortaya taşıdık. Bir blok öğesinde genişliğin ne olduğunu bilmiyorsanız, bu öğeyi tam olarak merkeze taşımak için, yalnızca dış kenar boşluğunu (kenar boşluğunu) sağ ve sol elle otomatik değerlere ayarlamamız gerekir.
Bir sonraki adımda menümüzü yatay hale getirmemiz ve gerekli öğelere odaklanmamız gerekecek.
Menü li( kayan nokta:sol; )
Menümüzün tamamı yatay hale geldi.
Eğer öldürüldüğünüzün ve şamandıra gücünden kurtulmaya çalıştığınızın farkına varmadıysanız, bu güçle ilgili bilgileri Google'da aramanızı ve parça parça okumanızı tavsiye ederim.
Düzenin her tarafında onsuz yapamazsınız, bunu size kesin olarak söylüyorum. Peki, devam edelim!
Menü li а( display: blok;/* Blok elemanını seçin */ padding:12px 20px;/* Dahili girişi seçin */ text-decoration: none; /* alt koltuğu seçin */ color:#fff;/* rengi seçin rengi koyu olarak ayarlayın */ arka plan:#444;/* arka planı koyu renklendirin */ font:14px Verdana, sans-serif;/* yazı tipinin boyutunu ve adını ayarlayın */ )
Buradaki en önemli kurallardan biri display:block;'dır. Sağda, mesaj küçük öğeler halinde gönderildiğinden ve farklı tarayıcılarda küçük öğelere erişim zor olduğundan, mesajın bir blok öğesiyle oluşturulması ve ancak daha sonra onunla ilişkili gücün harici veya dahili olarak ayarlanması gerekir. girişler. Sizi bu bilgilerle boğmak istemiyorum ama gerçek örnekler üzerinde zamanla böyle bir vurgunun burada gelişebileceğini anlayacaksınız.
Bakalım elimizde neler var, tarayıcı tarafını yenileyelim ve işte başlıyoruz!:
Gördüğünüz gibi kötü görünüyor, prensip olarak menümüz hazır diyebiliriz. Yapılması gereken tek şey, fareyle üzerine gelindiğinde ışığı ayarlamak, aynı zamanda öğeler arasında ayırıcılar bulunan daha basit görünümlü bir menü oluşturmaktır.
Ayrı ayrı bitirelim:
Menü li( border-left:1px katı #666; ) .menu li:first-child( border-left:none; )
Burada ne yapıyorduk? Ancak puanlarımız için her şeyi çok basit bir şekilde ayarladık (
İçimizden çıkanlara bir kez daha hayret ediyorum:
Bana göre ayrılıklarla çok daha güzel.
Menü li a:hover( arka plan:#888; )
Bu sefer özel bir sözde sınıf tanıtıyorum - fareyle üzerine gelin, imleç üzerine getirildiğinde mesajın rengini şaşırtıcı bir şekilde ayarlıyoruz:
Çok havalıyım 🙂, umarım sen de benimkiyle aynı menüye sahipsindir.
Bu, bu dersin sonu, ben zaten doğacağınızdan eminim ve artık saf html ve css'de basit bir yatay menüyü nasıl oluşturacağınızı biliyorsunuz. Elbette tek seviyeli bir menü oluşturduk, avlu menüsünden biraz daha karmaşık olacak (eklenmiş bir listeyle), ancak bu zaten başka bir dersin konusu, sahip olduğum tek şey bu. İçeri gelin, size radyum vereceğim!
Karşınıza çıkan menülerle ilgili bir dersle seriye devam ediyoruz. Kendi ellerinizle css'e düşen yatay menüde.
Burada aniden boşa gittiyseniz veya karşınıza çıkan menünün farklı bir uygulamasını arıyorsanız Raja Baba bölümüne gidecektir.
Bu bölümde CSS ve HTML içeren yatay menü açıklanacaktır.
Sayfada gezinme:
Ve evet, Görevimiz:
jQuery ve Javascript olmadan ve ayrıca yığılmış tablo olmadan css listesiyle (ul li listelerinde) yatay bir menü oluşturun
Küçük 2 (aşağı açılan yatay menü)
Sağ tarafta ve ortada nasıl göründüğünü göstermek için 2 kaplamayı bir arada oluşturdum.Ekran bloğu; |
Artık koku dibe kadar yanıyor, böylece navigasyonumuz dikey hale geldi. Tekrar yatay olarak çevirmek için bir güç şarkısı eklemeniz gerekir. Örneğin, blok tipi yerine blok-satır olarak veya (float: left) olarak ayarlayın. Bu yöntemler hakkındaki raporu okuyun.
Dikey gezinmeBizden HTML5'te vikory listesiyle dikey bir menü oluşturmamızı isteyin, böylece size verdiğim düzenin aynısını daha fazla kullanabiliriz. Blokların sırasını değiştirmeye karar verdiğiniz anda kokular otomatik olarak birer birer iniyor çünkü iki blok aynı sırada duramıyor.
Artık onlara kayıt kurallarını anlatabilirsiniz. Blokların çok daha fazla gücü var, ancak küçük bir şekilde çok daha fazla gücünüz var. Örneğin şunları ekledim:
a( metin dekorasyonu: yok; renk: #fff; dolgu: 5 piksel; yazı tipi boyutu: 22 piksel; ekran: blok; arka plan: doğrusal degrade (sağa, rgba(96,108,136,1) 0%,rgba(63,76,107) ) ,1) 100%);genişlik: 200 piksel;metin hizalama: orta )
metin dekorasyonu: yok; renk: #fff; dolgu: 5px; yazı tipi boyutu: 22 piksel; Ekran bloğu; arka plan: doğrusal degrade(sağa, rgba(96, 108, 136, 1) %0, rgba(63, 76, 107, 1) %100); genişlik: 200 piksel; metin - hizala: ortala |
Menü, tıpkı skin gibi skin sitesinin bilinmeyen bir parçasıdır. Menü (veya gezinme), kitaplardaki alana benzer şekilde sitenin ana bölümlerinde hızlı bir şekilde gezinmenizi sağlar. Benzerlik özellikle site haritalarında (farklı gezinme türleri) fark edilir:
Menü farklı görünebilir. Belki yatay
Dikey
Bagatory
Menü daha da çeşitli olabilir ve çok daha farklı şekillerde sunulabilir: tablolar, bloklar, basit girişler, belki de
...birçok “dikkatli” yöntemi tahmin edebilirsiniz ve bunların çoğu blok (tablosuz) düzen ilkelerine karşılık gelir. Profesyonel çevrelerde navigasyonun sırasız listelere dayanmasının önemli olduğunu düşünüyorum.< >і< >.
Açıklamanız gereken ilk şey gelmektir, çünkü düşünmek mantıklıdır: menü posilanlarla (bölümlerle) doludur. Ve eğer sadece düşünmüyorsanız, sözlüğe bakın, örneğin Ozhegov:
Doğru yolda olduğumuz anlaşılıyor (unutanlar için anlamsal kod, mantıksal (değişimin arkasındaki) doğru kodun hemen önündedir).
Yetkililerden çılgınca yardım isteyerek şüphelere nasıl eziyet edilir. Listeler hakkında W3C:
Listeler yanıltıcı olabilir:- hizmet dışı
- sipariş taşması
- navigasyon
- randevu
Gezinme ( liste stili: yok; /* işaretleyiciler tercih edilir */ kenar boşluğu: 30 piksel; ) . gezinme li ( kayan nokta: sol; /* liste öğeleri bir satırda seçilir */ kenar boşluğu-sağ: 15 piksel; /* menüye erişim öğeler gerekli sinirlenmedi */).navigasyon li a ( display: blok; text-align: center; padding-top: 100px; * arka plan yüksek ve ortalanmış */ arka plan tekrarı: tekrarlama yok; genişlik : 200px;/* boyutlar Resimlerin tam olarak görüntülenmesi gerektiği belirtilir */ height: 50px; aksi takdirde blok modeli yorumlanır */ height: 150px; ) .navigation .chrysler a (background-image: /menu-audi. jpg); ) .navigation .bugatti a ( arka plan resmi: url(path-to/menu-bugatti.jpg); ) .