CSS-də şaquli menyu. Üfüqi menyu üçün təmiz CSS Standart CSS üslublarında sabit yan menyu

Bu dərslikdə biz təmiz CSS-də klassik üfüqi menyu hazırlayacağıq. Siyahılarda nişanlar var. Elementin üzərinə aparanda o, düymənin və mətnin rəngini rəvan dəyişir və kölgə əlavə edir. Açılan siyahılar çox səviyyəli edilə bilər və ən əsası, bütün bunlar tamamilə sadə CSS3-də həyata keçirilir.

Dərsdə istifadə edəcəyik:

  • ekran: flex;
  • keçiddən istifadə edin;
  • mövqedən istifadə edərək elementləri yerləşdirəcəyik.

Horizontal menyunun HTML strukturu

İlk öncə üfüqi menyu üçün işarələməni yazaq. Mən inkişaf mühitimizi açırıq, bu PhpStorm , index.html faylı yaradın, html:5 çərçivəsini yazın, lang-ı ru ilə əvəz edin.

Kodlaşdırmadan başqa bütün metaları siləcəyəm, başlığımı yazacağam " tom menyusu».

Bədənin arasına başlıq teqini yazırıq və orada menyumuz yerləşəcəyi .dws-menyu sinfi olan blokdur. Bundan əlavə, struktur aşağıdakı kimi olacaq, beş ədəd həcmdə siyahılar yaradacağıq. Hər siyahıda href="#" atributuna malik link olacaq. Sonra .fa .fa- sinfi ilə I simvolu olacaq.

Tətbiq et klikləyin.

Menyu maddələrinin adını yazaq ( Ev, Məhsullar, Xidmətlər, Xəbərlər, Əlaqələr).

Sonra, nişanları seçin və birləşdirin. Font Awesome veb saytına gedirik, bu menyu elementləri üçün nişanlar seçin:

Arxivi ikonlarla saytdan yükləyirik, onun içindəkiləri kompüterimizə çıxarırıq, şriftlər qovluğunu və css qovluğunu inkişaf mühitimizə köçürürük.

Şriftlər qovluğunda ikon şriftləri, css qovluğunda isə onların üslubları var. Sıxılmış üslublar font-awesome.min tərəfindən silinə bilər, sıxılmamış font-awesome.css daxildir.

index.html-də biz nişanları birləşdiririk və hər bir elementə öz simvol stilini təyin edirik ( ev, Alış-veriş kartı, dişlilər, ci siyahı, zərf açıq).

Əsas çərçivəni etdik, əsas üslubun təsvirindən sonra alt menyunu formalaşdıracağıq və indi əsas üslubları təsvir edəcəyimiz bir fayl yaradacağıq. üfüqi menyu style.css və onu index.html-ə daxil edin. Üslubların bağlı olduğunu yoxlamaq üçün img qovluğu yaradacağam, onun fonunda ixtiyari bir şəkil yerləşdirəcəyəm. Arxa fondan istifadə edərək şəklin əlaqəsini yazaq.

Bədən (arxa fon şəkli: url("../img/ep_naturalwhite.png"); )

Horizontal Menyu üçün CSS Üslublarının Təsviri

Əvvəlcə müxtəlif brauzerlərin standart olaraq təyin edə biləcəyi bütün girintiləri sıfırlayaq:

Dws-menyu *( kənar: 0; doldurma: 0; )

Başlığı 200 kürəyə təyin edək. və ayrıca yüklənə və saytınıza qoşula bilən Cuprum şriftini təyin edin, hər ehtimala qarşı əlavə şriftlər yazacağıq.

Başlıq( kənar: 200px; şrift ailəsi: Cuprum, Arial, Helvetica, sans-serif; )

Markerləri siyahılardan gizlədək:

dws-menyu ul, .dws-menyu ol( siyahı üslubu: heç biri; )

Siyahıları üfüqi olaraq display: flax ilə göstərək və onu mərkəzləşdirək:

Dws-menyu > ul (ekran: flex; əsaslandırma-məzmun: mərkəz; )

Başlıqda yalnız yuxarıdan abzas edək, margin-top yazın.

Başlıq( yuxarı kənar: 200px;şrift ailəsi: Cuprum, Arial, Helvetica, sans-serif; )

Menyumuzu tərtib edək, düymələrin rəngini, şriftini və s.

