Vertikálne menu v CSS. Opravené bočné menu v čistom CSS Štandardné CSS štýly pre horizontálne menu

V tomto návode si spravíme klasické horizontálne menu v čistom CSS. V zoznamoch má ikony. Pri umiestnení kurzora myši nad položku plynule zmení farbu tlačidla a textu a pridá tieň. Rozbaľovacie zoznamy môžu byť vytvorené na viacerých úrovniach, a čo je najdôležitejšie, všetko je celkom jednoducho implementované v čistom CSS3.

V lekcii budeme používať:

  • displej:flex;
  • použiť prechod;
  • prvky umiestnime pomocou position .

HTML štruktúra horizontálneho menu

Najprv si napíšme označenie pre horizontálne menu. Otvoríme naše vývojové prostredie v mojom prípade je to PhpStorm , vytvoríme súbor index.html, napíšeme framework html:5, nahradíme lang ru.

Vymažem všetky meta okrem kódovania, napíšem svoj názov " tom menu».

Medzi telo napíšeme tag header a v ňom je blok s triedou .dws-menu, v ktorom sa bude nachádzať naše menu. Ďalej bude štruktúra nasledovná, vytvoríme zoznamy v počte piatich kusov. Každý zoznam bude mať prepojenie s atribútom href="#". Potom tam bude ikona I s triedou .fa .fa-

Kliknite na použiť.

Napíšme názov položiek ponuky ( Domov, Produkty, Služby, Novinky, Kontakty).

Ďalej vyberte a pripojte ikony. Prejdeme na webovú stránku Font Awesome, vyberieme ikony pre tieto položky ponuky:

Archív stiahneme zo stránky s ikonami, rozbalíme jeho obsah do nášho počítača, skopírujeme priečinok fonts a priečinok css do nášho vývojového prostredia.

Priečinok fonts obsahuje fonty ikon a priečinok css obsahuje ich štýly. Komprimované štýly je možné odstrániť pomocou font-awesome.min , vrátane nekomprimovaného font-awesome.css .

V index.html spájame ikony a každej položke predpisujeme vlastný štýl ikony ( Domov, nákupný vozík, ozubené kolesá, th-zoznam, obálka-otvorená).

Urobili sme hlavný rám, po opísaní hlavného štýlu vytvoríme podmenu a teraz vytvoríme súbor, kde popíšeme hlavné štýly horizontálneho menu style.css a pripojíme ho k index.html . Aby som skontroloval, či sú štýly prepojené, vytvorím si priečinok img , v ňom umiestnim ľubovoľný obrázok na pozadie. Spojenie obrázku napíšeme pomocou pozadia .

