W tym poście stworzymy stałe boczne menu informacyjne. Aby zaimplementować ikony, połączymy czcionkę .

Krok 1. Połącz czcionkę z ikonami, utwórz pusty dokument

Szczegółowe informacje na temat pracy z czcionką FontAwesome oraz link do samego projektu znajdziesz w moim poście.

Oto kod strony z podłączonymi plikami:

Krok 2: Dodawanie znaczników HTML w menu stałym

Oto kod znaczników naszego stałego menu:

Jak zauważyłeś, zastosowałem tag

Krok 3. Dodawanie znaczników HTML podmenu

• Twój tekst linku
• Twój tekst linku
• Twój tekst linku

Podmenu to ta sama lista, co menu główne, plus tag , który wyświetla ikonę „wózek po lewej”, pełni funkcję pewnego „ogona”, więcej szczegółów na poniższym obrazku 🙂

Ponadto ten element łączy pustkę między blokiem menu a podmenu, co pozwala nam zaimplementować funkcję przejścia.

Krok 4 Stylizacja stałego paska bocznego

Próbowałem komentować kod stylu w miejscach, w których ma to znaczenie. Ogólnie wszystkie nieskomentowane punkty dotyczą banalnej stylizacji tła, koloru itp.

#sidebar-menu ( position: fixed; /* napraw nasze menu */ top: 200px; /* pozycja menu względem góry przeglądarki */ left: 0; /* przyklej menu do lewej krawędzi */ padding: 10px; background: # 323A45; color: #FFF; border-radius: 0 8px 8px 0; ) #sidebar-menu li ( pozycja: względna; kursor: wskaźnik; ) #sidebar-menu li i ( /* Ustaw ikony o ustalonym rozmiarze, wysokość i wysokość linii powinny być takie same */ width: 27px; height: 27px; line-height: 27px; border-radius: 4px; background: #3CB7E7; text-align: center; ) # sidebar-menu li+li (margin-top: 4px;) #sidebar-menu b ( display: none; position: absolute; /* pozycja względem lewej jest równa szerokości elementu li */ left: 27px; top: 0; height: 27px; /* szerokość jest równa odstępie między menu blokowym a podmenu */ width: 16px; line-height: 27px; background: transparent; color: #323A45; /* ustaw samą ikonę na w prawo, aby wizualnie wyglądał razem z blokiem podmenu */ text-align: right; ) #sidebar -menu li > ul (wyświetlanie: brak; pozycja: bezwzględna; góra: -10px; lewy: 42px; szerokość: 120px wypełnienie: 10px tło: #323A45; promień obramowania: 8px ) #sidebar-menu li:hover b, #sidebar-menu li:hover ul (wyświetlanie: blok;) #sidebar-menu li a (wyświetlanie: blok; dopełnienie: 4px 8px; obramowanie-promień: 4px; kolor: #FFF ; -webkit-transition: wszystkie .2; -moz-transition: wszystkie .2s; -ms-transition: wszystkie .2s; -o-transition: wszystkie .2s; przejście: wszystkie .2s; ) #sidebar-menu li a :hover ( wyświetlacz: blok; tło: #3CB7E7; )

Jeśli masz jakieś pytania dotyczące stylizacji, napisz w komentarzach do tego posta, z chęcią odpowiem.
To wszystko! Naprawiono menu boczne Gotowe 🙂

W tym samouczku stworzymy klasyczne poziome menu w czystym CSS. Posiada ikony na listach. Po najechaniu na element płynnie zmienia kolor przycisku i tekstu oraz dodaje cień. Listy rozwijane mogą być wielopoziomowe, a co najważniejsze, wszystko to jest po prostu zaimplementowane w czystym CSS3.

W lekcji użyjemy:

• wyświetlanie:flex;
• użyj przejścia ;
• Pozycjonujemy elementy za pomocą position .

Struktura HTML poziomego menu

Przede wszystkim napiszmy znaczniki dla menu poziomego. Otwieramy nasze środowisko programistyczne w moim przypadku to jest PhpStorm , tworzymy plik index.html, piszemy framework html:5, zamieniamy lang na ru .

Usunę wszystkie meta oprócz kodowania, napiszę swój tytuł ” tom menu».