Dws-menyu > ul li a( displey: blok; fon: #ececed; padding: 15px 30px 15px 40px; şrift ölçüsü: 14px; rəng: #454547; mətn dekorasiyası: heç biri; mətn çevrilməsi:böyük hərf; )

Sonra nişanları yerləşdiririk, siyahıların mövqeyini təyin edirik: nisbi; nişanları daha da mərkəzləşdirmək üçün:

dws-menyu > ul li( mövqe: nisbi; )

dws-menyu > ul li > a i.fa( mövqe: mütləq; yuxarı: 15px; sol: 12px; şrift ölçüsü: 18px; )

Siyahılara sərhəd ayırıcı təyin edək, ilk LI elementini seçək və sərhədi təyin edək. Sonuncu elementi LI seçirik və ona oxşar sərhəd təyin edirik.

Dws-menyu > ul li:birinci uşaq( sərhəd-sol: 1px bərk #b2b3b5; ) .dws-menyu > ul li:son uşaq( sərhəd-sağ: 1px bərk #babbbd; )

LI siyahıları üçün ayırıcıların hazırlanması:

.dws-menyu > ul li( mövqe: nisbi; haşiyə-sağ: 1px bərk #c7c8ca; }

Menyu alındı görünüş, sonra hover üslublarını təsvir etməyə başlaya bilərsiniz.

Hover üzərində üfüqi menyunu canlandırın

Dws-menyu li a:hover( fon: #454547; rəng: #ffffff; qutu-kölgə: 1px 5px 10px -5px qara; keçid: hamısı 0.3s asan; )

Və bu effektin rəvan şəkildə yox olması üçün bu üslubu istirahətdə olan linkə əlavə edin:

.dws-menyu > ul li a( displey: blok; fon: #ececed; padding: 15px 30px 15px 40px; şrift ölçüsü: 14px; rəng: #454547; mətn dekorasiyası: heç biri; mətn çevrilməsi:böyük hərf; keçid: bütün 0.3s rahatlığı; )

Əsas menyu tamamlandı və siz alt menyuları və onların alt menyularını təsvir etməyə başlaya bilərsiniz.

CSS/HTML açılan menyunun təsviri

Biz index.html-ni açırıq və məsələn, məhsullara əlavə menyu əlavə edirik. LI siyahıları arasına biz UL daxil edirik, onun içinə beş siyahı yerləşdirəcəyik, orada herf=”#” atributu ilə bağlantılar olacaq.

ul>li*5>a

Tətbiq et üzərinə klikləyin, elementlərin adını yazın ( Geyim, Elektronika, Qida, Alətlər, Həyat. kimya).

  • Parça
  • Elektronika
  • Qida
  • Alətlər
  • Gen. kimya

Sonra style.css-i açırıq və alt menyunun üslublarını təsvir edirik.

İkinci siyahını seçin və ona mövqe verin: mütləq; , minimum eni 150 pikselə təyin edin.

/*alt menyu*/ .dws-menyu li ul( mövqe: mütləq; minimum en: 150px; )

Siyahılara 1 zirvənin sərhədini yazaq.

Dws-menyu li > ul li( haşiyə: 1px bərk #c7c8ca; )

Alt menyudakı keçidlər üçün paddingi 10 pikselə təyin edin, mətnin dəyişdirilməsini silin və fonu bir neçə ton qaranlıq fon edin: #e4e4e5; .

Dws-menyu li > ul li a( doldurma: 10px; mətni çevirmək: heç biri; fon: #e4e4e5; )

Sonra başqa bir iç içə menyu yaradacağıq. İşarələmə faylına keçək və məsələn, “Elektronika”da əvvəllər etdiyimiz kimi analoji ilə menyunu formalaşdırırıq. Paraqraf başlıqlarını təsvir edin ( Kameralar, Kompüterlər, Telefonlar) və saxla.

  • Elektronika
    • kameralar
    • Kompüterlər
    • Telefonlar

    • Onlar göstərilir, lakin əsas menyunun altında gizlənir, indi mövqe: mütləq; yuvalanmış UL və onu 150 zirvəyə sürüşdürün. tərəfə:

    Dws-menyu li > ul li ul( mövqe: mütləq; sağ: -150px; yuxarı: 0; )

    /*alt menyu*/ .dws-menyu li ul( mövqe: mütləq; min-en: 150px; ekran: heç biri; )

    Və onların görünüşü üçün biz hover üzərindəki siyahıları seçəcəyik və display: block; .

    dws-menyu li:hover > ul( ekran: blok; )

    İndi siz sadəcə olaraq UL blokunu kopyalayaraq, onun elementlərini dəyişdirməklə çox səviyyəli menyular əlavə edə bilərsiniz.

    • ev
    • Məhsullar
      • Parça
        • Ayaqqabılar
        • Gödəkçələr
        • Şalvar
      • Elektronika
        • kameralar
        • Kompüterlər
        • Telefonlar
          • Samsung
          • Flf
          • alma
      • Qida
      • Alətlər
      • Gen. kimya
    • Xidmətlər
      • Xidmət 1
      • Xidmət 2
      • Xidmət 3
    • Xəbərlər
    • Əlaqələr

    Sonra son addımlar üçün düymələri tərkib hissəsi ilə bəzəyirik. Mən CSS generatorundan istifadə edirəm, məndə bir neçə Preset var, siz özünüz yarada bilərsiniz, mənim vəziyyətimdə sadəcə kopyalayıram verilmiş kod və əvvəl yazdığım fonu yerinə qoyun.

    .dws-menyu > ul li a( ekran: blok; /* Permalink - bu gradienti redaktə etmək və paylaşmaq üçün istifadə edin: http://colorzilla.com/gradient-editor/#c9c9c9+0,f6f6f6+2,c4c5c7+98,757577+100;Xüsusi+3 */ fon: #c9c9c9 ; /* Köhnə brauzerlər */ fon: -moz-linear-gradient(üst, #c9c9c9 0%, #f6f6f6 2%, #c4c5c7 98%, #757577 100%); /* FF3.6-15 */ fon: -webkit-linear-gradient(üst, #c9c9c9 0%,#f6f6f6 2%,#c4c5c7 98%,#757577 100%); /* Chrome10-25, Safari5.1-6 */ fon: xətti-qradiyent (aşağıya doğru, #c9c9c9 0%,#f6f6f6 2%,#c4c5c7 98%,#757577 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c9c9c9", endColorstr="#757577",GradientType=0); /* IE6-9 */ doldurma: 15px 30px 15px 40px; şrift ölçüsü: 14px; rəng: #454547; mətn dekorasiyası: heç biri; mətni çevirmək:böyük hərf; keçid: bütün 0.3s rahatlığı; ).dws-menyu a:hover( /* Permalink - bu gradienti redaktə etmək və paylaşmaq üçün istifadə edin: http://colorzilla.com/gradient-editor/#e0e1e5+0.454547+2.454547+98,e0e1e5+100 */ fon: #e0e1e5; /* Köhnə brauzerlər */ fon: -moz-linear-gradient(üst, #e0e1e5 0%, #454547 2%, #454547 98%, #e0e1e5 100%); /* FF3.6-15 */ fon: -webkit-linear-gradient(üst, #e0e1e5 0%,#454547 2%,#454547 98%,#e0e1e5 100%); /* Chrome10-25, Safari5.1-6 */ fon: xətti-qradiyent (aşağıya, #e0e1e5 0%,#454547 2%,#454547 98%,#e0e1e5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e0e1e5", endColorstr="#e0e1e5",GradientType=0); /* IE6-9 */ rəng: #ffffff; qutu-kölgə: 1px 5px 10px -5px qara; keçid: bütün 0.3s rahatlığı; )

    İstəsəniz, bu menyu saytda sizə uyğun olan üslub üçün tərtib edilə bilər, sadəcə rəng yaratmaq və kodda dəyişdirmək kifayətdir. Nəticə təmiz CSS ilə hazırlanmış sadə və eyni zamanda gözəl üfüqi menyudur.

    Gününüz xeyir, əziz oxucular. Bu gün mövzunu müzakirə edəcəyik html və css istifadə edərək üfüqi menyu necə hazırlanır". Menyu, bir qayda olaraq, saytın başlığında yerləşir və ən vacib səhifələrə keçidlərin siyahısıdır, ona da deyilir. Əsas menyu. İstifadəçilər daim bu linklərə klik edəcəklər. Onları necə təşkil etdiyiniz və menyunu hansı dizaynla təqdim etdiyiniz istifadəçi davranışına, konversiyaya, onların saytınızdakı ümumi təcrübəsinə və əlbəttə ki, .

    Horizontal menyu üçün HTML kodu

    Bir vaxtlar saytın əsas menyusu şəkillər, cədvəllər, flaş və bəlkə də başqa bir şey üzərində hazırlanırdı, lakin indi "siyahı" etiketlərindən istifadə edərək menyu yaratmağın ən populyar və düzgün üsulu var.

    Teqlər menyu yaratmaq üçün istifadə olunur.

    Aşağıdakı kodda menyu yaratmaq üçün html teqlərindən istifadə nümunəsi:

    • ev
    • Xidmətlər
    • Qiymətlər
    • Əlaqələr

    Horizontal Menyu üçün Standart CSS Üslubları

    ul ( siyahı üslubu: heç biri; /*siyahı markerlərini sil*/ kənar: 0; /*paddingi sil*/ padding-left: 0; /*doldurmanı sil*/ ) a ( mətn dekorasiyası: heç biri; /*altın xəttini sil link mətn*/ ) li ( float:left; /*Menyunu həyata keçirmək üçün siyahını üfüqi olaraq yerləşdirin*/ margin-right:5px; /*Menyu elementlərinə abzas daxil edin*/ )

    Başlıqda heç bir xüsusi üslub və zəng və fit olmadan hazır üst menyu alırıq, bunu gələcəyinizin çərçivəsi adlandırmaq olar. gözəl menyu. Bu html və css-i kopyalayıb yapışdırsanız, belə görünəcək.

    Gələcək menyunuz üçün çərçivə (şablon) nümunəsi

    Hər şey olduqca sadə oldu, siz, əlbəttə ki, dərhal gözəl bir əsas menyu istəyirsiniz, amma əsasları başa düşmədən, html və css-də səhvlər olmadan yaxşı bir menyu yarada bilməyəcəksiniz.

    Bir neçə başqaları da var CSS üsulları float-a əlavə olaraq menyunu üfüqi etmək üçün istifadə olunur:left; , məsələn display:inline-block; və ya ekran:flex; , lakin yuxarıda təsvir olunan üsuldan istifadə etmək tövsiyə olunur.

    Gəlin menyu şablonumuzu müxtəlif üslublarla dolduraq və hazırlayaq gözəl.

    Veb sayt üçün gözəl üfüqi menyu nümunələri

    İndi bəzi hazır nümunələr verəcəyəm hazır dizaynüfüqi menyu.

    Saytınız üçün bütün "gözəl şeyləri" özünüz yarada bilərsiniz, İnternetə baxmayın. Bunun ən asan yolu aşağıdakı nümunələrdən birinə əsaslanır.

    Ayrı-ayrı maddələrlə sadə mavi menyu

    "Üst" menyu üçün CSS üslubları

    Aşağıda üslublar var bu menyu. HTML "skelet" menyusunda olduğu kimi qalır.

    Ul ( siyahı üslubu: heç biri; /*siyahı markerlərini sil*/ kənar: 0; /*paddingi sil*/ padding-left: 0; /*doldurmanı sil*/ margin-top:25px; /*yuxarı girinti*/ ) a ( mətn dekorasiyası: heç biri; /*link mətninin altını silmək*/ fon:#30A8E6; /*menyu elementinə fon əlavə etmək*/ color:#fff; /*link rəngini dəyişdirmək*/ padding:10px; /*doldurma əlavə etmək */ font-family: arial; /*şrifti dəyişdirin*/ border-radius:4px; /*yuvarlaqlaşdırma əlavə edin*/ -moz-keçid: bütün 0,3s 0,01s asanlıq; /*hamar keçid etmək*/ -o-keçid : bütün 0,3s 0,01s asanlıq; -webkit-keçid: hamısı 0,3s 0,01s asanlıq; ) a:hover (fon:#1C85BB;/*hover effekti əlavə edin*/ ) li ( float:sol; /*siyahı üfüqi olaraq yerləşdirin menyunu həyata keçirin*/ margin-right:5px; /*Menyu elementlərinə abzas daxil edin*/ )

    Qırmızı fonda rəngli xətt üzərində yerləşən əsas menyu

    rəng xəttində css üslubunda menyu

    ul ( siyahı üslubu: heç biri; /*siyahı markerlərini sil*/ kənar: 0; /*paddingi sil*/ padding-left: 0; /*doldurmanı sil*/ margin-top:25px; /*indent top*/ fon :#FF4444; /*bütün menyuya fon əlavə edin (bu parametrin dəyişdirilməsi bütün menyunun rəngini dəyişəcək)*/ hündürlük: 50px; /*hündürlüyü təyin edin*/ ) a ( mətn dekorasiyası: heç biri; /* link mətninin altını silmək* / background:#FF4444; /*menyu elementinə fon əlavə etmək (bu parametrin dəyişdirilməsi bütün menyu elementlərinin rəngini dəyişəcək)*/ color:#fff; /*linkin rəngini dəyişdirin* / padding:0px 15px; /*padding əlavə edin*/ font-family: arial; /*şrifti dəyişdirin*/ line-height:50px; /*menyunu şaquli olaraq hizalayın*/ displey: blok; sərhəd-sağ: 1px bərk # F36262; /*sağa haşiyə əlavə edin*/ -moz-keçid: hamısı 0,3s 0,01s rahatlıq; /*hamar keçid etmək*/ -o-keçid: hamısı 0,3s 0,01s asanlıq; -webkit-keçid: hamısı 0,3s 0,01s asanlıq; ) a:hover (fon:#D43737;/ *hover effekti əlavə edin*/ ) li ( float:left; /*Menyu həyata keçirmək üçün siyahını üfüqi olaraq yerləşdirin*/ )

    HTML+CSS-də açılan menyu

    Həyata keçirmək üçün saytda əlavə açılan (açılan) menyu hər hansı menyu elementi üçün üfüqi menyudan istənilən keçid üçün HTML koduna elementlərin əlavə siyahısını əlavə etməliyik və CSS üslublarını dəyişməliyik. Üslublarda sadə bir hiylədən istifadə edəcəyik - hover üzərində açılan menyunun ekranını lazım olan elementə dəyişdirək. yuxarı menyu. Məsələn, "xidmətlər" maddəsini götürək.

    Sadə açılan menyunun yaradılması nümunəsi

    Açılan menyunun HTML kodu

    • ev
    • Xidmətlər
      • Xidmət 1
      • Uzun xidmət 2
      • Xidmət 3
    • Qiymətlər
    • Əlaqələr

    Açılan CSS üslubları

    ul ( siyahı üslubu: heç biri; /*siyahı markerlərini sil*/ kənar: 0; /*paddingi sil*/ padding-left: 0; /*doldurmanı sil*/ margin-top:25px; /*indent top*/ fon :#819A32; /*bütün menyuya fon əlavə edin*/ hündürlük: 50px; /*hündürlüyü təyin edin*/ ) a (mətn dekorasiyası: heç biri; /*link mətninin altını cızıqdan çıxarın*/ fon:#819A32 ; /*menyu elementinə fon əlavə edin*/ color:#fff; /*linklərin rəngini dəyişdirin*/ padding:0px 15px; /*padding əlavə edin*/ font-family: arial; /*şrifti dəyişdirin*/ line-height :50px; /*menyunu vertikallara uyğunlaşdırın*/ displey: blok; haşiyə-sağ: 1px bərk #677B27; /*sağa haşiyə əlavə edin*/ -moz-keçid: bütün 0,3s 0,01s asanlıq; /*a hamar keçid*/ -o-keçid: hamısı 0,3s 0,01s asanlıq; -webkit-keçid: hamısı 0,3s 0,01s asanlıq; ) a:hover (fon:#D43737;/*Hover effekti əlavə edin*/ ) li ( float :left; /*Menyu həyata keçirmək üçün siyahını üfüqi şəkildə yerləşdirin* / mövqe:nisbi; /*yerləşdirmə üçün mövqe təyin edin*/ ) /*Gizli açılan menyu üçün üslublar*/ li > ul ( mövqe: mütləq; yuxarı: 25px; ekran: heç biri; ) /*Gizli hissəni görünən etmək*/ li:hover > ul ( display:block; width:250px; /*Açılır menyunun enini təyin edin*/ ) li:hover > ul > li ( float:none; /* Üfüqi yerləşdirməni silin* / )

    Hansı xidmətlərə və kateqoriyalara sahib olmağınız lazım olduğunu dəqiq başa düşmək üçün materialla tanış olmağı məsləhət görürəm:.

    Baş üfüqi menyu yaratmaq, bir neçə şablon hazırlamaq, ona sadə üslublar əlavə etmək və onu daha gözəl etmək, saytınız üçün açılan menyunu necə hazırlamaq barədə mümkün qədər qısa məlumat verməyə çalışdım. Rahatlıq üçün yuxarıda təqdim olunan bütün menyuları bir html faylında topladım, aşağıda yükləyə bilərsiniz. Ekran görüntüsündə olduğu kimi görünür:

    Diqqətiniz üçün təşəkkürlər.

    Şaquli menyu işarələnmiş və ya nömrələnmiş siyahı əsasında aparılır. Varsayılan olaraq, bütün siyahı elementləri konteyner elementinin bütün enini tutaraq şaquli şəkildə yığılır, bu da öz növbəsində konteyner blokunun bütün enini tutur.

    Siyahı elementlərində yalnız keçidlər deyil, həm də başlıqlar, nişanlar, şəkillər ola bilər. Şaquli menyudan istifadə edərək saytda şərhlər, kateqoriyalar siyahısı və s.

    1. Başlıq ilə şaquli menyu

    Sadə zərif dizayn. Saytda üslub kateqoriyaları üçün uyğundur. Üzəri üzərinə sürükləndikdə siyahı elementi keçidin rəngini dəyişir.

    Kateqoriyalar

    * (qutu ölçüsü: haşiyə qutusu; kənar: 0;) .widget ( dolgu: 20px 30px; fon: ağ; şrift ailəsi: "Roboto", sans-serif; ) .widget-title ( mətni çevirmək: böyük hərf ; hərf aralığı: 2px; rəng: #222; şrift ölçüsü: 16px; doldurma-sol: 15px; kənar-aşağı: 15px; haşiyə-sol: 2px bərk #b99d61; ) .widget siyahısı ( doldurma: 0; siyahı -stil: heç biri; ) .widget-list a:before ( məzmun: "\2014"; kənar-sağ: 14px; ) .widget-list a ( mətn dekorasiyası: heç biri; kontur: heç biri; ekran: blok; doldurma: 6px 0; hərf aralığı: 1px; şrift çəkisi: 300; rəng: #444; keçid: .3s xətti; ) .widget-list a:hover (rəng: #b99d61;)

    2. "Metro xəritəsi" üslubunda şaquli menyu

    Şaquli menyunun dizaynı üçün maraqlı bir həll, iç içə menyular əlavə etmək mümkündür. "Metro filialı" - siyahının sol sərhədi, hər bir keçiddən əvvəl markerlər yaradılır.

    .metro ( siyahı üslubu: heç biri; doldurma: 0; kənar: 30px 0 0 50px; haşiyə-sol: 5px bərk #DAE4F1; ) .metro li (xətt hündürlüyü: 2em;) .metro ul ( kənar: 20px 0 20px 15px; doldurma: 0; haşiyə: heç biri; siyahı üslubu: heç biri; ) .metro ul:əvvəl, .metro ul:sonra ( məzmun: ""; en: 5px; hündürlük: 28px; fon: #DAE4F1; mövqe: nisbi ; ekran: blok; sol: -9px; ) .metro ul:əvvəl ( çevirmək: döndər (-45deg); kənar-yuxarı: -15px; ) .metro ul:sonra ( çevirmək: döndər (45deg); alt: -20px ; ) .metro ul li (sərhəd-sol: 5px bərk #DAE4F1;) .metro ul li:birinci uşaq ( yuxarı kənar: -5px; padding-top: 5px; ) .metro ul li:sonuncu uşaq ( doldurma -alt: 9px; kənar-alt: -25px; ) .metro a ( mətn dekorasiyası: heç biri; ekran: blok; şrift ailəsi: "Noto Sans", sans-serif; rəng: #4A4B4D; ) .metro a: əvvəl ( məzmun: ""; displey: inline-block; fon: #CA682D; en: 12px; hündürlük: 12px; sol: -9px; mövqe: nisbi; sərhəd-radius: 50%; kənar-sağ: .5em; )

    3. Hover effektləri ilə şaquli menyu

    Simge və fon doldurma Siyahı elementinin üzərinə getdikdə görünən , şaquli menyu elementlərinin dizaynını şaxələndirməyə kömək edəcək.

    Kateqoriyalar

    .category-wrap ( dolgu: 15px; fon: ağ; en: 200px; qutu-kölgə: 2px 2px 8px rgba(0,0,0,.1); şrift ailəsi: "Helvetica Neue", Helvetica, Arial, sans -serif; ) .category-wrap h3 ( şrift ölçüsü: 16px; rəng: rgba(0,0,0,.6); kənar: 0 0 10px; doldurma: 0 5px; mövqe: nisbi; ) .category-wrap h3:sonra (məzmun: ""; en: 6px; hündürlük: 6px; fon: #80C8A0; mövqe: mütləq; sağ: 5px; alt: 2px; qutu-kölgə: -8px -8px #80C8A0, 0 -8px #80C8A0 , -8px 0 #80C8A0; ) .kateqoriyaya sarın ul ( siyahı üslubu: heç biri; kənar: 0; doldurma: 0; sərhəd-yuxarı: 1px bərk rgba(0,0,0,.3); ) .kateqoriya- wrap li (margin: 12px 0 0 0px;) .category-wrap a (mətn dekorasiyası: heç biri; displey: blok; şrift ölçüsü: 13px; rəng: rgba(0,0,0,.6); doldurma: 5px ; mövqe: nisbi; keçid: .3s xətti; ) .kateqoriyaya sarın: a:sonra ( məzmun:"\f18e"; şrift ailəsi: FontAwesome; mövqe: mütləq; sağ: 5px; rəng: ağ; keçid: .2s xətti ; ) .kateqoriyaya sarın a:hover ( fon: #80C8A0; rəng: ağ; )

    4. İşarələrlə şaquli menyu

    Menyu nişanları hər bir kateqoriyanın şifahi təsvirini tamamlayan vizual lövbər təmin edir. Nişanları göstərmək üçün qoşulmalısınız. Siz həmçinin hər hansı digər ikon şriftindən və ya şəkil nişanlarından istifadə edə bilərsiniz.

    Kateqoriyalar

    * (qutu ölçüsü: sərhəd qutusu; kənar: 0;) .widget ( dolgu: 20px; haşiyə: 5px bərk #f1f1f1; fon: #fff; sərhəd radiusu: 5px; şrift ailəsi: "Roboto", sans- serif; ) .widget h3 ( alt haşiyə: 20px; mətn hizalanması: mərkəz; şrift ölçüsü: 24px; şrift çəkisi: normal; rəng: #424949; ) .widget ul ( kənar: 0; doldurma: 0; siyahı -stil: heç biri; en: 250px; ) .widget li ( alt haşiyə: 1px bərk #eaeaea; doldurma-alt: 15px; kənar-alt: 15px; ) .widget li:sonuncu uşaq ( haşiyə-alt: heç biri; margin-bottom: 0; padding-bottom: 0; ) .widget a ( mətn dekorasiyası: heç biri; rəng: #616a6b; displey: inline-block; ) .widget li:before ( font-family: FontAwesome; font-size : 20px; şaquli-align:alt; rəng: #dd3333; kənar-sağ: 14px; ) .widget li:nth-child(1):əvvəl (məzmun:"\f1fc";) .widget li:nth-child( 2):əvvəl (məzmun:"\f0d0";) .widget li:nth-child(3):əvvəl (məzmun:"\f0cd";) .widget li:nth-child(4):əvvəl (məzmun:" \f028";) .widget li:nth-child(5):əvvəl (məzmun:"\f03d";)

    5. Şəkillərlə şaquli menyu

    Bu nümunə yeni məhsullar, oxşar məhsullar və s. ilə blokların dizaynı üçün istifadə edilə bilər. onlayn mağaza saytı.

    Jpeg">

    Məhsul 1
    ₽ 2000
    Məhsul 2
    ₽ 2500
    Məhsul 3
    ₽ 2070
    @import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600"); .col ( en: 300px; fon: ağ; doldurma: 20px; haşiyə: 1px bərk #eeeeee; şrift ailəsi: "Open Sans", sans-serif; ) .col * (kənar: 0;) .widget-title ( haşiyə: 0 0 30px; sətir hündürlüyü: 1; mətn-transformasiya: böyük hərf; hərf aralığı: 1px; şrift ölçüsü: 20px; rəng: #242424; daşqın: gizli; ) .widget-title:after (məzmun: " "; mövqe: nisbi; displey: daxili blok; en: 100%; şaquli düzülmə: orta; sağ: -15px; kənar-sağ: -100%; haşiyə-yuxarı: 2px bərk #cca86d; ) .qiymət xətti (alt kənar: 20px;) .qiymət-sətir:sonuncu uşaq (kənar-alt: 0;) .qiymət-sətir:sonra ( məzmun: ""; ekran: cədvəl; aydın: hər ikisi; ) .məhsul şəkli ( en: 80px; float: sol; ) .product-image a ( display: block; kontur: none; ) .product-image img ( display: block; en: 100%; ) .product-content ( float: sol; margin -sol: 20px; ) .məhsul başlığı ( şrift ölçüsü: 18px; kənar-alt: 10px; sətir hündürlüyü: 1; ) .məhsul başlığı a ( mətn dekorasiyası: heç biri; rəng: #242424; ) .qiymət -qutu (rəng: №666; şrift ölçüsü: 18px; xəttin hündürlüyü: 1; ) .ulduz reytinqi ( alt kənar: 10px; şrift ölçüsü: 13px; mövqe: nisbi; şrift ailəsi: "FontAwesome"; ) .ulduz reytinqi: əvvəl ( məzmun: "\f005 \f005 \f005 \f005 \" f005"; mövqe: mütləq; yuxarı: 0; sol: 0; rəng: #FF9919; )

    Bu yazıda biz sabit yan məlumat menyusu edəcəyik. Nişanları həyata keçirmək üçün şrifti birləşdirəcəyik.

    Addım 1. Şrifti nişanlarla birləşdirin, boş sənəd yaradın

    FontAwesome şrifti ilə işləmək haqqında ətraflı məlumatı və layihənin özünə keçidi postumda tapa bilərsiniz -.

    Qoşulmuş faylları olan səhifənin kodu budur:

    Sabit yan menyu

    Addım 2: Sabit Menyu HTML İşarələməsinin əlavə edilməsi

    Sabit menyumuz üçün işarələmə kodu budur:

    Diqqət etdiyiniz kimi, etiketi tətbiq etdim

    Addım 3. Alt menyu HTML İşarələməsinin əlavə edilməsi

    Alt menyu əsas menyu ilə eyni siyahı, üstəgəl etiketdir , "solda vaqon" işarəsini göstərən, müəyyən bir "quyruq" funksiyasını yerinə yetirir, ətraflı məlumat aşağıdakı şəkildədir 🙂


    Həmçinin, bu element menyu bloku ilə alt menyu arasındakı boşluğu birləşdirir və bununla da keçid funksiyasını həyata keçirməyə imkan verir.

    Addım 4 Sabit Kenar Çubuğunu Formalaşdırın

    Stil kodunu vacib olduğu yerlərdə şərh etməyə çalışdım. Ümumiyyətlə, bütün şərh edilməmiş məqamlar fonun banal üslubu, rəng və s.

    #sidebar-menu ( mövqe: sabit; /* menyumuzu düzəldin */ yuxarı: 200px; /* menyunun brauzerin yuxarı kənarına nisbətən mövqeyi */ sol: 0; /* menyunu sol kənara yapışdırın * / padding: 10px; fon: # 323A45; rəng: #FFF; sərhəd radiusu: 0 8px 8px 0; ) #sidebar-menyu li (mövqe: nisbi; kursor: göstərici; ) #sidebar-menyu li i ( /* Set sabit ölçüdə olan nişanlar, hündürlük və xətt hündürlüyü eyni olmalıdır */ eni: 27px; hündürlük: 27px; xətt hündürlüyü: 27px; sərhəd radiusu: 4px; fon: #3CB7E7; mətni align: mərkəzə; ) #sidebar-menu li+li (margin-top: 4px;) #sidebar-menu b ( display: none; mövqe: mütləq; /* sol kənara nisbətən mövqe li elementinin eninə bərabərdir */ sol: 27px; üst: 0; hündürlük: 27px; /* eni blok menyusu ilə alt menyu arasındakı boşluğa bərabərdir */ eni: 16px; xəttin hündürlüyü: 27px; fon: şəffaf; rəng: #323A45; /* işarəni yerləşdirin özünü sağa, beləliklə vizual olaraq alt menyu bloku ilə birlikdə görünsün */ text-align: right; ) #sidebar -menu li > ul (ekran: heç biri; mövqe: mütləq; yuxarı: -10px; sol: 42px; eni: 120px doldurma: 10px fon: #323A45; sərhəd radiusu: 8px ) #sidebar-menu li:hover b, #sidebar-menu li:hover ul (ekran: blok;) #sidebar-menyu li a (ekran: blok; padding: 4px 8px; sərhəd-radius: 4px; rəng: #FFF ; -webkit-keçid: hamısı .2s; -moz-keçid: hamısı .2s; -ms-keçid: hamısı .2s; -o-keçid: hamısı .2s; keçid: hamısı .2s; ) #sidebar-menyu li a :hover (ekran: blok; fon: #3CB7E7; )

    Stil haqqında hər hansı bir sualınız varsa, bu yazıya şərhlərdə yazın, cavab verməkdən məmnun olaram.
    Hamısı budur! Sabit Yan Menyu Hazırlandı 🙂

    Yeniləmə ilə saytdakı hər şey uyğunlaşmalıdır, biz üfüqi menyunu istisna etmirik, bu da eyni şəkildə bütün ekranlarda dost olmalıdır. JS-dən istifadə etmədən təmiz üslubda hazırlanmış klassik naviqasiyanı nəzərdən keçirməyi təklif etdiyim yerdə. Sadə bir şəkildə yaradıldığı üçün öz üslubunda bu qədər sayta sığa bilər, standart forma, lakin təsirlərin olması ilə. Həmçinin, mobil mediadan baxsanız, avtomatik olaraq sağ tərəfdə bir düymə görünəcək, burada tam genişliyə kliklədiyiniz zaman alt kateqoriyalar görünəcək, lakin hər şey səliqəlidir, eyni tərəfdə şrift düymələri də vizual olaraq görünəcək.

    Gördüyünüz kimi, burada sadə istifadə etdik HTML siyahıları, hamısı bu və ya digər kateqoriyaya keçid üçün keçidlər altında olan bütün siyahıları göstərmək üçün. Konsepsiya ondan ibarətdir ki, naviqasiya siyahısını üfüqi şəkildə təşkil etmək gözəldir, lakin mobil olduqda, materiala əlavə edilmiş şəkillərdə göstərildiyi kimi avtomatik olaraq şaquli olacaq.

    Əvvəlcə hər bir sorğuya nə təyin olunur, burada tərtibatçının özü həmin mövzuya və ya tematik cəhətdən daha uyğun olan rəqəmlərə keçə bilər. Menyu özü yaradılmışdır tünd yaşıl, sadəcə seçilmiş bu kölgə, nadir hallarda görünür. Ancaq CSS üslubuna girərək və orada sizə lazım olan dizayn tərzini təyin etməklə və ən əsası İnternet resursunun əsasına mükəmməl uyğunlaşmaqla hər şeyi kökündən dəyişdirmək olar.

    1 . Belə ki, default olaraq gedir və ya portala girərkən.

    2 . Biz artıq mobil cihazdan izləyirik, lakin menyunun altında hələ zəng edilməmişdir.

    3 . Bütün tələb olunan sorğuları göstərən bir klik burada edildi.

    Quraşdırmaya başlayaq:



    ZORNET.RU





    css

    bölmə(
    eni: 100%;
    maksimum eni: 1198px;
    kənar: 0pxauto;
    ekran: masa;
    mövqe: qohum;
    }

    Başlıq(
    eni: 100%;
    ekran: masa;
    fon rəngi: #175812;
    kənar-alt: 50px;
    }

    #kamtukagnpos(
    float: sol;
    şrift ölçüsü: 25px;
    mətni çevirmək: böyük hərf;
    rəng: #ffab2;
    şrift çəkisi: 600
    doldurma: 19,8px 0px;
    }

    #kamtukagnpos:hover(
    mətn kölgəsi: 0px 0px 6px rgba(255, 250, 250, 0.67);
    }

    Nav(
    eni:avtomatik;
    üzmək: sağ;
    }

    Navul(
    ekran: masa;
    üzmək: sağ;
    }

    Nav ul li(
    float:sol;
    }

    Nav ul li:sonuncu uşaq(
    padding-sağ: 0px;
    }

    Nav ul li a (
    rəng: #e4f2ff;
    şrift ölçüsü: 19px;
    doldurma: 24px 19px;
    ekran: inline-block
    mətn kölgəsi: 0 1px 0 #2e2f2e;
    }

    Nav ul li a: hover (
    fon rəngi: #143a06;
    rəng: #fff9c8;
    keçid: bütün 0.7s asan 0s;
    mətn kölgəsi: 0 1px 0 #282b28;
    }

    Nav ul li a: hover i (
    rəng: #fdf7c9;
    keçid: bütün 0.7s asan 0s;
    mətn kölgəsi: 0 1px 0 #1c1d1c;
    }

    Nav ul li a i (
    padding-sağ: 9px;
    rəng: #f4faff;
    keçid: bütün 0.7s asan 0s;
    mətn kölgəsi: 0 1px 0 #202120;
    }

    Naviqasiya-menusaita ul(
    ekran: masa;
    eni: 24px;
    }

    Naviqasiya-menusaita ul li(
    eni: 100%;
    hündürlük: 3px;
    fon rəngi:#e9f0f7;
    kənar-alt: 4px;
    }

    Naviqasiya-menusaita ul li:son-uşaq(
    margin-bottom:0px;
    }

    Giriş, etiket(
    ekran: heç biri;
    }

    @media yalnız ekran və (maksimum en: 1440px)(
    bölmə(
    maksimum eni: 95%;
    }
    }

    @media yalnız ekran və (maksimum en: 980px)(
    başlıq(
    doldurma: 20px 0px;
    }

    #kamtukagnpos(
    doldurma: 0px;
    }

    Giriş(
    mövqe: mütləq;
    yuxarı: -9999px;
    sol: -9999px;
    fon: heç biri;
    }

    Giriş:fous(
    fon: heç biri;
    }

    etiket(
    üzmək: sağ;
    doldurma: 8px 0px;
    ekran:daxili blok;
    kursor: göstərici;
    }

    Daxiletmə:checked ~ naviqasiya(
    ekran: blok;
    }

    Nav(
    ekran: heç biri;
    mövqe: mütləq;
    sağ: 0px;
    yuxarı: 53px;
    fon rəngi:#174810;
    doldurma: 0px;
    z indeksi: 99;
    }

    Navul(
    eni:avtomatik;
    }

    Nav ul li(
    üzmək: heç biri;
    doldurma: 0px;
    eni: 100%;
    ekran: masa;
    }

    Nav ul li a(
    rəng:#f7f2f2;
    font ölçüsü: 15px;
    doldurma: 10px 20px;
    ekran: blok;
    sərhəd-alt: 1px bərk rgba(204, 197, 197, 0.1);
    }

    Nav ul li a i(
    rəng:#f9f5d5;
    padding-sağ: 13px;
    }
    }

    @media yalnız ekran və (maksimum en: 480px) (
    bölmə (maksimum en: 90%;)
    }

    @media yalnız ekran və (maksimum en: 360px) (
    etiket (doldurma: 5px 0px;)
    #kamtukagnpos(şrift ölçüsü: 20px;)
    naviqasiya(yuxarı:47px;)
    }


    Yerləşdirməzdən əvvəl Demo səhifəsinə baxmaq və hər şeyin necə işlədiyini həqiqətən qiymətləndirmək vacibdir, amma əslində resursun adına əlavə olunan effektdən başqa, bütün işarələrin kölgə altına düşdüyü yerdə belə bir şey yoxdur. , bu daha parlaq göstərilir.