Body( background-image: url(../img/ep_naturalwhite.png"); )

Popis štýlov CSS pre horizontálne menu

Najprv obnovme všetky zarážky, ktoré môžu rôzne prehliadače predvolene nastaviť:

Dws-menu *( okraj: 0; výplň: 0; )

Nastavíme hlavičku na 200 pikov. a priraďte font Cuprum, ktorý si môžete stiahnuť a samostatne pripojiť k vašej stránke, pre každý prípad napíšeme ďalšie fonty.

Hlavička (okraj: 200px; rodina písiem: Cuprum, Arial, Helvetica, bezpätkové; )

Skryjeme značky zo zoznamov:

dws-menu ul, .dws-menu ol( štýl zoznamu: žiadny; )

Ukážme zoznamy vodorovne s displejom: ľan a urobme ho na stred:

Dws-menu > ul( display: flex; justify-content: center; )

V hlavičke budeme odsadzovať iba zhora, napíšeme margin-top .

Hlavička( margin-top: 200px; rodina písiem: Cuprum, Arial, Helvetica, bezpätkové; )

Poďme si navrhnúť naše menu, nastaviť farbu tlačidiel, písmo atď.

Dws-menu > ul li a( display: block; background: #ececed; padding: 15px 30px 15px 40px; font-size: 14px; color: #454547; text-decoration: none; text-transform:uppercase; )

Potom umiestnime ikony, priradíme zoznamom pozíciu: relatívna; na ďalšie vycentrovanie ikon:

dws-menu > ul li( poloha: relatívna; )

dws-menu > ul li > a i.fa( pozícia: absolútna; hore: 15px; vľavo: 12px; font-size: 18px; )

Priraďme zoznamom oddeľovač hraníc, vyberieme prvý prvok LI a nastavíme hranicu. Vyberieme posledný prvok LI a priradíme mu podobnú hranicu.

Dws-menu > ul li:first-child( border-left: 1px solid #b2b3b5; ) .dws-menu > ul li:last-child( border-right: 1px solid #babbbd; )

Vytváranie oddeľovačov pre zoznamy LI:

.dws-menu > ul li( poloha: relatívna; border-right: 1px solid #c7c8ca; }

Získané menu vzhľad, potom môžete začať popisovať štýly vznášania.

Animujte vodorovnú ponuku umiestnením kurzora myši

Dws-menu li a:hover( background: #454547; color: #ffffff; box-shadow: 1px 5px 10px -5px black; transition: all 0,3s easy; )

A aby tento efekt hladko zmizol, pridajte tento štýl do odkazu v pokoji:

.dws-menu > ul li a( display: block; background: #ececed; padding: 15px 30px 15px 40px; font-size: 14px; color: #454547; text-decoration: none; text-transform:uppercase; prechod: všetkých 0,3 s ľahkosť; )

Hlavné menu je hotové a môžete začať popisovať podmenu a ich podmenu.

Popis rozbaľovacej ponuky CSS/HTML

Otvoríme index.html a k produktom pridáme napríklad doplnkové menu. Medzi zoznamy LI vložíme UL , umiestnime doň päť zoznamov, v ktorých budú odkazy s atribútom herf=”#” .

ul>li*5>a

Kliknite na použiť, napíšte názvy položiek ( Oblečenie, elektronika, jedlo, náradie, život. chémia).

  • oblečenie
  • Elektronika
  • Jedlo
  • Nástroje
  • Gen. chémia

Potom otvoríme style.css a popíšeme štýly podmenu.

Vyberte druhý zoznam a dajte mu pozíciu: absolútna; , nastavte minimálnu šírku na 150 pixelov.

/*podponuka*/ .dws-menu li ul( pozícia: absolútna; minimálna šírka: 150px; )

Do zoznamov zapíšeme hranicu 1 vrcholu.

Dws-menu li > ul li( orámovanie: 1px plné #c7c8ca; )

Pre odkazy v podponuke nastavte výplň na 10 pixelov, odstráňte transformáciu textu a stmavte pozadie o niekoľko tónov: #e4e4e5; .

Dws-menu li > ul li a( padding: 10px; text-transform: none; background: #e4e4e5; )

Potom vytvoríme ďalšie vnorené menu. Poďme do súboru značiek a napríklad v "Elektronika" vytvoríme menu analogicky, ako sme to urobili predtým. Opíšte nadpisy odsekov ( Fotoaparáty, počítače, telefóny) a uložte.

  • Elektronika
    • kamery
    • Počítače
    • Telefóny

    • Sú zobrazené, ale skryté pod hlavným menu, teraz pozícia: absolútna; vnorené UL a posunúť ho o 150 vrcholov. na stranu:

    Dws-menu li > ul li ul( pozícia: absolútna; vpravo: -150 pixelov; hore: 0; )

    /*podmenu*/ .dws-menu li ul( pozícia: absolútna; minimálna šírka: 150px; displej: žiadny; )

    A pre ich vzhľad vyberieme zoznamy pri umiestnení kurzora myši a zobrazíme ich pomocou display: block; .

    dws-menu li:hover > ul( display: block; )

    Teraz môžete pridať viacúrovňové ponuky jednoduchým skopírovaním bloku UL a zmenou jeho položiek.

    • Domov
    • Produkty
      • oblečenie
        • Topánky
        • Bundy
        • Nohavice
      • Elektronika
        • kamery
        • Počítače
        • Telefóny
          • Samsung
          • Flf
          • Apple
      • Jedlo
      • Nástroje
      • Gen. chémia
    • Služby
      • Služba 1
      • Služba 2
      • Služba 3
    • Správy
    • Kontakty

    Potom ozdobíme gombíky ingredienciou na posledné kroky. Používam CSS generátor, mám vytvorených niekoľko Presetov, môžete si vytvoriť vlastný, v mojom prípade len kopírujem daný kód a umiestnite pozadie, ktoré som napísal predtým.

    .dws-menu > ul li a( display: block; /* Trvalý odkaz – použite na úpravu a zdieľanie tohto prechodu: http://colorzilla.com/gradient-editor/#c9c9c9+0,f6f6f6+2,c4c5c7+98,757577+100;Vlastné+3 */ pozadie: #c9c9c9 ; /* Staré prehliadače */ pozadie: -moz-linear-gradient(top, #c9c9c9 0%, #f6f6f6 2%, #c4c5c7 98%, #757577 100%); /* FF3.6-15 */ pozadie: -webkit-linear-gradient(top, #c9c9c9 0%,#f6f6f6 2%,#c4c5c7 98%,#757577 100%); /* Chrome10-25,Safari5.1-6 */ pozadie: linear-gradient(to bottom, #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 */ padding: 15px 30px 15px 40px; veľkosť písma: 14px; farba: #454547; text-dekorácia: žiadna; text-transform:veľké písmená; prechod: všetkých 0,3 s ľahkosť; ).dws-menu li a:hover( /* Trvalý odkaz - použite na úpravu a zdieľanie tohto prechodu: http://colorzilla.com/gradient-editor/#e0e1e5+0.454547+2.454547+98,e0e1e5+100 */ pozadie: #e0e1e5; /* Staré prehliadače */ pozadie: -moz-linear-gradient(top, #e0e1e5 0%, #454547 2%, #454547 98%, #e0e1e5 100%); /* FF3.6-15 */ pozadie: -webkit-linear-gradient(top, #e0e1e5 0%,#454547 2%,#454547 98%,#e0e1e5 100%); /* Chrome10-25,Safari5.1-6 */ pozadie: linear-gradient(to bottom, #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 */ farba: #ffffff; box-shadow: 1px 5px 10px -5px čierny; prechod: všetkých 0,3 s ľahkosť; )

    Ak chcete, toto menu môže byť navrhnuté pre štýl, ktorý vám vyhovuje na stránke, stačí vygenerovať farbu a nahradiť ju v kóde. Výsledkom je jednoduché a zároveň pekné horizontálne menu vytvorené čistým CSS.

    Dobrý deň, milí čitatelia. Dnes budeme diskutovať o téme ako vytvoriť horizontálne menu pomocou html a css". Menu sa spravidla nachádza v hlavičke stránky a je zoznamom odkazov na najdôležitejšie stránky, nazýva sa tiež hlavné menu. Používatelia budú neustále klikať na tieto odkazy. To, ako ich usporiadate a aký dizajn menu dáte, ovplyvní správanie používateľov, konverziu, ich celkový zážitok z vašej stránky a samozrejme .

    HTML kód pre horizontálne menu

    Kedysi bolo hlavné menu pre stránku robené na obrázkoch, tabuľkách, flashi a možno aj niečom inom, no v súčasnosti je najobľúbenejší a najsprávnejší spôsob vytvárania menu pomocou značiek „zoznam“.

    Tagy sa používajú na vytváranie menu.

    Príklad použitia značiek html na vytvorenie ponuky v nižšie uvedenom kóde:

    • Domov
    • Služby
    • Ceny
    • Kontakty

    Štandardné štýly CSS pre horizontálne menu

    ul ( štýl zoznamu: žiadny; /*odstrániť značky zoznamu*/ okraj: 0; /*odstrániť výplň*/ výplň-vľavo: 0; /*odstrániť výplň*/ ) a (ozdobenie textu: žiadne; /*odstrániť podčiarknutie text odkazu*/ ) li ( float:left; /*Umiestnite zoznam vodorovne, aby ste implementovali ponuku*/ margin-right:5px; /*Pridať zarážku do položiek ponuky*/ )

    Dostávame hotové horné menu v hlavičke, bez špeciálnych štýlov a zvončekov a píšťaliek, to sa dá nazvať rámom vašej budúcnosti krásne menu. Ak skopírujete a prilepíte tento html a css, bude to vyzerať takto.

    Príklad rámčeka (šablóny) pre vaše budúce menu

    Všetko sa ukázalo celkom jednoducho, samozrejme chcete hneď krásne hlavné menu, ale bez pochopenia základov jednoducho nebudete môcť vytvoriť dobré menu bez chýb v html a css.

    Existuje aj niekoľko ďalších CSS metódy používa sa na to, aby bola ponuka horizontálna okrem float:left; , napríklad display:inline-block; alebo display:flex; , ale odporúča sa použiť metódu opísanú vyššie.

    Naplňte našu šablónu menu rôznymi štýlmi a urobme to krásne.

    Príklady krásneho horizontálneho menu pre webovú stránku

    Teraz uvediem niekoľko hotových príkladov s hotový dizajn horizontálne menu.

    Všetky „pekné veci“ pre svoju stránku si môžete vytvoriť sami a nemusíte ich hľadať na internete. Najjednoduchší spôsob, ako to urobiť, je založený na jednom z nižšie uvedených príkladov.

    Jednoduché modré menu so samostatnými položkami

    CSS štýly pre „horné“ menu

    Nižšie sú uvedené štýly toto menu. HTML zostáva rovnaké ako v menu "kostra".

    Ul ( list-style: none; /*odstrániť značky zoznamu*/ okraj: 0; /*odstrániť výplň*/ padding-left: 0; /*odstrániť výplň*/ margin-top:25px; /*indent top*/ ) a ( dekorácia textu: žiadna; /*odstrániť podčiarknutie textu odkazu*/ pozadie:#30A8E6; /*pridať pozadie k položke ponuky*/ farba:#fff; /*zmeniť farbu odkazu*/ výplň:10px; /*pridať výplň */ rodina fontov: arial; /*zmena fontu*/ border-radius:4px; /*pridať zaokrúhľovanie*/ -moz-prechod: všetkých 0,3 s 0,01 s ľahkosť; /*urobiť plynulý prechod*/ -o-prechod : všetky 0,3 s 0,01 s ľahkosť; -webkit-transition: všetky 0,3 s 0,01 s ľahkosť; ) a:hover ( pozadie:#1C85BB;/*pridať efekt vznášania*/ ) li ( float:left; /*uložiť zoznam vodorovne na implementovať ponuku*/ margin-right:5px; /*Odsadiť položky ponuky*/ )

    Hlavné menu umiestnené na farebnom riadku s červeným pozadím

    Ponuka štýlu css na farebnom riadku

    ul ( štýl zoznamu: žiadny; /*odstrániť značky zoznamu*/ okraj: 0; /*odstrániť výplň*/ výplň-vľavo: 0; /*odstrániť výplň*/ okraj-vrchu:25px; /*odsadiť hornú časť*/ pozadie :#FF4444; /*pridať pozadie do celej ponuky (výmena tohto parametra zmení farbu celej ponuky)*/ height: 50px; /*nastaviť výšku*/ ) a ( text-decoration: none; /* odstrániť podčiarknutie textu odkazu* / background:#FF4444; /*pridať pozadie k položke ponuky (nahradením tohto parametra sa zmení farba všetkých položiek ponuky)*/ color:#fff; /*zmena farby odkazov */ padding:0px 15px; /*pridať odsadenie*/ font-family: arial; /*zmena písma*/ line-height:50px; /*zarovnanie ponuky vertikálne*/ display: block; border-right: 1px solid #F36262; /*pridať orámovanie doprava*/ -moz-transition : všetkých 0,3 s 0,01 s ľahkosť; /*urobiť plynulý prechod*/ -o-prechod: všetkých 0,3 s 0,01 s ľahkosť; -webkit-transition: všetko 0,3 s 0,01 s ľahkosť; ) a:hover ( pozadie:#D43737;/ *pridať efekt vznášania*/ ) li ( float:left; /*uložiť zoznam vodorovne v skutočnosti Ponuka*/ )

    Rozbaľovacia ponuka v HTML+CSS

    Na realizáciu ďalšie rozbaľovacie (rozbaľovacie) menu na stránke pre akúkoľvek položku ponuky musíme do kódu HTML pridať ďalší zoznam položiek pre akýkoľvek odkaz z horizontálnej ponuky a zmeniť štýly CSS. V štýloch použijeme jednoduchý trik – zmenu zobrazenia roletového menu pri prejdení myšou na položku, ktorú potrebujeme v horné menu. Zoberme si napríklad položku „služby“.

    Príklad vytvorenia jednoduchého rozbaľovacieho menu

    HTML kód rozbaľovacej ponuky

    • Domov
    • Služby
      • Služba 1
      • Dlhá služba 2
      • Služba 3
    • Ceny
    • Kontakty

    Rozbaľovacia ponuka Štýly CSS

    ul ( štýl zoznamu: žiadny; /*odstrániť značky zoznamu*/ okraj: 0; /*odstrániť výplň*/ výplň-vľavo: 0; /*odstrániť výplň*/ okraj-vrchu:25px; /*odsadiť hornú časť*/ pozadie :#819A32; /*pridať pozadie do celej ponuky*/ výška: 50px; /*nastaviť výšku*/ ) a ( text-decoration: none; /*odstrániť podčiarknutie textu odkazu*/ pozadie:#819A32 ; /*pridať pozadie k položke ponuky*/ color:#fff; /*zmena farby odkazov*/ padding:0px 15px; /*pridať odsadenie*/ font-family: arial; /*zmena fontu*/ line-height :50px; /*zarovnať ponuku na vertikály*/ display: block; border-right: 1px solid #677B27; /*pridať orámovanie doprava*/ -moz-transition: all 0,3s 0,01s easy; /*urobiť hladký prechod*/ -o-prechod: všetko 0,3 s 0,01 s ľahkosť; -webkit-prechod: všetko 0,3 s 0,01 s ľahkosť; ) a:hover ( background:#D43737;/*Pridať efekt vznášania*/ ) li ( float :left; /*Umiestnite zoznam vodorovne na implementáciu ponuky* / position:relative; /*nastavte polohu pre umiestnenie*/ ) /*Štýly pre skrytú rozbaľovaciu ponuku* / li > ul ( poloha:absolútna; top:25px; displej:žiadny; ) /*Zviditeľniť skrytú časť*/ li:hover > ul ( display:block; width:250px; /*Nastavte šírku rozbaľovacej ponuky*/ ) li:hover > ul > li ( float:none; /* Odstráňte horizontálne umiestnenie* / )

    A aby ste presne pochopili, aké služby a kategórie by ste mali mať, odporúčam vám, aby ste sa oboznámili s materiálom:.

    Snažil som sa vám čo najstručnejšie povedať, ako vytvoriť hlavné horizontálne menu, urobiť niekoľko šablón, ako doň pridať jednoduché štýly a urobiť ho krajším, ako urobiť rozbaľovacie menu pre vašu stránku. Pre pohodlie som zhromaždil všetky vyššie uvedené ponuky do jedného html súboru, ktorý si môžete stiahnuť nižšie. Vyzerá to ako na snímke obrazovky:

    Ďakujem za pozornosť.

    Vertikálne menu sa vykonáva na základe zoznamu s odrážkami alebo číslom. V predvolenom nastavení sú všetky položky zoznamu naskladané vertikálne, pričom zaberajú celú šírku kontajnerového prvku, ktorý následne zaberá celú šírku jeho kontajnerového bloku.

    Prvky zoznamu môžu obsahovať nielen odkazy, ale aj nadpisy, ikony, obrázky. Pomocou vertikálneho menu môžete na stránku pridávať komentáre, zoznam kategórií atď.

    1. Vertikálne menu s názvom

    Jednoduchý elegantný dizajn. Vhodné pre stylingové kategórie na stránke. Po umiestnení kurzora myši zmení položka zoznamu farbu odkazu.

    Kategórie

    * (veľkosť rámčeka: border-box; margin: 0;) .widget ( padding: 20px 30px; background: white; font-family: "Roboto", sans-serif; ) .widget-title ( transformácia textu: veľké písmená ; medzera medzi písmenami: 2px; farba: #222; font-size: 16px; padding-left: 15px; margin-bottom: 15px; border-left: 2px solid #b99d61; ) .widget-list ( padding: 0; list -style: none; ) .widget-list a:before ( content: "\2014"; margin-right: 14px; ) .widget-list a ( text-decoration: none; outline: none; display: block; padding: 6px 0; medzera medzi písmenami: 1px; váha písma: 300; farba: #444; prechod: .3s lineárny; ) .widget-list a:hover (farba: #b99d61;)

    2. Vertikálne menu v štýle "mapy metra"

    Zaujímavé riešenie pre návrh vertikálneho menu, je možné pridať vnorené menu. "Pobočka metra" - ľavý okraj zoznamu, značky sa generujú pred každým odkazom.

    .metro ( list-style: none; padding: 0; margin: 30px 0 0 50px; border-left: 5px solid #DAE4F1; ) .metro li (line-height: 2em;) .metro ul ( margin: 20px 0 20px 15px; odsadenie: 0; orámovanie: žiadne; štýl zoznamu: žiadne; ) .metro ul:before, .metro ul:after (obsah: ""; šírka: 5px; výška: 28px; pozadie: #DAE4F1; pozícia: relatívna ; display: block; left: -9px; ) .metro ul:before ( transform: rotation(-45deg); margin-top: -15px; ) .metro ul:after ( transform: rotation(45deg); bottom: -20px ; ) .metro ul li (ľavý okraj: 5px plné #DAE4F1;) .metro ul li:first-child ( margin-top: -5px; padding-top: 5px; ) .metro ul li:last-child ( padding -bottom: 9px; margin-bottom: -25px; ) .metro a ( text-decoration: none; display: block; font-family: "Noto Sans", sans-serif; color: #4A4B4D; ) .metro a: pred ( content: ""; display: inline-block; background: #CA682D; width: 12px; height: 12px; left: -9px; position: relatívna; border-radius: 50%; margin-right: .5em; )

    3. Vertikálne menu s efektmi vznášania

    Ikona a výplň pozadia, ktoré sa zobrazia pri umiestnení kurzora myši na prvok zoznamu, pomôžu diverzifikovať dizajn vertikálnych prvkov ponuky.

    Kategórie

    .category-wrap ( padding: 15px; background: white; width: 200px; box-shadow: 2px 2px 8px rgba(0,0,0,.1); font-family: "Helvetica Neue", Helvetica, Arial, sans -serif; ) .category-wrap h3 ( font-size: 16px; color: rgba(0,0,0,.6); margin: 0 0 10px; padding: 0 5px; position: relativní; ) .category-wrap h3:after ( obsah: ""; šírka: 6px; výška: 6px; pozadie: #80C8A0; pozícia: absolútna; vpravo: 5px; spodok: 2px; box-shadow: -8px -8px #80C8A0, 0 -8px #80C8A0 , -8px 0 #80C8A0; ) .category-wrap ul ( list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(0,0,0,.3); ) .category- wrap li (margin: 12px 0 0 0px;) .category-wrap a (text-decoration: none; display: block; font-size: 13px; color: rgba(0,0,0,.6); padding: 5px ; pozícia: relatívna; prechod: .3s lineárny; ) .category-wrap a:after ( content:"\f18e"; rodina fontov: FontAwesome; pozícia: absolútna; vpravo: 5px; farba: biela; prechod: .2s lineárny ; ) .category-wrap a:hover ( pozadie: #80C8A0 ; farba: biela; )

    4. Vertikálne menu s ikonami

    Ikony ponuky poskytujú vizuálnu kotvu, ktorá dopĺňa slovný popis každej kategórie. Ak chcete zobraziť ikony, musíte sa pripojiť . Môžete tiež použiť akékoľvek iné písmo ikony alebo obrázkové ikony.

    Kategórie

    * (veľkosť poľa: border-box; margin: 0;) .widget ( padding: 20px; border: 5px solid #f1f1f1; background: #fff; border-radius: 5px; font-family: "Roboto", sans- serif; ) .widget h3 ( margin-bottom: 20px; text-align: center; font-size: 24px; font-weight: normal; color: #424949; ) .widget ul ( margin: 0; padding: 0; list -style: none; width: 250px; ) .widget li ( border-bottom: 1px solid #eaeaea; padding-bottom: 15px; margin-bottom: 15px; ) .widget li:last-child ( border-bottom: none; margin-bottom: 0; padding-bottom: 0; ) .widget a ( text-decoration: none; color: #616a6b; display: inline-block; ) .widget li:before ( font-family: FontAwesome; font-size : 20px; vertical-align:bottom; color: #dd3333; margin-right: 14px; ) .widget li:nth-child(1):before (content:"\f1fc";) .widget li:nth-child( 2):before (content:"\f0d0";) .widget li:nth-child(3):before (content:"\f0cd";) .widget li:nth-child(4):before (content:" \f028";) .widget li:nth-child(5):before (content:"\f03d";)

    5. Vertikálne menu s obrázkami

    Tento príklad možno použiť na navrhovanie blokov s novými produktmi, podobnými produktmi atď. webovú stránku internetového obchodu.

    Jpeg">

    Produkt 1
    2 000 ₽
    Produkt 2
    2 500 ₽
    Produkt 3
    2070 ₽
    @import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600"); .col ( šírka: 300px; pozadie: biela; výplň: 20px; okraj: 1px plný #eeeeee; font-family: "Open Sans", sans-serif; ) .col * (margin: 0;) .widget-title ( margin: 0 0 30px; výška riadku: 1; transformácia textu: veľké písmená; medzera medzi písmenami: 1px; veľkosť písma: 20px; farba: #242424; overflow: hidden; ) .widget-title:after ( content: " "; position: relatívne; display: inline-block; width: 100%; vertical-align: middle; right: -15px; margin-right: -100%; border-top: 2px solid #cca86d; ) .price-line (margin-bottom: 20px;) .price-line:last-child (margin-bottom: 0;) .price-line:after ( content: ""; display: table; clear: both; ) .product-image ( width: 80px; float: left; ) .product-image a ( display: block; outline: none; ) .product-image img ( display: block; width: 100%; ) .product-content ( float: left; margin -left: 20px; ) .product-title (font-size: 18px; margin-bottom: 10px; line-height: 1; ) .product-title a (text-decoration: none; color: #242424; ) .price -box (farba: #666; veľkosť písma: 18px; výška riadku: 1; ) .star-rating ( margin-bottom: 10px; font-size: 13px; position: relativní; font-family: "FontAwesome"; ) .star-rating:before ( content: "\f005 \f005 \f005 \f005 \" f005"; pozícia: absolútna; hore: 0; vľavo: 0; farba: #FF9919; )

    V tomto príspevku vytvoríme pevnú bočnú informačnú ponuku. Na implementáciu ikon pripojíme písmo .

    Krok 1. Spojte písmo s ikonami, vytvorte prázdny dokument

    Podrobné informácie o práci s fontom FontAwesome a odkaz na samotný projekt nájdete v mojom príspevku -.

    Tu je kód stránky s pripojenými súbormi:

    Opravené bočné menu

    Krok 2: Pridanie značky HTML s pevnou ponukou

    Tu je značkovací kód pre našu pevnú ponuku:

    Ako ste si všimli, použil som značku

    Krok 3. Pridanie značky HTML podponuky

    Podponuka je rovnaký zoznam ako hlavná ponuka plus značka , ktorý zobrazuje ikonu „vozík vľavo“, plní funkciu určitého „chvosta“, viac podrobností na obrázku nižšie 🙂


    Tento prvok tiež spája prázdnotu medzi blokom ponuky a podponukou, čím nám umožňuje implementovať funkciu prechodu.

    Krok 4 Úprava štýlu pevného bočného panela

    Snažil som sa komentovať štýlový kód na miestach, kde na tom záleží. Vo všeobecnosti sa všetky nekomentované body týkajú banálneho štýlu pozadia, farby atď.

    #sidebar-menu ( pozícia: pevná; /* oprava našej ponuky */ hore: 200px; /* pozícia ponuky vzhľadom na horný okraj prehliadača */ vľavo: 0; /* prilepiť ponuku k ľavému okraju */ výplň : 10px; pozadie: # 323A45; farba: #FFF; border-radius: 0 8px 8px 0; ) #sidebar-menu li ( poloha: relatívna; kurzor: ukazovateľ; ) #sidebar-menu li i ( /* Nastavenie ikon na pevnú veľkosť, výšku a výšku riadku by mali byť rovnaké */ šírka: 27px; výška: 27px; výška riadku: 27px; polomer okraja: 4px; pozadie: #3CB7E7; zarovnanie textu: stred; ) #sidebar -menu li+li (margin-top: 4px;) #sidebar-menu b (zobrazenie: žiadne; pozícia: absolútna; /* pozícia vzhľadom na ľavý okraj sa rovná šírke prvku li */ vľavo: 27px; hore: 0; výška: 27px; /* šírka sa rovná medzere medzi ponukou bloku a podponukou */ šírka: 16px; výška riadku: 27px; pozadie: priehľadné; farba: #323A45; /* umiestnite samotnú ikonu na vpravo tak, aby to vizuálne vyzeralo spolu s blokom podponuky */ text-align: right; ) #sidebar -menu li > ul ( zobrazenie: žiadne; pozícia: absolútna; hore: -10px; vľavo: 42px; šírka: 120px výplň: 10px pozadie: #323A45; okraj-polomer: 8px ) #sidebar-menu li:hover b, #sidebar-menu li:hover ul (zobrazenie: blok;) #sidebar-menu li a ( zobrazenie: blok; odsadenie: 4px 8px; border-radius: 4px; farba: #FFF ; -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; -o-transition: all .2s; transition: all .2s; ) #sidebar-menu li a :hover ( display: block; background: #3CB7E7; )

    Ak máte nejaké otázky ohľadom stylingu, píšte do komentárov k tomuto príspevku, rada odpoviem.
    To je všetko! Pevná bočná ponuka Hotovo 🙂

    S aktualizáciou by malo byť všetko na stránke adaptívne, nevylučujeme ani horizontálne menu, ktoré by malo byť podobne prívetivé na všetkých obrazovkách. Kde navrhujem zvážiť klasickú navigáciu, ktorá je urobená v čistom štýle, bez použitia JS. Kde sa vo svojom vlastnom štýle zmestí na toľko stránok, keďže bol vytvorený v jednoduchom, štandardná forma, ale s prítomnosťou účinkov. Taktiež pri prezeraní z mobilného média sa na pravej strane automaticky zobrazí tlačidlo, kde po kliknutí nie na celú šírku sa zobrazia podkategórie, ale všetko je prehľadné, na rovnakej strane, kde sa budú vizuálne zobrazovať aj tlačidlá s písmom.

    Ako môžete vidieť, boli tu použité jednoduché HTML zoznamy, všetko na zobrazenie všetkých zoznamov, ktoré sú pod odkazmi na prechod jednej alebo druhej kategórie. Koncept je taký, že je pekné usporiadať navigačný zoznam horizontálne, ale keď je mobilný, automaticky sa zmení na vertikálny, ako je znázornené na obrázkoch, ktoré sú pripojené k materiálu.

    Čo je na začiatku priradené ku každej požiadavke, kde sa môže vývojár sám zmeniť na danú tému alebo na tie figúrky, ktoré sú tematicky vhodnejšie. Samotné menu je vytvorené v tmavozelenej farbe, práve zvolený je tento odtieň, ktorý sa vidí málokedy. Všetko sa však dá radikálne zmeniť prechodom do štýlu CSS a tam si môžete nastaviť štýl dizajnu, ktorý potrebujete, a predovšetkým tak, aby dokonale zapadol do samotného základu internetového zdroja.

    1 . Takže štandardne to ide alebo pri vstupe na portál.

    2 . Už sa pozeráme z mobilného zariadenia, ale ešte sme neboli vyvolaní v ponuke.

    3 . Tu bolo urobené kliknutie, ktoré zobrazilo všetky požadované požiadavky.

    Začnime s inštaláciou:



    ZORNET.RU





    css

    sekcia(
    šírka: 100 %;
    max-width:1198px;
    margin:0pxauto;
    display:tabuľka;
    poloha:relatívna;
    }

    Hlavička(
    šírka: 100 %;
    display:tabuľka;
    farba pozadia: #175812;
    margin-bottom:50px;
    }

    #kamtukagnpos(
    plavák: vľavo;
    veľkosť písma: 25px;
    text-transform: veľké písmená;
    farba: #ffab2;
    váha písma: 600
    padding: 19,8px 0px;
    }

    #kamtukagnpos:vznášať sa(
    text-shadow: 0px 0px 6px rgba(255, 250, 250, 0,67);
    }

    Nav(
    šírka:auto;
    float:right;
    }

    Navul(
    display:tabuľka;
    float:right;
    }

    Nav ul li(
    float:left;
    }

    Nav ul li:posledné dieťa(
    padding-right:0px;
    }

    Nav ul li a (
    farba: #e4f2ff;
    veľkosť písma: 19px;
    výplň: 24px 19px;
    displej: inline-block
    text-shadow: 0 1px 0 #2e2f2e;
    }

    Nav ul li a: vznášajte sa (
    farba pozadia: #143a06;
    farba: #fff9c8;
    prechod: všetkých 0,7 s uvoľnenie 0 s;
    text-shadow: 0 1px 0 #282b28;
    }

    Nav ul li a: podržte kurzor myši (
    farba: #fdf7c9;
    prechod: všetkých 0,7 s uvoľnenie 0 s;
    text-shadow: 0 1px 0 #1c1d1c;
    }

    Nav ul li a i (
    padding-right: 9px;
    farba: #f4faff;
    prechod: všetkých 0,7 s uvoľnenie 0 s;
    text-shadow: 0 1px 0 #202120;
    }

    Navigácia-menusaita ul(
    display:tabuľka;
    šírka: 24px;
    }

    Navigácia-menusaita ul li(
    šírka: 100 %;
    výška:3px;
    farba pozadia:#e9f0f7;
    margin-bottom:4px;
    }

    Navigačná-menusaita ul li:last-child(
    margin-bottom:0px;
    }

    vstup, označenie(
    displej:žiadny;
    }

    @media only obrazovka a (maximálna šírka: 1440px)(
    sekcia(
    maximálna šírka: 95 %;
    }
    }

    @media only obrazovka a (maximálna šírka: 980px)(
    hlavička(
    padding:20px 0px;
    }

    #kamtukagnpos(
    padding:0px;
    }

    Vstup(
    pozícia: absolútna;
    hore: -9999px;
    vľavo: -9999px;
    pozadie:žiadne;
    }

    Vstup: fous(
    pozadie:žiadne;
    }

    Štítok(
    float:right;
    padding:8px 0px;
    displej:inline-block;
    kurzor:ukazatel;
    }

    Input:checked ~ nav(
    displej:blok;
    }

    Nav(
    displej:žiadny;
    poloha:absolútna;
    vpravo:0px;
    top:53px;
    farba pozadia:#174810;
    padding:0px;
    z-index:99;
    }

    Navul(
    šírka:auto;
    }

    Nav ul li(
    float:none;
    padding:0px;
    šírka: 100 %;
    display:tabuľka;
    }

    Nav ul li a(
    farba:#f7f2f2;
    font-size:15px;
    padding:10px 20px;
    displej:blok;
    border-bottom: 1px solid rgba(204, 197, 197, 0,1);
    }

    Nav ul li a i(
    farba:#f9f5d5;
    padding-right:13px;
    }
    }

    @media only obrazovka a (maximálna šírka: 480px) (
    sekcia (maximálna šírka: 90%;)
    }

    @media only obrazovka a (maximálna šírka: 360px) (
    label(padding:5px 0px;)
    #kamtukagnpos(veľkosť písma: 20px;)
    nav(top:47px;)
    }


    Pred umiestnením je dôležité pozrieť si Demo stránku a reálne zhodnotiť, ako všetko funguje, no v skutočnosti tam nič také nie je, okrem efektu pridaného do názvu zdroja, kde pri vznášaní sa všetky nápisy idú pod tieň , ktorý je zobrazený oveľa jasnejšie.