Saf CSS'de bir web menüsü düzeltildi. Renk çizgisinde CSS stil menüsündeki dikey menü
Saf CSS'de bir web menüsü düzeltildi. Renk çizgisinde CSS stil menüsündeki dikey menü
02.12.2016
İyi günler, sevgili okuyucular. Bugün konuyu analiz edeceğiz " yak robiti yatay menü bükülmüş HTML ve CSS". Menü, kural olarak, sitenin başlığında bulunur ve ayrıca en önemli tarafta yayınlanır, aynı zamanda denir. ana menü. Coristuvach'ların gücü göz önüne alındığında, sürekli olarak zorlayacaklar. Bunlar, nasıl geliştirdiğiniz ve menüyü hangi tasarıma yerleştirdiğiniz, dönüşümün davranışını, dönüşümü ve sitenizin genel izlenimini ve tabii ki .
Yatay menü için HTML kodu
Uzun süredir sitenin menüsü resimlerde, tablolarda, flaşta ve belki başka şeylerde soyulduysa, ancak zamanımızda bu, vicorist etiketleri "liste" ile menüler oluşturmanın en popüler ve hatta doğru yöntemidir.
Aşağıdaki kodda bir menü oluşturmak için html etiketlerinin kullanımına bir örnek:
Golovna
Hizmetler
Fiyat:% s
Kişiler
Yatay Menü için Standart CSS Stilleri
ul ( liste stili: yok; /* liste işaretçilerini kaldır*/ kenar boşluğu: 0; /* dolguyu kaldır*/ sol dolgu: 0; /* dolguyu kaldır*/ ) a ( metin-dekorasyonu: yok; /* dolguyu kaldır Metin gönder */ ) li ( float:left; /*Menü uygulaması için listeyi yatay olarak yayın*/ margin-right:5px; /*Menü öğelerine erişim ekle*/ )
Üst menüyü, özel stiller olmadan, gelecekteki güzel menünüzün çerçevesi olarak adlandırılabilecek ziller ve ıslıklar olmadan bir başlıkta hazırlamalıyız. Html ve css'inize kopyalayıp yapıştırırsanız, böyle görünecektir.
Gelecekteki menünüzün çerçevesine (şablona) alın
Her şeyi bitirmek kolaydır, açıkçası daha güzel bir marka menüsü istiyorsunuz, ancak temelleri anlamadan, html ve css'de af olmadan iyi bir menü oluşturamazsınız.
Ben yatay koyu kırmızı float:left; örneğin, görüntüleme: satır içi blok; veya ekran:esnek; , ancak vicorist yöntemini kullanmanız önerilir, daha fazla açıklama var.
Farklı stiller ve özel yogo içeren menü şablonumuzu hatırlayalım harnim.
Web sitesi için bir kenar çubuğu yatay menüsü uygulayın
Bir ara yatay menünün tasarımından bir tutam hazır uygulama getireceğim.
Siteniz için "güzel" yaratabilirsiniz ve internette sörf yapamazsınız. Yapılacak en basit şey aşağıdaki uygulamalardan birini temel almaktır.
Farklı öğeler içeren basit mavi renk menüsü
Üst menü için CSS stilleri
Alt dikişli stiller bu menü. HTML'nin üzerine, "tel çerçeve" menüsüyle aynı şey yazılır.
Ul ( list-style: none; /*liste işaretçilerini kaldırıyor*/ margin: 0; /*dolguyu kaldırıyor*/ padding-left: 0; /*dolguyu kaldırıyor*/ margin-top:25px; /* üst kenar boşluğu*/ ) a ( text-decoration: none; /*metnin arka plan rengini kaldır */ background:#30A8E6; /*menü öğesine arka planı ekle*/ color:#fff; /*rengi kaldır ayar*/ padding:10px; /*menü öğesine arka plan ekle*/ color:#fff; input*/ font-family: arial;/*yazı tipini küçült*/ border-radius:4px;/*yuvarlaklık ekle*/ yumuşak bir geçiş*/ -o-geçiş: tüm 0.3s 0.01s kolaylık; -webkit-geçiş: tüm 0.3s 0.01s kolaylığı; ) a:hover ( background:#1C85BB;/*vurgu efekti ekle*/ ) li ( float:left; /*Menüyü uygulamak için listeyi yatay olarak yayın*/ margin-right:5px; /*Menü öğelerine erişim ekle*/ )
Golovne menüsü, kırmızı küllerle renk çizgisinde roztashovane
Renk çizgisinde CSS stili menüsü
ul ( list-style: none; /*liste işaretçilerini kaldır*/ margin: 0; /*padding'i kaldır*/ padding-left: 0; /*remove padding*/ margin-top:25px; /*üst kenar boşluğunu kaldır*/ background:#FF4444;/*menü öğesine bir arka plan ekleme (bu parametreyi değiştirerek tüm menünün rengini hatırlarsınız)*/ height: 50px; / background:#FF4444;/*menü öğesine bir arka plan ekleme ( bu parametreyi değiştirerek tüm menünün rengini hatırlarsınız)*/ color:#fff; font-family: arial;/*yazı tipini değiştir*/ line-height:50px;/*menü dikey hizalama*/ ekran: blok; : tümü 0,3s 0,01s hareket hızı; /* Çalışılabilir yumuşak geçiş*/ -o-geçiş: tümü 0,3s 0,01s kolaylığı; *vurgulu üzerinde efekt ekleyin*/ ) li ( float:left; /*Listeyi gerçek olarak yatay olarak yerleştirin menü geçişi*/ )
HTML+CSS'de Widget menüsü
Uygulama için sitede görünen (açılan) ek menüsü Herhangi bir menü öğesi için, yatay menüden göndermek ve CSS stillerini değiştirmek için öğe HTML kodunun ek bir yeniden yönlendirmesini eklememiz gerekir. Stillerde, ihtiyacımız olan öğe hakkında ek rehberlik için açılan menünün görüntüsünü değiştirerek basit bir numara ekleyeceğiz. üst menü. Örneğin, "hizmetçiler" öğesini ele alalım.
Görebileceğiniz basit bir menü oluşturma örneği
Açılır menü için HTML kodu
Golovna
Hizmetler
hizmet 1
Dovga hizmeti 2
hizmet 3
Fiyat:% s
Kişiler
Açılır menünün CSS stili
ul ( list-style: none; /*liste işaretçilerini kaldır*/ margin: 0; /*padding'i kaldır*/ padding-left: 0; /*remove padding*/ margin-top:25px; /*üst kenar boşluğunu kaldır*/ background:#819A32;/*bu menüye arka plan ekleme*/ height: 50px;/*yükseklik ayarlama*/ ) a ( text-decoration: none; menü öğesi*/ color:#fff;/*renk ayarını en aza indirme* / padding: 0px 15px;/*bir kenarlık ekleme*/ font-family: arial; vertical*/ display:block; border-right: 1px solid #677B27;/*sağ kenarlık ekleme*/ 0.01s kolaylık; -webkit- geçiş: tümü 0,3 sn 0,01 sn kolaylık; / position:relative; /*Konumlandırma için konumu ayarlayın*/ ) /*Yerleştirilmiş menü için stiller* / li > ul (position:absolute; top:25px; display: none; ) /*Görünür kısmın robially eklendiği* / li:hover > ul ( display:block; width:250px; /*Menü genişliğini ayarla*/ ) li:hover > ul > li ( float:none; /*Yatay konumu ayarla * / )
Ve anlamak için, kendiniz bu kategorinin hizmetçilerinden suçluysanız, malzemeyi tanımanızı tavsiye ederim:.
Yepyeni bir yatay menü nasıl oluşturulur, şablonların serpiştirilmesi nasıl yapılır, yeni basit stiller nasıl eklenir ve şirin bir menü nasıl oluşturulur, gördüğünüz gibi bir menü nasıl oluşturulur onu olabildiğince kısaca anlatmaya çalıştım. senin siten. Anlaşılır olması için, yukarıda sunulan tüm menüleri aşağıdan seçebileceğiniz tek bir html dosyasında seçtim. Ekran görüntüsünde görebilirsiniz:
Saygı için.
Güncellemeler ile, tüm ekranlarda da kolay olabilen yatay menü hariç, sitede her şey uyarlanabilir. Çaresizce, JS'yi zorlamadan klasik navigasyona, vikonan'a saf bir tarzda bakın. De kendi tarzınızda, basit, standart bir görünümde, ancak efektlerin varlığı ile yapıldığı için birçok siteye gidebilirsiniz. Ayrıca, cep telefonlarına bakarsanız, düğme otomatik olarak görünecektir. Sağ Taraf, basıldığında, yazı tipi düğmeleri tam genişlikte görünmeyecek, ancak her şey düzgün, aynı taraftan yazı tipi düğmeleri görsel olarak birbirine bakacak.
Anlayabileceğiniz gibi, burada en basit HTML listeleri kazanıldı, hepsi bu chi іnshої kategorilerinin geçişi için gerekli olduğu bilinen tüm listeleri görüntülemek için. Konsept, navigasyon listesini yatay bir görünümde düzenlemenin güzel olduğu gerçeğinde yatmaktadır, ancak mobil olduğunda, malzemeye ekli resimlerde gösterildiği gibi otomatik olarak dikey hale gelecektir.
Cilt talebine eklenir eklenmez, perakendeci bu konuyu veya tematik olarak daha uygun olan rakamları değiştirebilir. Menünün kendisi, nadiren mümkün olan, sadece her biri seçilerek koyu yeşil bir renk şemasında oluşturulmuştur. Ancak CSS stiline girerek her şeyi kökten değiştirebilir ve orada ihtiyacınız olan tasarım stilini koyabilirsiniz ve hepsinden önemlisi, İnternet kaynağının temeli olarak yazabilirsiniz.
1
. Yani zamovchuvannyam için git ya da saat başı portala gidiyorum.
2
. biz zaten hayret ediyoruz mobil cihaz, ve yine de menüyü tıklamadılar.
3
. Burada, sorgulayacakları tüm soruların ortaya çıktığını belirten bir tıklama yaptılar.
başlık( genişlik: %100; ekran:tablo; arka plan rengi: #175812; kenar boşluğu-alt:50 piksel; }
#kamtukagnpos( yüzer: sol; yazı tipi boyutu: 25 piksel; metin dönüştürme: büyük harf; renk: #ffab2; yazı tipi ağırlığı: 600 dolgu: 19.8 piksel 0 piksel; }
#kamtukagnpos: fareyle üzerine gelin ( metin gölgesi: 0px 0px 6px rgba(255, 250, 250, 0.67); }
Gezinti( genişlik:otomatik; Sağa çık; }
navul( ekran:tablo; Sağa çık; }
Nav ul li( yüzer: sol; }
Nav ul li:son çocuk( dolgu-sağ:0px; }
Nav ul li bir ( renk: #e4f2ff; yazı tipi boyutu: 19 piksel; dolgu: 24 piksel 19 piksel; ekran: satır içi blok metin gölgesi: 0 1px 0 #2e2f2e; }
Nav ul li a: üzerine gelin ( arka plan rengi: #143a06; renk: #fff9c8; geçiş: tüm 0.7'ler 0'ları kolaylaştırır; metin gölgesi: 0 1px 0 #282b28; }
Nav ul li a: üzerine gelin ( renk: #fdf7c9; geçiş: tüm 0.7'ler 0'ları kolaylaştırır; metin gölgesi: 0 1px 0 #1c1d1c; }
Nav ul li bir ben ( dolgu-sağ: 9px; renk: #f4faff; geçiş: tüm 0.7'ler 0'ları kolaylaştırır; metin gölgesi: 0 1px 0 #202120; }
Gezinti( görüntü yok; konum:mutlak; sağ:0 piksel; üst:53 piksel; arka plan rengi: #174810; dolgu:0 piksel; z-endeksi:99; }
navul( genişlik:otomatik; }
Nav ul li( kayan nokta: yok; dolgu:0 piksel; genişlik: %100; ekran:tablo; }
Nav ul li bir ( renk:#f7f2f2; yazı tipi boyutu:15 piksel; dolgu:10 piksel 20 piksel; Ekran bloğu; sınır-alt: 1 piksel katı rgba (204, 197, 197, 0.1); }
Nav ul li bir i( renk:#f9f5d5; dolgu-sağ:13px; } }
@media yalnızca ekran ve (maksimum genişlik: 480 piksel) ( bölüm(maks-genişlik: %90;) }
@media yalnızca ekran ve (maksimum genişlik: 360 piksel) ( etiket(dolgu:5px 0px;) #kamtukagnpos(yazı tipi boyutu: 20px;) gezinme(üst:47 piksel;) }
Önüne nasıl koyulur, sonra Demo tarafına saygıyla bakın ve gerçekten değerlendirin, her şeyin nasıl çalıştığını ama aslında öyle bir şey yok, efekti veren kaynağın adını verseniz bile, üzerine geldiğinizde tüm işaretlerin üzerinden daha zengin ve daha güzel olan tünele gidin.
İyi site navigasyonu da blogcular için önemlidir. її yardım için vodvіduvach shvidko biliyor bir tarafa ihtiyacım olacak Blog. Sitenin ve arama sistemlerinin zekasına değer verin. Bu makalede, simgeleri birleştirme ile Blogger için yatay bir menü oluşturmayı öğreneceksiniz. CSS'de oluşturulan ekleme düğmeleri-simgeleri içeren menü. Menüye göz atmak için aşağıdaki butona tıklayın:
Blogger'da simgelerle yatay css menüsü nasıl eklenir
“Şablon” sekmesine gidin, imleci düzenleyicinin üzerine getirin (bir yer olsun),
Kodu aramak ve kodun ipucunu bulmak için Ctrl + F tuşlarına basın ]]>
Aşağıdaki kodu cim kodunun önüne ekleyin: ..
/* Menü için CSS Kodu burada başlar bloggertrix.com */ #btrix-nav (marj: 100px auto;list-style: none;width: 632px;height: 87px;overflow-y: hidden;) #btrix-nav li (kayan: sol;) #btrix-nav li (ekran: blok;renk: beyaz;genişlik: 120 piksel;yükseklik: 61 piksel;kenar boşluğu: 24 piksel;metin süslemesi: yok;metin hizalama: merkez;kenarlık-üst: 1 piksel düz #bbb; kenarlık -alt: 1 piksel katı #555;) #btrix-nav li a span.aname (font: bold 17px/61px "Arial";color: #fff;metin-dönüşümü: büyük harf;imleç: işaretçi;konum: göreceli;üst: 0;geçiş: üst .5s kolaylık; metin gölgesi: 1px 1px 1px rgba(0, 0, 0, 0.5);) #btrix-nav li bir img (konum: göreli; üst: 0; geçiş: üst .5s kolaylık;) #btrix-nav li a:hover (imleç: işaretçi;) #btrix-nav li:hover img (üstte: -85px;) #btrix-nav li a:hover .aname (üst: 85px;) #btrix-nav li:nth-child(1) a (arka plan: #3eb006;border-radius: 5px 0 0 5px;border-sol: 1px solid #bbb;) #btrix-nav li:nth-child(2) a (arka plan: #9bc704;) #btrix-nav li:nth-child(3) a (arka plan: #0dc3ff;) #btrix-nav li:nth-child(4) a (arka plan: #51a2ec;) #btrix-nav li:nth-child(5) a (arka plan: #6e3cab;border-radius: 0 5px 5px 0;border-right: 1px solid #555;)
Şimdi "Tasarım" sekmesine gidin,
Yeni bir HTML / JavaScript öğesi ekleyin ve kodu ekleyin:
HTML öğesi taşınsın mı? "Tasarım" blog gönderisinde JavaScript gereklidir.
Menünüz için simgeleri, logoları ve diğer resimleri bükebilirsiniz, png arka planda görelim. Resimlere olan ihtiyacı bilmek için simgeleri aramak daha iyidir. Örneğin, iconsearch.com
Tse list posilan, scho yol kadar farklı taraflar alan. Liste basit işaretçileri değiştirmek için gönderilirse, simgelerle desteklenir ve grafiklerin değiştirilmesi gerekiyorsa kötü görünür. Veritabanından önce nasıl talepte bulunulur?
HTML Kodu
Etiketler li reçete edilir a(# timchasova saplaması), ortada iki blok elemanı var açıklık. İlk yayılma - etiket i simgenin sınıfı ile siteden kopyalanan kod Yazı Tipi Harika. Başka bir açıklık- Mesaja ve ardından metne bir ad verin.
bisikletler
motosikletler
Otobüsler
Arabalar
Vertogliotiler
Etiketler arasındaki bağlantıdan sonra kafa simge yazı tipi Yazı Tipi Harika- menü şöyle görünebilir.
CSS stilleri
koçan için Google yazı tipi menü Rus dikey olacakmış gibi, ek Kiril için tanıdık bir yazı tipi seçin.
Seçilen yazı tipi için bağlantı kodunu kopyalayın ve css dosya.
seçicide gövde Seçilen yazı tipinin adını yazıp rozmіr olarak ayarlıyorum.
Gövde( kenar boşluğu: 0; dolgu: 0; yazı tipi ailesi: "Marck Script", sans-serif; yazı tipi boyutu: 20 piksel;
}
Menümüzün konumu tarayıcı penceresine benzer, %10 daha yüksek ve %20 daha yüksek. Bu sayıların "stellerden" alındığını anladım, kendi kokunuz olacak.
Ul ( konum: mutlak; en iyi 10%; sol: 20%
}
Menünün genişliğini 200 piksel sabitliyoruz.
Genişlik: 200 piksel
Listedeki menü öğelerine gittik. Noktalardan işaret alma li.
Ul li ( liste stili: yok;
}
Menü öğelerini tek tip yapan canavarın çerçevesini ve altını belirtiriz.
Kenarlık üstü: 1 piksel katı #131313; kenarlık-alt: 1 piksel katı #131313; kenar boşluğu: -1px 0;
Kenar çerçevelerini ve dağılımları simgeler ve mesaj adları arasına asmayın.
Etiket için küçük sağ çerçeve a, bir satır öğesidir ve bir satır öğesinin yanında çerçeve kırılamaz. Bu yüzden etiket gösteriliyor a blok öğesi.
Ul li bir ( Ekran bloğu;
}
Artık bir çerçeve ayarlayabilir, ek bir mesajı düzenleyebilir ve mesajın rengini yazabilirsiniz.
Kenar-sağ: 1 piksel katı #131313; metin-dekorasyon: yok; renk: #131313;
Sol çerçeveyle evlen.
etiketler açıklık- ortasında metin olacak blok öğeleri, açıklık bir satır bloğu elemanı ile temsil edilir.
Ul li bir açıklık ( pozisyon: göreceli; ekran: satır içi blok
}
ilk için ihtiyacımız var açıklık, ortasında bir simge olacak, diğerine benzeyecek stilleri ayarlayın açıklık. ilk kimin için açıklık anlamlı sözde sınıf - span:nth-child(1) ta stilizuemo yogo okremo. Sağ ve sol çerçeve ve genişliğini ayarlayalım.
Ul li a span:nth-child(1) ( genişlik: 30 piksel sol kenarlık: 1 piksel düz #131313; sağ kenarlık: 1 piksel katı #131313;
}
Simgeler, her tarafta 10 piksellik alanlarla ortada olur.
metin hizalama: merkez; dolgu: 10 piksel
Simgeler koyu renkli, kırmızı yaprak bitleri üzerinde 20 piksel boyutunda olacaktır.
Renk: #131313; yazı tipi boyutu: 20 piksel; arka plan: #f44336;
Başka bir sözde sınıf, yalnızca alanların belirtilmesini gerektirir.
Ul li a span:nth-child(2) ( dolgu: 10 piksel
}
Şimdi dikey menü kalıntı görünümünü kazandı. Tüm koda ve sonuca hayret edin.
Іsnuє kütle hazır çözüm bu tür panelleri katlamak için jQuery'ye yardım et, keruvannya sitesi farklı sistemler için okremі eklentileri ve modülleri. Her şey daha iyi, ancak slayt panellerin uygulanması için mümkün, hepsi mümkün CSS? Açıkçası yapabilirsin! Ale saygılarımla))) tüm tarayıcıların CSS3'ün mevcut gücünü desteklemede iyi olmadığına bakın.
Çok uzun zaman önce, "dağı görmek" çözümü ve bir robotun kıçı. İlk yorumlardan biri şöyleydi: “bisiklete geçelim…”. Neden ben n i? Haydi)).
Bugün size anlatacağım ve size uygulama üzerinde göstereceğim, “CSS magic” yardımı ile tamamen işlevsel, menüye tıklayarak çalışmaya başlayabilirsiniz. Yerleşik geleneğin arkasında, robotik panelin canlı poposuna hayret eden, uzakta, aynı zamanda birinin ihtiyacı olan koçan için, tüm yerleşime, ne, nasıl ve şimdi bakabiliriz. Yemek hazırlamak, menü seçeneklerini hazırlamak, solak, sağlak gibi:
HTML işaretlemesi
Bir tür muzaffer standart sancak () olarak anahtar paneline bir göz atalım:
Belgenin en üstünde veya daha doğrusu etiketten hemen sonra bir onay kutusu olabilir.
. Gizli öznitelik, bu öğe için "ekleme" kampını ve ayrıca örneğin etiketin for özniteliği ile bağlantı için benzersiz bir tanımlayıcı, örneğin id="nav-toggle" belirtilmeden yazılır.
https://2.bp.blogspot.com/-vcR6lUGsroY/Ug5ATZk8oZI/AAAAAAAAA00/XENkFMaBgv0/s1600/btrix-home.png" />
