• Horizontální css nabídka s ikonami. css vertikální menu css ikony vertikální menu

    Vertikální menu se provádí na základě seznamu, s odrážkami nebo číslováním. Ve výchozím nastavení jsou všechny položky seznamu naskládány svisle a zabírají celou šířku prvku kontejneru, který zase zabírá celou šířku jeho bloku kontejneru.

    Prvky seznamu mohou obsahovat nejen odkazy, ale také nadpisy, ikony, obrázky. Pomocí vertikální nabídky můžete na webu přidávat komentáře, seznam kategorií atd.

    1. Vertikální menu s názvem

    Jednoduchý elegantní design. Vhodné pro styling kategorií na webu. Při umístění kurzoru změní položka seznamu barvu odkazu.

    Kategorie

    * (box-sizing: border-box; margin: 0;) .widget ( padding: 20px 30px; background: white; font-family: "Roboto", sans-serif; ) .widget-title ( text-transform: velká písmena ; mezera mezi písmeny: 2px; barva: #222; font-size: 16px; padding-left: 15px; margin-bottom: 15px; border-left: 2px solid #b99d61; ) .widget-list ( padding: 0; seznam -style: none; ) .widget-list a:before ( content: "\2014"; margin-right: 14px; ) .widget-list a ( text-decoration: none; outline: none; display: block; padding: 6px 0; mezera mezi písmeny: 1px; váha písma: 300; barva: #444; přechod: .3s lineární; ) .widget-list a:hover (barva: #b99d61;)

    2. Vertikální menu ve stylu "mapy metra"

    Zajímavé řešení pro návrh vertikálního menu je možné přidat vnořené menu. "Větev metra" - levý okraj seznamu, značky se generují před každým odkazem.

    .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; padding: 0; border: none; list-style: none; ) .metro ul:before, .metro ul:after ( content: ""; width: 5px; height: 28px; background: #DAE4F1; position: relativní ; display: block; left: -9px; ) .metro ul:before ( transform: rotation(-45deg); margin-top: -15px; ) .metro ul:after ( transform: rotation(45deg); bottom: -20px ; ) .metro ul li (levý 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: před ( content: ""; display: inline-block; background: #CA682D; width: 12px; height: 12px; left: -9px; position: relativní; border-radius: 50%; margin-right: .5em; )

    3. Vertikální nabídka s efekty hoveru

    Ikona a výplň pozadí, která se objeví, když najedete na položku seznamu, pomůže zpestřit design vertikálních prvků nabídky.

    Kategorie

    .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: ""; šířka: 6px; výška: 6px; pozadí: #80C8A0; pozice: absolutní; vpravo: 5px; dole: 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 ; pozice: relativní; přechod: .3s lineární; ) .category-wrap a:after ( content:"\f18e"; rodina písem: FontAwesome; pozice: absolutní; vpravo: 5px; barva: bílá; přechod: .2s lineární ; ) .category-wrap a:hover ( pozadí: #80C8A0; barva bílá; )

    4. Vertikální menu s ikonami

    Ikony nabídky poskytují vizuální ukotvení, doplňující slovní popis každé kategorie. Chcete-li zobrazit ikony, musíte se připojit. Můžete také použít jakékoli jiné písmo ikony nebo obrázkové ikony.

    Kategorie

    * (velikost rámečku: 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ální menu s obrázky

    Tento příklad lze použít k návrhu bloků s novými produkty, podobnými produkty atd. webové stránky internetového obchodu.

    Jpeg">

    Produkt 1
    2000 ₽
    Produkt 2
    2500 ₽
    Produkt 3
    2070 ₽
    @import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600"); .col ( šířka: 300px; pozadí: bílá; výplň: 20px; okraj: 1px plný #eeeeee; font-family: "Open Sans", bezpatkové; ) .col * (margin: 0;) .widget-title ( margin: 0 0 30px; výška řádku: 1; text-transform: velká písmena; mezera mezi písmeny: 1px; velikost písma: 20px; barva: #242424; overflow: hidden; ) .widget-title:after ( content: " "; position: relativní; 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 -krabice (barva: #666; velikost písma: 18px; výška řádku: 1; ) .star-rating ( margin-bottom: 10px; font-size: 13px; position: relativní; font-family: "FontAwesome"; ) .star-rating:before ( content: "\f005 \f005 \f005 \f005 \" f005"; pozice: absolutní; nahoře: 0; vlevo: 0; barva: #FF9919; )

    Dobrá navigace na webu je pro blogery velmi důležitá. S jeho pomocí návštěvník rychle najde požadovanou stránku blogu. Oceňujte přehlednost stránek a vyhledávačů. V tomto článku se dozvíte, jak vytvořit horizontální nabídku pro Blogger s vyskakovacími ikonami.
    Nabídka s vyskakovacími tlačítky-ikonami je vytvořena na CSS. Chcete-li zobrazit nabídku, klikněte na tlačítko níže:

    Jak vložit horizontální css nabídku s ikonami na Blogger

    1. Přejděte na kartu "Šablona", umístěte kurzor do editoru (libovolné místo),
    2. Stiskněte Ctrl + F pro vyhledávání podle kódu a nalezení části kódu ]]>
    3. Před tento kód vložte následující kód:
      ..

      /* Kód CSS pro nabídku začíná zde bloggertrix.com */ #btrix-nav (margin: 100px auto;list-style: none;width: 632px;height: 87px;overflow-y: hidden;)
      #btrix-nav li (plovoucí: vlevo;)
      #btrix-nav li a (display: block;color: white;width: 120px;height: 61px;margin-top: 24px;text-decoration: none;text-align: center;border-top: 1px solid #bbb; border-bottom: 1px solid #555;)
      #btrix-nav li a span.aname (font: tučné 17px/61px "Arial";barva: #fff;text-transform: velká písmena;kurzor: ukazatel;pozice: relativní;nahoře: 0;přechod: nahoře 0,5s snadnost; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0,5);)
      #btrix-nav li a img (pozice: relativní; nahoře: 0; přechod: nahoře 0,5 s snadnost;)
      #btrix-nav li a:hover (kurzor: ukazatel;)
      #btrix-nav li a:hover img (top: -85px;)
      #btrix-nav li a:hover .aname (nahoře: 85px;)
      #btrix-nav li:nth-child(1) a (background: #3eb006;border-radius: 5px 0 0 5px;border-left: 1px solid #bbb;)
      #btrix-nav li:nth-child(2) a (pozadí: #9bc704;)
      #btrix-nav li:nth-child(3) a (pozadí: #0dc3ff;)
      #btrix-nav li:nth-child(4) a (pozadí: #51a2ec;)
      #btrix-nav li:nth-child(5) a (pozadí: #6e3cab;poloměr okraje: 0 5px 5px 0;pravý okraj: 1px plný #555;)

    4. Nyní přejděte na kartu "Design",
    5. Přidejte nový prvek HTML/JavaScript a přidejte kód:


    6. Domov https://2.bp.blogspot.com/-vcR6lUGsroY/Ug5ATZk8oZI/AAAAAAAAAA00/XENkFMaBgv0/s1600/btrix-home.png" />

    7. Stažení https://2.bp.blogspot.com/-TcXder58ssQ/Ug5ASx8pT0I/AAAAAAAAAA0o/5UdA4_gLnV8/s1600/btrix-download.png" />

    8. mysql https://2.bp.blogspot.com/-umlQ7fKXobk/Ug5AT2bLnnI/AAAAAAAAAA08/yrQHl6qPMH8/s1600/btrix-mysql.png" />

    9. HTML https://2.bp.blogspot.com/-2-iy8RJ92V8/Ug5ASDCru-I/AAAAAAAAAA0c/GOBCPpZlA04/s1600/Btrix-html.png" />

    10. Kontakty https://4.bp.blogspot.com/-vsm9s0yQr9I/Ug5ASjqawnI/AAAAAAAAAA0k/rqb01AbGaFw/s1600/btrix-contact.png" />

    11. Proveďte potřebné změny v kódu, který jste přidali do miniaplikace HTML / JavaScript:
    • Změňte ikonu # na odkaz na požadovanou stránku blogu (například stránku se značkami, kontaktní stránku, domovskou stránku blogu atd.)
    • odkaz na obrázek zvýrazněný oranžově, nahraďte přímým odkazem na obrázek ikony pro odpovídající položku.
    • Položka zvýrazněná modře, toto je název stránky nabídky css.
  • Přesunout prvek HTML? JavaScript na správné místo v záložce "Design" blogu.

    • Pro své menu můžete použít ikony, loga a další obrázky PNG s průhledným pozadím. Pro nalezení požadovaných obrázků je lepší použít vyhledávání podle ikon. Například, iconsearch.com

    Toto je seznam odkazů vedoucích na různé stránky webu. Dobře vypadá, když je seznam odkazů místo jednoduchých značek doplněn o ikony a není zde nutné používat grafiku. Proč vytvářet další databázové dotazy?

    HTML kód

    Mezi tagy li napište odkaz A(# dočasný útržek), uvnitř kterého jsou dva blokové prvky rozpětí. V prvním rozpětí - tag i s třídou ikon, jejíž kód byl zkopírován z webu Písmo úžasné. Ve druhém rozpětí- název odkazu, tedy text.





    • jízdní kola





    • Motocykly





    • Autobusy





    • Auta





    • Vrtulníky


    Po propojení mezi tagy hlava písmo ikony Písmo úžasné- Menu vypadá takto.

    CSS styly

    Chcete-li začít Písmo Google vybereme atraktivní písmo s podporou azbuky, pokud je vertikální nabídka v ruštině.

    Zkopírujte kód připojení vybraného písma a vložte jej nahoru css soubor.

    @import url("https://fonts.googleapis.com/css?family=Marck+Script");

    Ve voliči tělo napište název vybraného písma a nastavte jeho velikost.

    Tělo(
    okraj: 0;
    výplň: 0;
    font-family: "Marck Script", bezpatkové;
    velikost písma: 20px;
    }

    Umístíme naši nabídku vzhledem k oknu prohlížeče, ustoupíme shora o 10 % a zleva o 20 %. Tyto údaje jsou samozřejmě převzaty ze "stropu", budete mít svůj vlastní.

    ul (
    pozice: absolutní;
    nejlepších 10%;
    zbývá: 20 %
    }

    Šířku nabídky zafixujeme na 200 pixelů.

    Šířka: 200px

    Dosáhli jsme položek nabídky seznamu. Odstraňování značek z bodů li.

    Ul li (
    styl seznamu: žádný;
    }

    Rámečky označujeme nahoře a dole a oddělujeme položky nabídky od sebe.

    Border-top: 1px solid #131313;
    border-bottom: 1px solid #131313;
    okraj: -1px 0;

    Mezi ikonami a názvy odkazů není dostatek postranních rámečků a oddělovačů.

    Nakreslete správný rám pro značku A, což je vložený prvek, a kolem vloženého prvku nemůžete nakreslit ohraničení. Proto zobrazíme značku A blokový prvek.

    Ul li a (
    displej:blok;
    }

    Nyní můžete nastavit rámeček, odstranit podtržení odkazů a nastavit barvu odkazů.

    Okraj vpravo: 1px plný #131313;
    text-dekorace: žádná;
    barva: #131313;

    Levý rámeček chybí.

    značky rozpětí- blokové prvky, uvnitř kterých tedy bude text rozpětí zobrazit jako prvek inline bloku.

    Ul li a span (
    poloha: relativní;
    displej: inline-block
    }

    Potřebujeme pro první rozpětí, uvnitř kterého bude ikona, nastavte styly, které se liší od druhého rozpětí. Za tohle první rozpětí označovat pseudotřídou - span:n-té dítě(1) a stylizujte jej samostatně. Nastavte pravý a levý okraj a šířku.

    Ul li a span:nth-child(1) (
    šířka: 30px
    border-left: 1px solid #131313;
    border-right: 1px solid #131313;
    }

    Ikony budou stát uprostřed s poli o velikosti 10 pixelů ve všech směrech.

    text-align: center;
    výplň: 10px

    Ikony budou tmavé, o velikosti 20 pixelů na červeném pozadí.

    Barva: #131313;
    velikost písma: 20px;
    pozadí: #f44336;

    Ve druhé pseudotřídě je potřeba nastavit pouze pole.

    Ul li a span:nth-child(2) (
    výplň: 10px
    }

    Nyní vertikální menu nabyla konečné podoby. Zobrazit celý kód a výsledek.

    V tomto příspěvku vytvoříme pevné boční informační menu. Pro implementaci ikon propojíme písmo .

    Krok 1. Propojte písmo s ikonami, vytvořte prázdný dokument

    Podrobné informace o práci s fontem FontAwesome a odkaz na samotný projekt najdete v mém příspěvku -.

    Zde je kód stránky s připojenými soubory:

    Opravené postranní menu

    Krok 2: Přidání Fixed Menu HTML Markup

    Zde je značkovací kód pro naši pevnou nabídku:

    Jak jste si všimli, použil jsem značku

    Krok 3. Přidání podnabídky HTML Markup

    Podnabídka je stejný seznam jako hlavní nabídka plus značka , který zobrazuje ikonu „vozík vlevo“, plní funkci určitého „ocasu“, více podrobností na obrázku níže 🙂


    Tento prvek také spojuje prázdnotu mezi blokem nabídky a podnabídkou, čímž nám umožňuje implementovat funkci přechodu.

    Krok 4 Úprava stylu pevného bočního panelu

    Snažil jsem se komentovat stylový kód na místech, kde na tom záleží. Obecně se všechny nekomentované body týkají banálního stylingu pozadí, barvy atd.

    #sidebar-menu ( pozice: pevná; /* oprava naší nabídky */ nahoře: 200px; /* pozice nabídky vzhledem k hornímu okraji prohlížeče */ vlevo: 0; /* přilepit nabídku k levému okraji * / padding: 10px; background: # 323A45; color: #FFF; border-radius: 0 8px 8px 0; ) #sidebar-menu li ( pozice: relativní; kurzor: ukazatel; ) #sidebar-menu li i ( /* Nastavit ikony s pevnou velikostí, výškou a výškou řádku by měly být stejné */ šířka: 27px; výška: 27px; výška řádku: 27px; poloměr okraje: 4px; pozadí: #3CB7E7; zarovnání textu: na střed; ) #sidebar-menu li+li (margin-top: 4px;) #sidebar-menu b ( display: none; position: absolute; /* pozice vzhledem k levému okraji je rovna šířce prvku li */ vlevo: 27px; nahoře: 0; výška: 27px; /* šířka se rovná mezeře mezi nabídkou bloku a podnabídkou */ šířka: 16px; výška řádku: 27px; pozadí: průhledné; barva: #323A45; /* umístění ikony sám napravo tak, aby vizuálně vypadal společně s blokem podnabídky */ text-align: right; ) #sidebar -menu li > ul (zobrazení: žádné; pozice: absolutní; horní: -10px; vlevo: 42px; šířka: 120px výplň: 10px pozadí: #323A45; border-radius: 8px ) #sidebar-menu li:hover b, #sidebar-menu li:hover ul (display: block;) #sidebar-menu li a ( display: block; padding: 4px 8px; border-radius: 4px; color: #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; )

    Pokud máte nějaké dotazy ohledně stylingu, pište do komentářů k tomuto příspěvku, ráda odpovím.
    To je vše! Pevná postranní nabídka Hotovo 🙂

    Existuje mnoho hotových řešení pro tvorbu takových panelů pomocí jQuery, samostatných pluginů a modulů pro různé redakční systémy.
    To vše je velmi dobré, ale je možné si vystačit se samotným CSS a implementovat boční posuvné panely? Samozřejmě můžete! Ale buďte opatrní))), mějte na paměti, že ne všechny prohlížeče podporují moderní vlastnosti CSS3 stejně dobře.

    Není to tak dávno, co jsem „vzdal“ řešení a příklad práce. Jeden z prvních komentářů byl: "posuňme to na stranu ...". Proč ne? Pojďme)).

    Dnes řeknu a ukážu na příkladu, jak pomocí „kouzla CSS“ můžete kliknutím vytvořit menu, docela funkční.
    Nejprve podle zavedené tradice sledujeme živou ukázku fungování panelu, pak společně s těmi, kdo to potřebují, zvážíme celé zarovnání, co, jak a proč. V očekávání otázek jsem připravil možnosti pro umístění menu, a to jak vlevo, tak vpravo:

    HTML značení

    Začněme analýzu přepínačem panelu, pro který používáme standardní zaškrtávací políčko ():

    Zaškrtávací políčko umístíme v horní části dokumentu, nejlépe hned za značku . Zapíšeme atribut hidden, který přímo označuje „skrytý“ stav tohoto prvku, a také přiřadíme jedinečný identifikátor, například id="nav-toggle", pro propojení s atributem for tagu.

    Tag jsem použil jako obal pro obsah postranního panelu