Saf CSS / HTML açılır menüsü

  1. Saf CSS / HTML açılır menüsü Bu derste saf CSS'de klasik bir yatay menü yapacağız. Listelerde simgeleri...
  2. İşaret ederken yatay menüyü canlandırıyoruz.
  3. CSS / HTML açılır menüsünü tanımlayın

Saf CSS / HTML açılır menüsü

Bu derste saf CSS'de klasik bir yatay menü yapacağız. Listelerde simgeleri var. Bir öğeye işaret ederken, düğmenin ve metnin rengini yumuşak bir şekilde değiştirir, bir gölge eklenir. Açılır listeler çok seviyeli yapılabilir ve asıl şey tamamen basit CSS3'te uygulanır.

Burada bu dersin devamı - Bölüm 2 MOBİL SÜRÜM yatay menü ".

Kaleme bakın POyzbW Denis (tarafından @Dwstroy ) tarihinde CodePen .

Ders kullanımında:

  • ekran: esnek;
  • geçiş kullanın;
  • elemanları konumlandırın.

HTML yatay menü yapısı

İlk önce yatay menünün altındaki işaretlemeyi yazın. Geliştirme ortamımızı benim durumumda açıyoruz, bu PhpStorm, bir index.html dosyası oluştur, html: 5 karesini yaz, lang'ı ru ile değiştir.

Kodlama hariç tüm metalar silinecek, “ Tom menubaşlığımı kaydettireceğim.

Gövde arasına başlık etiketi yazıyoruz ve içine menüde içerecek olan .dws-menu sınıfında bir blok var. Daha sonra, yapı aşağıdaki gibi olacak, beş adetlik bir liste oluşturacağız. Her listede, href = "#" özniteliği ile bir bağlantı olacaktır. Daha sonra .fa .fa- sınıfı ile ikona gideceğim.

<header> <nav class = "dws-menu"> ul> li * 5> a [href = "#"]> i.fa.fa- </ nav> </ başlık>

Başvurmak için basın.

Menü öğelerinin adını yazalım ( Ev, Ürünler, Hizmetler, Haberler, Rehber ).

Ardından, simgeleri seçin ve bağlayın. Siteye gidin, şu menü öğelerinin simgelerini seçeceğiz:

<i class = "fa fa- home "> </ i> <i class = "fa fa alışveriş sepeti "> </ i> <i class = "fa fags"> </ i> <i class = "fa fa -list "> </ i> <i sınıfı = "fa faope açık "> </ i>

<i class = fa fa- home > </ i> <i class = fa fa alışveriş sepeti > </ i> <i class = fa fags> </ i> <i class = fa fa -list > </ i> <i sınıfı = fa faope açık > </ i>

Arşivi ikonlarla siteden indirin, içeriğini bilgisayarınıza çıkartın, font klasörünü ve css klasörünü geliştirme ortamınıza kopyalayın.

Yazı tipleri klasörü, simge yazı tiplerini ve css klasörü kendi stillerini içerir. Sıkıştırılmış stiller font-awesome.min içinden kaldırılabilir, sıkıştırılmamış font-awesome.css komutunu bağlarız.

İndex.html'de ikonları bağlarız ve her öğeyi kendi ikon stiline göre kaydederiz ( ev , alışveriş sepeti , çarklar , th-list , zarf açık ).

Ana çerçeveyi yaptık, ana stilin tanımlanmasından sonra bir alt menü oluşturduk ve şimdi yatay menü style.css'nin ana stillerini tanımlayacağımız ve index.html'e bağlayacağımız bir dosya oluşturacağız. Stillerin bağlı olup olmadığını kontrol etmek için bir img klasörü oluşturun, içine arka plana rastgele bir resim yerleştireceğim. Resim bağlantısını arka plan kullanarak yazalım.

vücut {background-image: url ("../ img / ep_naturalwhite.png"); }

Gördüğümüz gibi, her şey gösterildi ve sonra stillerin açıklamasına geçeceğiz.

Öncelikle, farklı tarayıcıların varsayılan olarak ayarlayabileceği tüm girintileri sıfırlayalım:

.dws-menu * {marj: 0; dolgu maddesi: 0; }

Üstbilgiyi 200 tepe noktasına ayarlayın. ve ek yazı tipleri yazabilmeniz için siteden kendinize indirebileceğiniz ve kendinize ayrı ayrı bağlanabileceğinizi belirleyin.

başlık {marj: 200px; font ailesi: Cuprum, Arial, Helvetica, sans-serif; }

Listelerdeki işaretleri gizle:

.dws-menü ul, .dws-menü ol {list-style: none; }