Pomiędzy body wpisujemy tag nagłówka, a w nim jest blok z klasą .dws-menu w której będzie się znajdowało nasze menu. Dalej struktura będzie następująca, będziemy tworzyć listy w ilości pięciu sztuk. Każda lista będzie miała link z atrybutem href="#". Wtedy pojawi się ikona I z klasą .fa .fa-

Kliknij Zastosuj.

Napiszmy nazwy pozycji menu ( Strona główna, Produkty, Usługi, Aktualności, Kontakty).

Następnie wybierz i połącz ikony. Wchodzimy na stronę Font Awesome, wybieramy ikony dla tych elementów menu:

Pobieramy archiwum ze strony z ikonami, rozpakowujemy jego zawartość na nasz komputer, kopiujemy folder fonts i folder css do naszego środowiska programistycznego.

Folder fonts zawiera czcionki ikon, a folder css ich style. Skompresowane style można usunąć przez font-awesome.min , w tym nieskompresowany font-awesome.css .

W index.html łączymy ikony i przypisujemy każdemu elementowi własny styl ikon ( Dom, wózek sklepowy, trybiki, th-lista, koperta-otwarta).

Zrobiliśmy ramkę główną, po opisaniu stylu głównego utworzymy podmenu, a teraz stworzymy plik, w którym opiszemy główne style menu poziomego style.css i połączymy je z index.html . Aby sprawdzić, czy style są połączone, stworzę folder img , umieszczę w nim dowolny obrazek na tle. Napiszmy połączenie obrazu za pomocą background .

Body( obraz w tle: url("../img/ep_naturalwhite.png"); )

Opisywanie stylów CSS dla menu poziomego

Przede wszystkim zresetujmy wszystkie wcięcia, które różne przeglądarki mogą ustawić domyślnie:

Dws-menu *( margines: 0; dopełnienie: 0; )

Ustawmy nagłówek na 200 pik. i przypisz czcionkę Cuprum, którą można pobrać i osobno podłączyć do swojej witryny, na wszelki wypadek napiszemy dodatkowe czcionki.

Nagłówek( margines: 200px; rodzina czcionek: Cuprum, Arial, Helvetica, sans-serif; )

Ukryjmy znaczniki z list:

dws-menu ul, .dws-menu ol( styl listy: brak; )

Wyświetlmy listy w poziomie za pomocą display: flax , i wyśrodkujmy:

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

W nagłówku wcinajmy tylko od góry, napisz margin-top .

Nagłówek( margines górny: 200px; rodzina czcionek: Cuprum, Arial, Helvetica, bezszeryfowy; )

Zaprojektujmy nasze menu, ustawmy kolor przycisków, czcionkę itp.

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; )

Następnie pozycjonujemy ikony, przypisujemy pozycje list: względna; aby dalej wyśrodkować ikony:

dws-menu > ul li( pozycja: względna; )

dws-menu > ul li > a i.fa( pozycja: bezwzględna; góra: 15px; lewa: 12px; rozmiar czcionki: 18px; )

Przypiszmy separator obramowania do list, wybierzmy pierwszy element LI i ustawmy obramowanie. Wybieramy ostatni element LI i przypisujemy mu podobną granicę.

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

Tworzenie separatorów dla list LI:

.dws-menu > ul li( pozycja: względna; obramowanie po prawej: 1px stałe #c7c8ca; }

Menu nabrało wyglądu, po najechaniu myszą możesz zacząć opisywać style.

Animuj menu poziome po najechaniu myszą

Dws-menu li a:hover(tło: #454547; kolor: #ffffff; box-shadow: 1px 5px 10px -5px black; przejście: wszystkie 0.3s łatwość; )

Aby ten efekt zniknął płynnie, dodaj ten styl do linku w spoczynku:

.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; przejście: wszystkie 0,3 s luzu; )

Menu główne jest zakończone i możesz zacząć opisywać podmenu i ich podmenu.

Opisywanie menu rozwijanego CSS/HTML

Otwieramy index.html i dodajemy np. dodatkowe menu do produktów. Pomiędzy listami LI wstawiamy UL , umieścimy w nim pięć list, w których będą znajdować się linki z atrybutem herf=”#” .

ul>li*5>a

Kliknij Zastosuj, wpisz nazwę pozycji ( Odzież, elektronika, żywność, narzędzia, życie. chemia).

• odzież
• Elektronika
• Żywność
• Instrumenty
• Gen. chemia

Następnie otwieramy style.css i opisujemy style podmenu.

Wybierz drugą listę i nadaj jej pozycję: bezwzględna; , ustaw minimalną szerokość na 150 pikseli.

/*podmenu*/ .dws-menu li ul( pozycja: bezwzględna; min-szerokość: 150px; )

Wpiszmy do list granicę 1 szczytu.

Dws-menu li > ul li( obramowanie: 1px solid #c7c8ca; )

W przypadku linków w podmenu ustaw dopełnienie na 10 pikseli, usuń transformację tekstu i przyciemnij tło o kilka tonów: #e4e4e5; .

Dws-menu li > ul li a( dopełnienie: 10px; transformacja tekstu: brak; tło: #e4e4e5; )

Następnie stworzymy kolejne zagnieżdżone menu. Przejdźmy do pliku znaczników i na przykład w „Elektroniku” tworzymy menu przez analogię, tak jak to robiliśmy wcześniej. Opisz nagłówki akapitów ( Aparaty, komputery, telefony) i zapisz.

Elektronika

• kamery
• Komputery
• Telefony

Są wyświetlane, ale ukryte pod głównym menu, teraz pozycja: bezwzględna; zagnieżdżony UL i przesuń go o 150 pików. na bok:

Dws-menu li > ul li ul( pozycja: bezwzględna; prawo: -150px; góra: 0; )

/*podmenu*/ .dws-menu li ul( pozycja: bezwzględna; min-szerokość: 150px; Nie wyświetla się; )

A dla ich wyglądu wybierzemy listy po najechaniu i wyświetlimy je za pomocą display: block; .

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

Teraz możesz dodawać wielopoziomowe menu, po prostu kopiując blok UL, zmieniając jego pozycje.

• Dom
• Produkty
  • odzież
    • Obuwie
    • Kurtki
    • Spodnie
  • Elektronika
    • kamery
    • Komputery
    • Telefony
      • SAMSUNG
      • Flf
      • Jabłko
  • Żywność
  • Instrumenty
  • Gen. chemia
• Usługi
  • Usługa 1
  • Usługa 2
  • Usługa 3
• Aktualności
• Łączność

Następnie udekorujmy guziki składnikiem na ostatnie kroki. Używam generatora CSS, mam stworzonych kilka Presetów, możesz stworzyć swój własny, w moim przypadku po prostu kopiuję ten kod i umieszczam go w tle, który napisałem wcześniej.

.dws-menu > ul li a( wyświetlanie: blok; /* Permalink - użyj, aby edytować i udostępniać ten gradient: http://colorzilla.com/gradient-editor/#c9c9c9+0,f6f6f6+2,c4c5c7+98,757577+100;Niestandardowe+3 */ tło: #c9c9c9 ; /* Stare przeglądarki */ background: -moz-linear-gradient(top, #c9c9c9 0%, #f6f6f6 2%, #c4c5c7 98%, #757577 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(góra, #c9c9c9 0%,#f6f6f6 2%,#c4c5c7 98%,#757577 100%); /* Chrome10-25,Safari5.1-6 */ background: liniowy-gradient (do dołu, #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; rozmiar czcionki: 14px; kolor: #454547; dekoracja tekstu: brak; transformacja tekstu:wielkie; przejście: wszystkie 0,3 s luzu; ).dws-menu li a: hover( /* Permalink - użyj do edycji i udostępniania tego gradientu: http://colorzilla.com/gradient-editor/#e0e1e5+0.454547+2.454547+98,e0e1e5+100 */ background: #e0e1e5; /* Stare przeglądarki */ background: -moz-linear-gradient(top, #e0e1e5 0%, #454547 2%, #454547 98%, #e0e1e5 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(góra, #e0e1e5 0%,#454547 2%,#454547 98%,#e0e1e5 100%); /* Chrome10-25,Safari5.1-6 */ background: liniowy-gradient (do dołu, #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 */ kolor: #ffffff; box-shadow: 1px 5px 10px -5px czarny; przejście: wszystkie 0,3 s luzu; )

Jeśli chcesz, to menu można dostosować do stylu, który Ci odpowiada na stronie, wystarczy wygenerować kolor i zastąpić go w kodzie. Rezultatem jest proste i jednocześnie ładne menu poziome wykonane w czystym CSS.

Dla blogerów bardzo ważna jest dobra nawigacja w witrynie. Z jego pomocą odwiedzający szybko znajduje pożądaną stronę bloga. Doceń przejrzystość strony i wyszukiwarek. W tym artykule dowiesz się, jak stworzyć poziome menu dla Bloggera z ikonami wyskakującymi.
Menu z wyskakującymi ikonami przycisków jest tworzone w CSS. Aby wyświetlić menu, kliknij przycisk poniżej:

Jak wstawić poziome menu CSS z ikonami w Bloggerze

1. Przejdź do zakładki „Szablon”, umieść kursor w edytorze (dowolne miejsce),
2. Naciśnij Ctrl + F, aby wyszukać według kodu i znaleźć fragment kodu ]]>
3. Wstaw następujący kod przed tym kodem:
   ..
   

   /* Kod CSS menu zaczyna się tutaj bloggertrix.com */ #btrix-nav (margines: 100px auto;styl-listy: brak;szerokość: 632px;wysokość: 87px;przepełnienie-y: ukryte;)
   #btrix-nav li (liczba: lewa;)
   #btrix-nav li a (wyświetlacz: blok;kolor: biały;szerokość: 120px;wysokość: 61px;margin-top: 24px;text-decoration: none;text-align: center;border-top: 1px solid #bbb; obramowanie-dół: 1px solid #555;)
   #btrix-nav li a span.aname (czcionka: pogrubiona 17px/61px "Arial";kolor: #fff;text-transform: wielkie litery;kursor: wskaźnik;pozycja: względna;góra: 0;przejście: góra .5s łatwość; cień tekstu: 1px 1px 1px rgba(0, 0, 0, 0.5);)
   #btrix-nav li a img (pozycja: względna; góra: 0; przejście: góra .5 s łatwość;)
   #btrix-nav li a:hover (kursor: wskaźnik;)
   #btrix-nav li a:hover img (góra: -85px;)
   #btrix-nav li a:hover .aname (góra: 85px;)
   #btrix-nav li:nth-child(1) a (tło: #3eb006;border-radius: 5px 0 0 5px;border-left: 1px solid #bbb;)
   #btrix-nav li:nth-child(2) a (tło: #9bc704;)
   #btrix-nav li:nth-child(3) a (tło: #0dc3ff;)
   #btrix-nav li:nth-child(4) a (tło: #51a2ec;)
   #btrix-nav li:nth-child(5) a (tło: #6e3cab;border-radius: 0 5px 5px 0;border-right: 1px solid #555;)

4. Teraz przejdź do zakładki „Projekt”,
5. Dodaj nowy element HTML/JavaScript i dodaj kod:

   
   

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

   
   

   Pobierać https://2.bp.blogspot.com/-TcXder58ssQ/Ug5ASx8pT0I/AAAAAAAAAA0o/5UdA4_gLnV8/s1600/btrix-download.png" />

   
   

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

   
   

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

   
   

   Łączność https://4.bp.blogspot.com/-vsm9s0yQr9I/Ug5ASjqawnI/AAAAAAAAAA0k/rqb01AbGaFw/s1600/btrix-contact.png" />

6. Wprowadź niezbędne zmiany w kodzie dodanym do gadżetu HTML/JavaScript:

• Zmień ikonę # na łącze do żądanej strony bloga (na przykład strony tagu, strony kontaktowej, strony głównej bloga itp.)
• link do obrazka podświetlonego na pomarańczowo, zastąp bezpośrednim linkiem do obrazu ikony odpowiedniego elementu.
• Pozycja podświetlona na niebiesko, to jest tytuł strony menu CSS.

Przenieść element HTML ? JavaScript we właściwe miejsce w zakładce "Projekt" bloga.

W swoim menu możesz użyć ikon, logo i innych obrazów PNG z przezroczystym tłem. Aby znaleźć żądane zdjęcia, lepiej skorzystać z wyszukiwania według ikon. Na przykład, iconsearch.com

Dzień dobry, drodzy czytelnicy. Dziś porozmawiamy na ten temat jak zrobić poziome menu używając html i css”. Menu z reguły znajduje się w nagłówku strony i jest listą linków do najważniejszych stron, jest również nazywane menu główne. Użytkownicy będą stale klikać te linki. To, jak je rozmieścisz i jaki projekt nadasz menu, wpłynie na zachowanie użytkowników, konwersję, ich ogólne wrażenia z Twojej witryny i oczywiście .

Kod HTML dla menu poziomego

Dawno, dawno temu główne menu witryny było tworzone na zdjęciach, tabelach, flashie i być może na czymś innym, ale obecnie jest najpopularniejsza i poprawna metoda tworzenia menu za pomocą tagów „lista”.

Tagi służą do tworzenia menu.

,
• oraz .

Przykład wykorzystania tagów html do stworzenia menu w poniższym kodzie:

• Dom
• Usługi
• Ceny
• Łączność

Standardowe style CSS dla menu poziomego

ul ( list-style: none; /*usuń znaczniki listy*/ margin: 0; /*usuń dopełnienie*/ padding-left: 0; /*usuń dopełnienie*/ ) a ( text-decoration: none; /*usuń podkreślenie link text*/ ) li ( float:left; /*Umieść listę poziomo, aby zaimplementować menu*/ margin-right:5px; /*Wcięcie elementów menu*/ )

W nagłówku otrzymujemy gotowe menu górne, bez żadnych specjalnych stylów i dzwonków i gwizdków, można to nazwać ramą Twojego przyszłego pięknego menu. Jeśli skopiujesz i wkleisz ten html i css, będzie to wyglądać tak.

Przykład ramki (szablonu) do przyszłego menu

Wszystko wyszło całkiem prosto, oczywiście od razu chcesz mieć piękne menu główne, ale bez zrozumienia podstaw po prostu nie będziesz w stanie stworzyć dobrego menu bez błędów w html i css.

Istnieje również kilka innych metod CSS używanych do tworzenia poziomych menu oprócz float:left; , na przykład display:inline-block; lub display:flex; , ale zaleca się użycie metody opisanej powyżej.

Wypełnijmy nasz szablon menu różnymi stylami i zróbmy to piękny.

Przykłady pięknego poziomego menu na stronie internetowej

Teraz podam kilka gotowych przykładów z gotowym projektem menu poziomego.

Możesz sam stworzyć wszystkie „ładne rzeczy” dla swojej witryny, a nie szukać w Internecie. Najłatwiej to zrobić na podstawie jednego z poniższych przykładów.

Proste niebieskie menu z oddzielnymi pozycjami

Style CSS dla "górnego" menu

Poniżej znajdują się style tego menu. HTML pozostaje taki sam jak w menu "szkielet".

Ul ( list-style: none; /*usuń znaczniki listy*/ margin: 0; /*usuń dopełnienie*/ padding-left: 0; /*usuń dopełnienie*/ margin-top:25px; /*wcięcie u góry*/ ) a ( text-decoration: none; /*usuń podkreślenie tekstu linku*/ background:#30A8E6; /*dodaj tło do pozycji menu*/ color:#fff; /*zmień kolor linku*/ padding:10px; /*dodaj wypełnienie */ font-family: arial; /*zmień czcionkę*/ border-radius:4px; /*dodaj zaokrąglenie*/ -moz-transition: łatwość wszystkich 0.3s 0.01s; /*wykonaj płynne przejście*/ -o-transition : luz 0,3 s 0,01 s; -webkit-transition: luz 0,3 s 0,01 s; ) a:hover ( background:#1C85BB;/*dodaj efekt najechania*/ ) li ( float:left; /*ułóż listę poziomo do zaimplementuj menu*/ margin-right:5px; /*Wcięcie elementów menu*/ )

Menu główne umieszczone na kolorowej linii z czerwonym tłem

menu stylu css na linii kolorów

ul ( list-style: none; /*usuń znaczniki listy*/ margin: 0; /*usuń dopełnienie*/ padding-left: 0; /*usuń dopełnienie*/ margin-top:25px; /*wcięcie u góry*/ tło :#FF4444; /*dodaj tło do całego menu (zastąpienie tego parametru zmieni kolor całego menu)*/ height: 50px; /*ustaw wysokość*/ ) a ( text-decoration: none; /* usuń podkreślenie tekstu linku* / background:#FF4444; /*dodaj tło do elementu menu (zastąpienie tego ustawienia spowoduje zmianę koloru wszystkich elementów menu)*/ color:#fff; /*zmień kolor linku* / padding:0px 15px; /*dodaj padding*/ font-family: arial; /*zmień czcionkę*/ line-height:50px; /*wyrównaj menu w pionie*/ display: block; border-right: 1px solid # F36262; /*dodaj ramkę po prawej stronie*/ -moz-transition : luz 0,3 s 0,01 s; /* wykonaj płynne przejście*/ -o-transition: luz 0,3 s 0,01 s; -webkit-transition: wszystko 0,3 s 0,01 s luz; ) a:hover ( background:#D43737;/ *dodaj efekt najechania*/ ) li ( float:left; /*ułóż listę poziomo dla prawdziwego menu*/ )

Rozwijane menu w HTML+CSS

Do realizacji dodatkowe menu rozwijane (rozwijane) na stronie dla dowolnego elementu menu musimy dodać dodatkową listę elementów do kodu HTML dla dowolnego linku z menu poziomego i zmienić style CSS. W stylach zastosujemy prostą sztuczkę - zmieniając wyświetlanie rozwijanego menu po najechaniu kursorem na potrzebną nam pozycję w górnym menu. Na przykład weźmy pozycję „usługi”.

Przykład tworzenia prostego menu rozwijanego

Kod HTML menu rozwijanego

• Dom
• Usługi
  • Usługa 1
  • Długa służba 2
  • Usługa 3
• Ceny
• Łączność

Rozwijane style CSS

ul ( list-style: none; /*usuń znaczniki listy*/ margin: 0; /*usuń dopełnienie*/ padding-left: 0; /*usuń dopełnienie*/ margin-top:25px; /*wcięcie u góry*/ tło :#819A32; /*dodaj tło do całego menu*/ height: 50px; /*ustaw wysokość*/ ) a ( text-decoration: none; /*usuń podkreślenie tekstu linku*/ background:#819A32 ; /*dodaj tło do pozycji menu*/ color:#fff; /*zmień kolor linków*/ padding:0px 15px; /*dodaj padding*/ font-family: arial; /*zmień czcionkę*/ line-height :50px; /*wyrównaj menu do pionów*/ display: block; border-right: 1px solid #677B27; /*dodaj ramkę do prawej*/ -moz-transition: wszystkie 0.3s 0.01s easy; /*make a płynne przejście*/ -o-transition: luz 0,3 s 0,01 s; -przejście webkit: luz dla wszystkich 0,3 s 0,01 s; ) a:hover ( background:#D43737;/*Dodaj efekt najechania*/ ) li ( float :left; /*Umieść listę poziomo, aby zaimplementować menu* / position:relative; /*ustaw pozycję do pozycjonowania*/ ) /*Style ukrytego menu rozwijanego* / li > ul ( pozycja: bezwzględna; góra:25px; Nie wyświetla się; ) /*Pokaż ukrytą część*/ li:hover > ul ( display:block; width:250px; /*Ustaw szerokość menu rozwijanego*/ ) li:hover > ul > li ( float:none; /* Usuń pozycjonowanie poziome* / )

Aby dokładnie zrozumieć, jakie usługi i kategorie powinieneś mieć, polecam zapoznanie się z materiałem:.

Próbowałem jak najkrócej opowiedzieć o tym, jak stworzyć główne poziome menu, zrobić kilka szablonów, jak dodać do niego proste style i upiększyć, jak zrobić rozwijane menu dla swojej witryny. Dla wygody wszystkie przedstawione powyżej menu zebrałem w jednym pliku html, który możecie pobrać poniżej. Wygląda to tak jak na zrzucie ekranu:

Dziękuję za uwagę.

Menu pionowe odbywa się na podstawie listy, punktowanej lub numerowanej. Domyślnie wszystkie elementy listy są ułożone pionowo, zajmując całą szerokość elementu kontenera, który z kolei zajmuje całą szerokość jego bloku kontenera.

Elementy listy mogą zawierać nie tylko linki, ale także tytuły, ikony, obrazki. Za pomocą pionowego menu możesz dodawać komentarze na stronie, listę kategorii itp.

1. Menu pionowe z tytułem

Prosty elegancki design. Nadaje się do stylizacji kategorii na stronie. Po najechaniu kursorem element listy zmienia kolor linku.

* (rozmiar pudełka: border-box; margines: 0;) .widget ( padding: 20px 30px; background: white; font-family: "Roboto", sans-serif; ) .widget-title ( text-transform: wielkie litery ; odstępy między literami: 2px; kolor: #222; rozmiar czcionki: 16px; padding-left: 15px; margin-bottom: 15px; border-left: 2px solid #b99d61; ) .widget-list ( padding: 0; lista -style: brak; ). 6px 0; odstępy między literami: 1px; grubość czcionki: 300; kolor: #444; przejście: .3s linear; .widget-list a:hover (kolor: #b99d61;)

2. Pionowe menu w stylu „mapa metra”

Ciekawym rozwiązaniem przy projektowaniu menu pionowego jest możliwość dodawania menu zagnieżdżonych. „Metro oddział” – lewa krawędź listy, przed każdym linkiem generowane są znaczniki.

• Element listy
  • zagnieżdżony element listy
  • zagnieżdżony element listy
  • zagnieżdżony element listy
• Element listy
• Element listy

.metro ( styl listy: brak; dopełnienie: 0; margines: 30px 0 0 50px; obramowanie po lewej: 5px solid #DAE4F1; ) .metro li (wysokość linii: 2em;) .metro ul ( margines: 20px 0 20px 15px; dopełnienie: 0; obramowanie: brak; styl listy: brak; ) .metro ul:before, .metro ul:after (content: ""; szerokość: 5px; wysokość: 28px; tło: #DAE4F1; pozycja: względna ; display: block; left: -9px; ) .metro ul:before ( transform: rotate(-45deg); margin-top: -15px; ) .metro ul:after ( transform: rotate(45deg); bottom: -20px ; ). -bottom: 9px; margin-bottom: -25px; ) .metro a ( dekoracja tekstu: brak; wyświetlacz: blok; rodzina czcionek: "Noto Sans", sans-serif; kolor: #4A4B4D; ) .metro a: przed ( content: ""; display: inline-block; background: #CA682D; szerokość: 12px; wysokość: 12px; left: -9px; position: relatywne; border-radius: 50%; margin-right: .5em; )

3. Pionowe menu z efektami najechania

Ikona i wypełnienie tła, które pojawiają się po najechaniu kursorem na element listy, pomogą urozmaicić projekt pionowych elementów menu.

.category-wrap ( padding: 15px; tło: białe; szerokość: 200px; box-shadow: 2px 2px 8px rgba(0,0,0,.1); rodzina czcionek: "Helvetica Neue", Helvetica, Arial, sans -serif; ) .category-wrap h3 ( rozmiar czcionki: 16px; kolor: rgba(0,0,0,.6); margines: 0 0 10px; padding: 0 5px; pozycja: względna; ) .category-wrap h3:after ( content: ""; szerokość: 6px; wysokość: 6px; tło: #80C8A0; pozycja: bezwzględna; prawo: 5px; dół: 2px; box-shadow: -8px -8px #80C8A0, 0 -8px #80C8A0 , -8px 0 #80C8A0; ) .category-wrap ul ( list-style: brak; margines: 0; padding: 0; border-top: 1px solid rgba(0,0,0,.3); ).category- wrap li (margines: 12px 0 0 0px;) .category-wrap a (dekoracja tekstu: brak; wyświetlacz: blok; rozmiar czcionki: 13px; kolor: rgba (0,0,0,.6); padding: 5px ; pozycja: względna; przejście: .3s linear; ) .category-wrap a:after ( content: "\f18e"; rodzina czcionek: FontAwesome; pozycja: bezwzględna; prawo: 5px; kolor: biały; przejście: .2s linear ; ) .category-wrap a:hover ( tło: #80C8A0 ; kolor biały; )

4. Pionowe menu z ikonami

Ikony menu stanowią wizualną kotwicę, uzupełniając słowny opis każdej kategorii. Aby wyświetlić ikony, musisz się połączyć . Możesz również użyć dowolnej innej ikony czcionki lub obrazu.

* (rozmiar pudełka: 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; lista -style: brak; szerokość: 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 ( dekoracja tekstu: brak; kolor: #616a6b; display: inline-block; ) .widget li:before ( rodzina czcionek: FontAwesome; rozmiar czcionki : 20px; vertical-align:bottom; color: #dd3333; margin-right: 14px; ) .widget li:nth-child(1):before (content:"\f1fc";) .widget li:nth-child( 2):before (treść:"\f0d0";) .widget li:nth-child(3):before (treść:"\f0cd";) .widget li:nth-child(4):before (treść:" \f028";) .widget li:nth-child(5):before (treść:"\f03d";)

5. Menu pionowe ze zdjęciami

Ten przykład można wykorzystać do projektowania bloków z nowymi produktami, podobnymi produktami itp. strona sklepu internetowego.

JPEG">