ev > Təlimatlar > Veb üçün açılan menyunun yaradılması. Çıxarılan yan menyu. Nişanlarla şaquli menyu


Veb üçün açılan menyunun yaradılması. Çıxarılan yan menyu. Nişanlarla şaquli menyu




Saytın naviqasiya menyusu, istifadəçi profili menyusu və s. kimi, siz onları gizlədə bilərsiniz və onlar kliklədiyiniz zaman görünəcək. Bəziləri bunun səhifənin istifadəsinə təsir etdiyini söyləyə bilər. Düşünmürəm, çünki səhifə daha təmiz olur, yəni naviqasiya daha asan olur. İnsan bağlantılar dağında çaşmaz.
Bu gün mən standart olaraq səhifədə gizlədilmiş slayd panelləri toplusunu hazırlamışam. Menyuya zəng etmək üçün müvafiq ikona klikləmək və ya kursu keçmək lazımdır. Bu texnika bir ekranda bir çox elementi yerləşdirməyin mümkün olmadığı mobil tətbiqlərdən veb dizaynına gəldi. Zamanla bu cür panellər vebsaytlara köçdü. Bu kolleksiya, ilk növbədə, mobil tərtibatçılar üçün faydalı olacaq. Kiçik ekran qətnaməsi ilə, məhz bu cür pop-up naviqasiyası görünəcək, lakin normal, böyük monitorlarda hamının öyrəşdiyi adi menyunu yarada bilərsiniz. Beləliklə, mobil cihazı olan bir şəxs saytınızda çaşmayacaq, çünki o, çoxdan slayd panellərindən istifadə etməyə vərdiş edib, çünki onun smartfonundakı bütün proqramlar eyni prinsiplə işləyir.
Qeyd etmək istərdim ki, bu kolleksiyaya yalnız mobil saytlar üçün nəzərdə tutulmuş plaginlər daxildir və onların geniş monitorlarda istifadəsi yersiz olardı. Baxmayaraq ki, hər hansı bir veb sayt üçün uyğun olan universal panellər də var. Demoya baxın və ehtiyaclarınıza uyğun olanı seçin.
Açılan panellər üzərində işləyir. Veb saytınızda belə bir menyu tətbiq etmək çətin olmayacaq və tərtibatçıların veb saytlarında məhsullarından necə istifadə ediləcəyinə dair ətraflı təlimatlar var.
Tezliklə biz Postovoy veb-saytının yenidən dizaynını planlaşdırırıq və tərtibatda aşağıda təqdim olunan jQuery plaginlərindən birini istifadə edəcəyik.
Belə ki. Veb saytınız üçün 20 jQuery açılan slayd paneli plaginlərindən ibarət kolleksiyanı diqqətinizə çatdırırıq. Şərh yazmağı unutmayın.

Swipeable Side Menu jQuery-də slayd paneli şəklində sevimli sürüşmə naviqasiya menyusu. Həm mobil sayt, həm də adi sayt üçün idealdır.

Kətandan kənar naviqasiyalar üçün keçidlər 3D də daxil olmaqla müxtəlif animasiya effektləri ilə nümayiş etdiriləcək slayd panelini təşkil etməyə imkan verən son dərəcə güclü plagin. Pluginə 14 animasiya effekti daxildir.

jPanelMenuNaviqasiya paneli iOS proqramları üslubunda hazırlanmışdır. Mobil saytın inkişafını asanlaşdıracaq asan və sürətli menyu.

Google Nexus Menyusunu Yenidən Yaradın Sürüşən panel Google Nexus menyusuna bənzəyir.

bigSlide - JQuery-də slayd naviqasiyası paneli Slayd paneli həm mobil sayt, həm də adi sayt üçün uyğundur. Onu çağırmaq üçün üç zolağı təsvir edən ikona vurmaq lazımdır.