Listeler yatay olarak gösterilecek: keten, ve bunu merkezde yapacağız:

.dws-menu> ul {ekran: esnek; haklı içerik: merkez; }

Başlıkta sadece tepeye gireriz, kenar boşluğu yazacağız.

başlık { margin-top: 200px; font ailesi: Cuprum, Arial, Helvetica, sans-serif; }

Menümüzü tasarlayalım, düğmelerin rengini, yazı tipini vs. ayarlayalım.

Nav> ul li linklerini seçin ve onları blok elemanlarına dönüştürün. Menü arka planını ayarlayın, girintileri yazın, boyutunu, rengini belirtin, alt çizgiyi kaldırın ve başlıkları büyük harflerle yapın.

.dws-menu> ul li a {görüntüleme: blok; arkaplan: #ececed; dolgu maddesi: 15px 30px 15px 40px; yazı tipi boyutu: 14 piksel; renk: # 454547; metin dekorasyon: yok; metin dönüşümü: büyük harf; }

Sonra simgeleri konumlandırın, listeleri konumlarına atayın: göreceli; Simgelerin daha fazla hizalanması için:

.dws-menu> ul li {position: relatif; }

Daha sonra, ikonları seçiyoruz, kesinlikle konumlandırıyoruz, yukarıdan 15 zirveye girinti yapıyoruz, soldaki 12 zirveden, boyutu 18 zirveye çıkarıyoruz.

.dws-menu> ul li> bir i.fa {position: absolute; üst: 15px; sol: 12 piksel; yazı tipi boyutu: 18 piksel; }

Ayırıcıyı listeler için kenarlık olarak atayın, ilk LI öğesini seçin, kenarlığı ayarlayın. Son elementi LI seçeriz ve ona benzer bir sınır atarız.

.dws-menu> ul li: ilk çocuk {kenar-sol: 1px katı # b2b3b5; } .dws-menu> ul li: son çocuk {kenar-sağ: 1px katı #babbbd; }

LI listeleri için sınırlayıcılar oluşturmak:

.dws-menu> ul li {position: relatif; sınır-sağ: 1 piksel katı # c7c8ca; }

Menü görünümü edindi, sonra durma sırasında stillerin açıklamasına geçebilirsiniz.

İşaret ederken yatay menüyü canlandırıyoruz.

Bağlantıları seçin ve bloğa bir renk atayın ve bağlantının rengini simgeyle beyaza atayın. Başka bir karanlık gölge ekleyelim. 0,3 saniyede geçiş sayesinde yumuşak bir görünüm elde edeceğiz:

.dws-menu li a: vurgulu {background: # 454547; renk: #ffffff; kutu gölge: 1px 5px 10px -5px siyah; geçiş: tüm 0.3s kolaylığı; }

Ve bu efekti sorunsuz bir şekilde yok etmek için, bu stili kolayca bağlantıya ekle:

.dws-menu> ul li a {görüntüleme: blok; arkaplan: #ececed; dolgu maddesi: 15px 30px 15px 40px; yazı tipi boyutu: 14 piksel; renk: # 454547; metin dekorasyon: yok; metin dönüşümü: büyük harf; geçiş: tüm 0.3s kolaylığı; }

Ana menü bitti ve alt menü ile içlerinde bulunan alt menülerin açıklamasına geçebilirsiniz.

CSS / HTML açılır menüsünü tanımlayın

Hakkında index.html dosyasını açar ve ürünlere ek bir menü ekleriz. UL'yi LI listeleri arasına yerleştirin ve içine herf = ”#” özelliğine sahip bağlantılar içerecek beş liste yerleştirin.

ul> li * 5> a [href = "#"]

Uygulamak için basın, öğelerin adını yazın ( Giyim, Elektronik, Yiyecek, Araçlar, Yaşam. Kimya ).

<ul> <li> <a href="#"> Giysiler </a> </ li> <li> <a href="#"> Elektronikler </a> </ li> <li> <a href = "#"> Yiyecekler </a> </ li> <li> <a href="#"> Araçlar </a> </ li> <li> <a href="#"> Yaşam. kimya </a> </ li> </ ul>

Sonra style.css dosyasını açın ve alt menü stillerini tanımlayın.

İkinci listeyi seçip, pozisyona atadık: absolute; , minimum genişliği 150 tepe olarak ayarlayalım.

/ * alt menü * / .dws-menü li ul {position: absolute; min-genişlik: 150 piksel; }

Sınır listelerine 1 tepe noktaya yazalım.

.dws-menu li> ul li {kenarlık: 1px katı # c7c8ca; }

Alt menüdeki bağlantılar için, 10 tepe noktasında girintiler belirleyeceğiz., Metin dönüşümünü kaldırın ve arka planı birkaç ton daha koyu hale getirin: # e4e4e5; .

.dws-menu li> ul li a {padding: 10px; metin dönüşümü: yok; arkaplan: # e4e4e5; }

Ardından başka bir alt menü oluşturun. İşaretleme dosyasına gidin ve örneğin daha önce yaptığımız gibi analog menüden "Elektronik" formunda. Öğelerin başlıklarını ( Kameralar, Bilgisayarlar, Telefonlar ) tanımlar ve tasarruf ederiz.

<li> <a href="#"> Elektronikler </a> <ul> <li> <a href="#"> Kameralar </a> </ li> <li> <a href="#"> Bilgisayarlar </a> </ li> <li> <a href="#"> Telefonlar </a> </ li> </ ul> </ li>

Dışarı çıkarıldılar, ancak ana menü altında gizlendiler; şimdi pozisyon: mutlak; iç içe UL ve 150 zirveye taşıyın. tarafına:

.dws-menu li> ul li ul {konum: mutlak; sağ: -150 piksel; üst: 0; }

Daha sonra, üst menünün ana öğelerini hedeflerken alt menünün görünmesini sağlayacağız, bunun için ekran ekledik: none; ve böylece tüm iç noktaları gizler.

/ * alt menü * / .dws-menü li ul {position: absolute; min-genişlik: 150 piksel; ekran: yok; }

Ve görünüşleri için, vurgulu listelerini seçeceğiz ve onları ekran yardımı ile göstereceğiz: blok; .

.dws-menu li: vurgulu> ul {ekran: blok; }

Artık, UL bloğunu kopyalayarak, öğelerini değiştirerek çok seviyeli menüler ekleyebilirsiniz.

<ul> <li> <a href="#"> <i class = "fa fa-home"> </ i> Ana Sayfa </a> </ li> <li> <a href="#"> < i class = "fa fa-alışveriş sepeti"> </ i> Ürünler </a> <ul> <li> <a href="#"> Giyim </a> <ul> <li> <a href = "#"> Ayakkabılar </a> </ li> <li> <a href="#"> Ceketler </a> </ li> <li> <a href="#"> Pantolonlar </a> < / li> </ ul> </ li> <li> <a href="#"> Elektronikler </a> <ul> <li> <a href="#"> Fotoğraf Makineleri </a> </ li> <li> <a href="#"> Bilgisayarlar </a> </ li> <li> <a href="#"> Telefonlar </a> <ul> <li> <a href="#"> Samsung </a> </ li> <li> <a href="#"> Flf </a> </ li> <li> <a href="#"> Elma </a> </ li> < / ul> </ li> </ ul> </ li> <li> <a href="#"> Yiyecekler </a> </ li> <li> <a href="#"> Araçlar </ h a> </ li> <li> <a href="#"> Gen. kimya </a> </ li> </ ul> </ li> <li> <a href="#"> <i sınıfı = "fa-faj" "> </ i> Hizmetler </a> <ul > <li> <a href="#"> Hizmet 1 </a> </ li> <li> <a href="#"> Hizmet 2 </a> </ li> <li> <a href = "#"> Hizmet 3 </a> </ li> </ ul> </ li> <li> <a href="#"> <i class = "fa fa-list"> </ i> Haberler </a> </ li> <li> <a href="#"> <i class = "fa-zarf açık"> </ i> Kişiler </a> </ li> </ ul>

Öyleyse düğmeleri düğmelerle bitirelim. Ben kullandım, birkaç Önayar oluşturdum, kendi kodunu kendin oluşturabilirsin, benim durumumda, sadece bu kodu kopyalayıp daha önce yazdığım arkaplan yerine yerleştiririm.

.dws-menu> ul li a {görüntüleme: blok; / * Permalink - bu gradyan: http://colorzilla.com/gradient-editor/#c9c9c9+0,f6f6f6+2,c4c5c7+98.757577+100; Özel + 3 * / arkaplan: # c9c9c9 ; / * Eski tarayıcılar * / arka plan: -moz-doğrusal-gradyan (üst, # c9c9c9% 0, # f6f6f6% 2, # c4c5c7% 98, # 757577%); / * FF3.6-15 * / arkaplan: -webkit-linear-gradient (üst, # c9c9c9% 0, # f6f6f6% 2, # c4c5c7% 98, # 757577% 100); / * Chrome10-25, Safari5.1-6 * / arka plan: doğrusal gradyan (en alta, # c9c9c9% 0, # f6f6f6% 2, # c4c5c7% 98, # 757577% 100); / * W3C, IE10 +, FF16 +, Chrome26 +, Opera12 +, Safari7 + * / filtre: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# c9c9c9', endColorstr = '# 757577', GradientType = 0); / * IE6-9 * / dolgu maddesi: 15px 30px 15px 40px; yazı tipi boyutu: 14 piksel; renk: # 454547; metin dekorasyon: yok; metin dönüşümü: büyük harf; geçiş: tüm 0.3s kolaylığı; } .dws-menu li a: vurgulu {/ * Permalink - bu gradyan: http://colorzilla.com/gradient-editor/#e0e1e5+0.454547+2.454547+98,e0e1e5+100 * / arkaplan: # e0e1e5; / * Eski tarayıcılar * / arka plan: -moz-doğrusal-gradyan (üst, # e0e1e5% 0, # 454547% 2, # 454547% 98, # e0e1e5% 100); / * FF3.6-15 * / arkaplan: -webkit-linear-gradient (üst, # e0e1e5% 0, # 454547% 2, # 454547% 98, # e0e1e5% 100); / * Chrome10-25, Safari5.1-6 * / arka plan: doğrusal gradyan (en alta, # e0e1e5 0%, # 454547 2%, # 454547% 98, # e0e1e5% 100); / * W3C, IE10 +, FF16 +, Chrome26 +, Opera12 +, Safari7 + * / filtre: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# e0e1e5', endColorstr = '# e0e1e5', GradientType = 0); / * IE6-9 * / color: #ffffff; kutu gölge: 1px 5px 10px -5px siyah; geçiş: tüm 0.3s kolaylığı; } dws-menu> ul li a {görüntüleme: blok;  / * Permalink - bu gradyan: http://colorzilla

Arzu ederseniz, bu menü sitede sizin için uygun olan stil için tasarlanabilir, sadece bir renk üretmek ve onu kodda değiştirmek yeterlidir. Basit ve aynı zamanda saf CSS ile yapılan güzel bir yatay menü ortaya çıktı.

Yorum bırak:

Новости

Как сбалансировать юзабилити и дизайн при создании сайта — User House
Красота или уродство в веб-дизайне всегда связаны с восприятием конкретного человека. То, что для одного «красиво», может быть «ужасным» для другого и наоборот. Но как же так получается, что многие популярные

Чем лучше юзабилити сайта – тем больше лояльных клиентов
Хотите понять, как посетители воспринимают сайт? Это очень просто. Представьте, что вы говорите по телефону с директором, и в это время вам звонит кто-то из родственников, а у вас еще работы на четыре

Знакомство с юзабилити-тестированием сайта. // webknowledge.ru
Перевод статьи:   An Introduction To Website Usability Testing. Автор:   Thomas Churm. При создании нового сайта необходимо учитывать множество факторов. Для того чтобы у посетителей возникло

Специалист по web-usability – боец невидимого фронта
Ярослав Перевалов Что такое usability engineering? Часто ли вы, бродя по Сети, обращаете внимание на то, насколько качественно структурирована информация на сайте и насколько удобно устроена навигация?

Гид по UX исследованиям для начинающих
В индустрии, в основе которой лежит использование людьми наших продуктов, услуг и приложений, исследования просто необходимы. Мы задаем вопросы. Мы делаем пометки. Мы стараемся узнать все, что возможно,

25 советов как улучшить юзабилити (usability) вашего сайта. | Блог об интернет деятельности и трудовых буднях Максима Вячеславовича
Доброго времени суток, дорогие друзья! Сегодня мы поговорим с вами о такой важной вещи как U sability (юзабилити) сайта , о том, как улучшить данный фактор, зная его основные принципы и правила.

Что такое юзабилити и зачем оно нужно
Юзабилити включает простоту, удобство в пользовании, тестирование, проведение аудита проекта. Юзабилити сайтов, интернет-магазинов — это неотъемлимая часть выгодного ведения бизнеса. Задача юзабилити

Юзабилити тестирование сайта турагентства
«Когда информации много и она дешева, дорогим становится внимание». James Gleick Представим сайт, владелец которого считает его достаточно хорошим, удобным и привлекательным. Он размещает рекламные объявления

Юзабилити
Юзабилити (от англ. слова «usability» – практичность, простота использования) – это весьма распространенное ныне понятие объединяет максимальное удобство использования сайта и полезность информации, на

5 шагов для успешного юзабилити-тестирования приложения
Представьте: вы придумали и разработали мобильное приложение с приятным, на ваш взгляд, дизайном, удобным функционалом, полезными опциями, выпустили релиз продукта, но… Несмотря на мощную маркетинговую

Карта