Çox Səviyyəli Push MenuJqutry plagini bigSlide ilə eyni şəkildə işləyir. Simgeyə tıkladığınız zaman panel çağırılır. Bu menyunun üstünlüyü ondan ibarətdir ki, o, çox səviyyəli strukturu dəstəkləyir.

Qutu Qapağı Menyu 3D effektli çox gözəl slayd naviqasiya paneli.

Animasiyalı Sərhəd Menyuları Ekranın küncündəki artı işarəsinə klikləməklə, nişanları olan kiçik yan panel görünür. Onu gizlətmək üçün “-” işarəsi olan ikona vurmaq lazımdır.

Snap.js Slide paneli mobil cihazlar üçün nəzərdə tutulub. Menyu ekranı siçan kursoru ilə və ya mobil cihazdadırsa, barmaq ilə sürükləməklə çağırılır.

Slayd və Push Menyuları |

MenyJquery plagini veb saytınızda 3D effekti ilə sərin naviqasiya slayd çubuğunu tətbiq etməyə imkan verir.

mb.jquery Digər panellərdən fərqli olaraq, onu hərəkət etdirmək əvəzinə ekranın üstündə görünür. Bloka istənilən html, mətn və ya istədiyiniz hər şeyi qoya bilərsiniz.

Android DockPanel mobil saytlar üçün nəzərdə tutulub və ekranın aşağı hissəsində yerləşir. Kliklədikdə, istənilən keçidləri yerləşdirə biləcəyiniz nişanlar görünür.

Tərkibli slayd paneli Sərin slayd paneli iki səviyyədə hazırlanmışdır. Birincisi menyudur. İkincisi məzmundur. İndi bu effekt dizaynerlər və veb tərtibatçıları arasında çox populyardır. Bir çox tətbiq tapa bilərsiniz. Microsoft-un poçtu oxşar prinsiplə işləyir.

Bu təlimatda biz sizə saytınızı daha da asan naviqasiya etmək üçün yan paneldə açılan menyu yaratmağı göstərəcəyik. Bu tip menyu müasir veb dizaynında məşhur bir tendensiyadır. Bir çox saytlar bu tip menyudan istifadə edirlər. Onun köməyi ilə siz layihə səhifələrindəki xaosdan xilas ola, onu daha oxunaqlı edə, istifadəçilərin diqqətini əsas məzmuna yönəldə bilərsiniz.

Bu, diqqəti yayındırmadan minimalizmə nail olmaq üçün əla bir yoldur. Bu gün biz özümüz belə bir menyu yaradacağıq.

Naviqasiya menyusu yaratmaq üçün əvvəlcə parametrlərə nəzər salaq:

Animasiya menyusu nümayişi

Əvvəlcə Normalize.css-i yükləməli və menyunun bütün brauzerlərdə eyni göründüyünə əmin olaraq standart brauzer üslublarını konfiqurasiya etməlisiniz. Alt elementləri olan menyu elementlərinin qarşısında oxu göstərmək üçün FontAwesome istifadə edəcəyik. Menyuda sinifləri dəyişmək üçün jQuery-ni yükləyin və bütün xüsusi jQuery kodunu script.js-ə köçürün. Son keçid veb layihəsi üçün əsas cədvəldir.

Hamburger simvolu

Hamburger simvolu sayt naviqasiyasının ümumi atributudur. O, tez-tez FontAwesome kimi ikon şriftindən istifadə etməklə yaradılır, lakin bu dərslikdə biz bəzi animasiyalar əlavə edəcəyik ki, onu sıfırdan yaradaq. Bizim hamburger ikonamız üfüqi zolaqlar kimi göstərilən üç div sinifini özündə cəmləşdirən span etiketidir.

Üslublar belə görünür:

keçid düyməsi ( mövqe: sabit; en: 44px; hündürlük: 40px; doldurma: 4px; keçid: .25s; z indeksi: 15; ) .keçid düyməsi: hover ( kursor: göstərici; ) . keçid düyməsi .menyu -bar (mövqe: mütləq; haşiyə-radius: 2px; en: 80%; keçid: .5s; ) .keçid düyməsi .menu-bar-top ( haşiyə: 4px bərk #555; sərhəd-alt: heç biri; yuxarı: 0; ) .keçid düyməsi .menyu-bar-orta ( hündürlük: 4px; fon rəngi: #555; yuxarı kənar: 7px; alt kənar: 7px; yuxarı: 4px; ) .keçid düyməsi .menyu-bar -alt ( haşiyə: 4px bərk #555; sərhəd-yuxarı: heç biri; yuxarı: 22px; ) .button-open .menu-bar-top ( transform: rotate(45deg) translate(8px, 8px); keçid: .5s; ) .button-open .menu-bar-middle ( transform: translate(230px); keçid: .1s inase-in; qeyri-şəffaflıq: 0; ) .button-open .menu-bar-bottom ( transform: rotate (-45deg) tərcümə (8px, -7px); keçid: .5s; )

Simge sabit bir mövqeyə malikdir və səhifəni sürüşdürərkən dəyişmir. O, həmçinin 15 z indeksinə malikdir, yəni həmişə digər elementlərin üstündə olacaq. Hər biri digər üslubları paylaşan üç çubuqdan ibarətdir. Beləliklə, biz hər bir zolağı class.menu-bara köçürəcəyik. Qalan üslubları ayrı-ayrı siniflərə keçiririk. Sehr biz açıq olan span teqinə başqa sinif əlavə etdikdə baş verir. Biz onu jQuery istifadə edərək əlavə edirik:

$(sənəd).ready(function() ( var $toggleButton = $(".toggle-button"); $toggleButton.on("klik", function() ( $(bu).toggleClass("button-open" ); ))) ) );

JQuery ilə tanış olmayanlar üçün biz ikonamızı ehtiva edən $toggleButton ilə dəyişəni işə salırıq. Biz onu JavaScript-ə ehtiyac olmadan dəyişəndə ​​saxlayırıq. Sonra ikonadakı klikləri dinləyən hadisə dinləyicisi yaradırıq. İstifadəçi hər dəfə hamburger ikonasını kliklədikdə, hadisə dinləyicisi class.button-open funksiyasını dəyişdirən toggleClass() funksiyasını işə salır.

.button-open sinfi əlavə edildikdən sonra biz elementlərin göstərilmə üsulunu dəyişmək üçün ondan istifadə edə bilərik. Biz CSS3 translate() və rotate() funksiyalarından istifadə edirik ki, yuxarı və aşağı çubuqlar 45 dərəcə fırlanır, orta bar isə sağa keçib yox olur. Fərdiləşdirə biləcəyiniz animasiya budur:

Açılan Naviqasiya Menyu

İndi sizin hamburger ikonanız olduğuna görə gəlin onu faydalı edək və üzərinə kliklədiyiniz zaman açılan menyu yaradaq. Menyu tərtibatı belə görünür:

  • Ev
  • Haqqında
  • Bloq
  • Oxa klikləyin
    • Hizalanma
    • İşarələmə
    • Şərhlər
  • Kurslar
  • Əlaqədə olmaq

İndi biz bu menyu üçün hər bir üslub haqqında ətraflı məlumat verməyəcəyik, əksinə bir neçə vacib məqama diqqət yetirəcəyik. İlk növbədə, div və .menu-wrap sinfi var. Onun üslublarına baxın:

Menyu sarğı (fon rəngi: #6968AB; mövqe: sabit; yuxarı: 0; hündürlük: 100%; en: 280px; sol kənar: -280px; şrift ölçüsü: 1em; şrift çəkisi: 700; daşqın: avtomatik ; keçid: .25s; z indeksi: 10; )

Mövqe sabitdir, buna görə də səhifəni sürüşdürərkən menyu həmişə eyni vəziyyətdə qalır. 100% hündürlük menyunun səhifədəki bütün şaquli yeri tutmasına imkan verir. Nəzərə alın ki, sol kənar sahə menyunun eninə bərabər olan mənfi rəqəmə təyin edilib. Bu o deməkdir ki, menyu baxış pəncərəsindən yox olacaq. Onu yenidən görünmək üçün jQuery ilə başqa keçid sinfi yaradırıq. JavaScript faylımız belə görünəcək:

$(sənəd).ready(function() ( var $toggleButton = $(".toggle-button"), $menuWrap = $(".menu-wrap"); $toggleButton.on("klik", funksiya() ( $(this).toggleClass("button-open"); $menuWrap.toggleClass("menyu-show"); ) ); ) );

Menyu sarğısını ehtiva edən başqa $menuWrap dəyişəni əlavə edirik. Əvvəllər yaratdığımız eyni hadisə idarəçisindən istifadə edin. Yalnız bu dəfə biz iki sinifə keçirik: biri düymə üçün, digəri isə menyu qabığı üçün. class.menu-show-un sol kənar dəyəri 0-dır, bu kölgə effekti əlavə edəcək.

Menyu-göstəriş (kənar-sol: 0; qutu-kölgə: 4px 2px 15px 1px #B9ADAD; )

Alt menyular və keçidlər

Siz qeyd edə bilərsiniz ki, siyahı elementlərindən birində alt menyudan ibarət class.menu-item-has-children var. Bundan əlavə, linkin dərhal altında .sidebar-menyu-ox sinfi olan span etiketi var.

  • Oxa klikləyin

    • span psevdo-elementdən sonra ::a malikdir və FontAwesome oxunu ehtiva edir. Varsayılan olaraq, alt menyu gizlidir və yalnız oxu kliklədiyiniz zaman görünəcək. Bunu jQuery ilə necə edə bilərik:

    $(sənəd).ready(function() ( var $sidebarArrow = $(".sidebar-menu-arrow"); $sidebarArrow.click(function() ( $(this).next().slideToggle(300); ))) ) );

    Oxa kliklədikdə biz funksiya çağırırıq ki, o da öz növbəsində spandan dərhal sonra növbəti elementi hədəfləyir (bizim vəziyyətimizdə alt menyu) və onu görünən edir. İstifadə etdiyimiz funksiya slideToggle funksiyasıdır. Bir elementi görünür və yox edir. Nümunəmizdəki funksiyanın bir parametri var - animasiyanın müddəti.

    Nümunədəki menyu elementləri hover effektinə malikdir. Pseudo-elementdən sonra :: istifadə edərək yaradılmışdır. Kod belə görünür:

    Menyu-yan panel li > a::sonra ( məzmun: ""; displey: blok; hündürlük: 0.15em; mövqe: mütləq; yuxarı: 100%; en: 102%; sol: 50%; çevirmək: tərcümə (-50%) ); fon-şəkil: xətti-qradiyent(sağa, şəffaf 50,3%, #FFFA3B 50,3%); keçid: fon mövqeyi .2s .1s rahatlıq; fon ölçüsü: 200% avtomatik; ) .menu-sidebar li > a:hover::after ( fon mövqeyi: -100% 0; )

    ::after pseudo-element hər bir keçidin aşağı hissəsində tam eni və hündürlüyü 0,15 m olan blok səviyyəli elementi ehtiva edir. Hamısı alt xətt kimi görünür. Xüsusi cəhət ondan ibarətdir ki, biz sətirə sadəcə fon rəngini tətbiq etmirik, fon təsvirində linear-gradient() funksiyasından istifadə edirik. Bu funksiya rəng qradiyenti yaratmaq üçün nəzərdə tutulsa da, biz istədiyiniz faizləri təyin etməklə rəngi dəyişə bilərik.

    Menyu-yan panel li > a::after ( fon-şəkil: xətti-qradiyent (sağa, şəffaf 50,3%, #FFFA3B 50,3%; )

    Buradakı xəttin yarısı şəffaf, digər yarısı isə sarıdır. Fon ölçüsünü 200% etməklə, blokumuzun enini iki qat artırırıq. İndi şəffaf hissə linkin bütün enini tutur və sarı hissə sola doğru hərəkət edir və görünməz olur. Hover üzərində fon mövqeyini -100%-ə dəyişirik. İndi sarı hissə görünən olur və şəffaf hissə gizlənir.

    Şəffaf hissənin yerinə hər hansı digər rəngdən istifadə edə bilərsiniz. Siz həmçinin gradientlərlə təcrübə edə bilərsiniz.

    Hesab etdiyimiz elementlərin hər biri vahid bir bütöv kimi işləyir. TemplateMonster kolleksiyasından istənilən vebsayt dizaynından istifadə edərək belə bir menyu yarada bilərsiniz. Gördüyünüz kimi, bunu etmək təsəvvür etdiyinizdən daha asandır. Peşəkar və istifadəçi dostu veb saytların yaradılmasında uğurlar!

    İndi biz tez və asanlıqla şaquli menyu hazırlayacağıq ki, siz onu çağırmaq üçün düyməni basdığınız zaman animasiyalı şəkildə yandan çıxacaq.

    ADDIM 1. HTML faylına menyunun əlavə edilməsi

    Aşağıdakı kodu html faylına yapışdırın:

    MENU

    Siz görürsünüz ki, bütün menyu düymələri üçün, o cümlədən menyu düyməsinin özü üçün openButton sinfi əlavə edilib. Bu, bizim birləşdirəcəyimiz skriptimizin bu düymələrin kliklərini menyunun açılması və bağlanması hərəkətlərinə bağlaya bilməsi üçün edilir.

    ADDIM 2. Üslubların əlavə edilməsi

    İndi menyumuzu və bütün düymələri bir az stilize edəcəyik. Aşağıdakı kodu css faylınıza yapışdırın:

    Düymə ( fon: şəffaf; haşiyə: şəffaf; kontur: heç biri; kursor: göstərici; kənar: 50px 90px; şrift ölçüsü: qalın; şrift ölçüsü: 24px; rəng: #6c7d96; keçid: 0.2s; ) düymə: hover ( keçid: 0,2s; qeyri-şəffaflıq: 0,7; ) düymə:aktiv (keçid: 0,2s; qeyri-şəffaflıq: 0,4; ) naviqasiya (fon rəngi: #6c7d96; en: 250px; mövqe: nisbi; sol: -999px; keçid: 0,5s asanlıq; ) nav ul li ( padding: 20px 0; mətni hizalayın: mərkəz; keçid: 0,2s; ) nav ul li:hover ( kursor: göstərici; fon rəngi: #454954; keçid: 0,2s; ) nav ul li :aktiv (fon rəngi: #23252b; keçid: 0,2s; ) nav ul li a (rəng: ağ; mətn dekorasiyası: heç biri; şrift çəkisi: qalın; şrift ölçüsü: 21px; )

    Kodun ən vacib hissəsi naviqasiya seçicisində yazılır. Nisbi yerləşdirmədən istifadə edərək, biz sol tərəfə mənfi dəyər təyin etməklə menyumuzu səhifənin görünən hissəsindən kənarda gizlədirik.

    Qeyd: Sürüşdürərkən menyunu ekrana yapışdırmaq lazımdırsa, sabit yerləşdirmədən də istifadə edə bilərsiniz. Bu, bizim versiyamızla eyni şəkildə işləyəcək.

    ADDIM 3. Skriptin qoşulması

    js faylınıza bu kodu daxil etməlisiniz:

    $(sənəd).ready(funksiya() ( $(".openButton").click(funksiya() ( if(!$(".openButton").hasClass("openDone")) ( $(".openButton" ).addClass("openDone"); $("nav").css("sol", "0px"); ) else ( $(".openButton").removeClass("openDone"); $("nav" ).css("left", "-999px"); ) )); /* Əvvəlcə müəyyən ekran ölçüsündən sonra menyunu adaptiv etmək istədiyiniz zaman qoşulun. Bu kod brauzer ekranı açıldıqda menyunun təsadüfi yoxa çıxması problemini həll edir. Ölçü dəyişir. Menyunuzun adaptiv dizaynını təmin edən $(window).resize(function() ( if ($(window).width() > 1200) ( $("nav ul li") üçün eni burada təyin edin. removeAttr("üslub"); ))) ; */ ));

    Skript əvvəllər verdiyimiz openButton sinfi ilə düymələrin klik hadisəsini yoxlayır. Dərhal openDone sinifinin olub-olmaması yoxlanılır. Düymələrdə bu sinfin mövcudluğundan asılı olaraq, bu skript menyunun bağlanması və ya açılması barədə qərar verir.

    Yeri gəlmişkən, biz bu sinfi heç yerdə qeydiyyatdan keçirməmişik. Bir növ keçid rolunu oynayır. Bu, elə işləyir ki, “MENU” düyməsinə kliklədikdə, openButton sinfi olan bütün düymələr openDone sinfinə əlavə olunur. İstifadəçi yenidən menyu düymələrindən birini kliklədikdə, skript bu düymələrdən openDone sinfini silir.

    Müvafiq olaraq, bu sinif yalnız skript üçün lazımdır ki, o, menyunun hansı anlarda göstərilməli olduğunu və hansı saatlarda bağlanmalı olduğunu başa düşsün. Əgər biz openDone sinfini əlavə etməsəydik, skript düzgün işləməzdi və siz open düyməsini kliklədiyiniz zaman menyu dərhal açılıb bağlanardı.

    Qeyd: Üfüqi menyunuzun adaptiv versiyasını canlandırmaq üçün bu skriptdən istifadə edirsinizsə, aşağıda şərh edilən kod daxil edilməlidir. Ekran ölçüsü böyüdükdə menyuların yoxa çıxması problemini həll edir.

    Xülasə

    Düyməni basdığınız zaman yan tərəfdə görünən ən sadə animasiya menyusunu yaratdıq. Gördüyünüz kimi, burada tamamilə mürəkkəb bir şey yoxdur. Siz bu kodu təkmilləşdirə və istədiyiniz kimi dəyişdirə bilərsiniz.

    Şaquli menyu işarələnmiş və ya nömrələnmiş siyahı əsasında hazırlanır. Varsayılan olaraq, bütün siyahı elementləri konteyner elementinin bütün enini tutaraq şaquli şəkildə yerləşdirilir, 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 və şə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 variantı. Veb saytdakı kateqoriyaların üslubu üçün uyğundur. Üzərinə gətirildikdə siyahı elementi keçid 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əlldir, iç içə menyular əlavə etmək mümkündür. “Metro xətti” siyahının sol sərhədidir, hər 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

    Siyahı elementinin üzərinə gətirdiyiniz zaman görünən ikona və fon dolğusu ş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 yaradır. Nişanları göstərmək üçün qoşulmaq lazımdır. 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 ( padding: 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ğ; dolgu: 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 (kənar-alt: 20px;).qiymət-sətir:sonuncu uşaq (aşağıdakı kənar: 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 -.

    Əlavə edilmiş faylları olan səhifənin kodu budur:

    Sabit yan menyu

    Addım 2: Sabit menyu üçün HTML işarələmə əlavə edin

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

    Diqqət etdiyiniz kimi, mən teqdən istifadə etdim - bu, html5 işarələmə elementidir, əgər siz html4 istifadə edirsinizsə, bu teqi adi ilə əvəz edə və ya onu tamamilə silə və identifikatoru aşağıdakı kimi siyahıya köçürə bilərsiniz: