Новости

Как правильно применять в JavaScript асинхронные функции: примеры работы с ES 2017
От автора: возможность писать на JavaScript асинхронные функции является важным обновлением в ES2017. Что такое асинхронные функции? Асинхронные функции — это функции, которые возвращают promise. Мы

WordPress JavaScript — как правильно подключить файл скрипта к шаблону сайта
Использование в шаблонах WordPress JavaScript скриптов давно стало обычным делом. Их подключение возможно несколькими способами, начиная с классического варианта с использование голого HTML. Но чтобы все

Как исправить JavaScript error "ВКонтакте"? Что делать при ошибках JavaScript в "ВКонтакте"?
"ВКонтакте" - это на сегодняшний день самый удобный русскоязычный ресурс, который является не только популярнейшей социальной сетью, но и сервисом для прослушивания аудиозаписей и просмотра видео. Здесь

Правильное использование Tor Browser
Tor Browser полностью анонимен – Миф или реальность? Многие считают, что Tor — это полностью анонимное и безопасное средство для интернет-серфинга, которое не дает никому возможность контролировать то,

Javascript error object is not a function вконтакте как исправить
"ВКонтакте" - это на сегодняшний день самый удобный русскоязычный ресурс, который является не только популярнейшей социальной сетью, но и сервисом для прослушивания аудиозаписей и просмотра видео. Здесь

Как исправить ошибку javascript error вконтакте
На сегодняшний день «Вконтакте» является наиболее удобным русскоязычным ресурсом, который представляет собой не только крупнейшую социальной сеть, но и сервис для просмотра видео и прослушивания аудиозаписей.

Что такое JavaScript и для чего он используется?
Подробности декабря 10, 2015 Просмотров: 20225 В интернете миллионы веб-страниц,

Практика javascript синтаксис написания
Javascript — это язык программирования, который активно используется для построения динамических веб страниц. Собственно с этой целью он и был изобретен. У нашего с вами языка еще есть такое интересное

JavaScript учебник
Код функций в JavaScript начинает выполнение после их вызова. Функции являются одним из наиболее важных строительных блоков кода в JavaScript. Функции состоят из набора команд и обычно выполняют

Рекомендации решившим начать изучать JavaScript
Если вы решили начать изучать JavaScript , то эта статья для вас. Надеюсь, что её прочтение избавит вас в будущем от множества ошибок и сделает его изучения более простым, быстрым и эффективным. В статье

Czyste menu rozwijane CSS / HTML

  1. Czyste menu rozwijane CSS / HTML W tym samouczku stworzymy klasyczne menu poziome na czystym CSS....
  2. Animujemy poziome menu podczas wskazywania.
  3. Opisz menu rozwijane CSS / HTML

Czyste menu rozwijane CSS / HTML

W tym samouczku stworzymy klasyczne menu poziome na czystym CSS. Ma ikony na listach. Wskazując element, płynnie zmienia kolor przycisku i tekstu, dodawany jest cień. Listy rozwijane można tworzyć wielopoziomowo, a najważniejsze jest to, że są one w prosty sposób implementowane na czystym CSS3.

Kontynuacja tej lekcji tutaj - część 2 WERSJA MOBILNA menu poziome

Zobacz pióro POyzbW przez Denis ( @Dwstroy ) na Codepen .

W lekcji użyj:

  • wyświetlacz: flex;
  • użyj przejścia;
  • ustaw elementy w pozycji.

Struktura poziomego menu HTML

Najpierw zapisz znaczniki poniżej poziomego menu. Otwieramy nasze środowisko programistyczne w moim przypadku, to jest PhpStorm, stwórz plik index.html, przepisz ramkę html: 5, zastąp lang ru.

Wszystkie meta zostaną usunięte z wyjątkiem kodowania, zarejestruję swój tytuł „ Menu Toma ”.

Między ciałem piszemy tag nagłówka, aw nim blok z menu .dws klasy, które zawiera nasze menu. Następnie struktura będzie wyglądać następująco: stworzymy listy w ilości pięciu sztuk. Na każdej liście będzie link z atrybutem href = "#". Następnie przejdę do ikony z klasą .fa .fa-

<header> <nav class = "dws-menu"> ul> li * 5> a [href = "#"]> i.fa.fa- </ nav> </ header>

Naciskamy, aby złożyć wniosek.

Zapiszmy nazwy pozycji menu ( Dom, Produkty, Usługi, Wiadomości, Kontakty ).

Następnie wybierz i połącz ikony. Przejdź do witryny, wybierz ikony dla tych elementów menu:

<i class = "fa fa- home "> </ i> <i class = "fa fa- shopping- cart "> </ i> <i class = "fa faycogs"> </ i> <i class = "fa fa- th-list "> </ i> <i class = "fa fa -envelope-open "> </ i>

<i class = fa fa- home > </ i> <i class = fa fa- shopping- cart > </ i> <i class = fa faycogs> </ i> <i class = fa fa- th-list > </ i> <i class = fa fa -envelope-open > </ i>

Pobierz archiwum z witryny za pomocą ikon, wyodrębnij jego zawartość na komputer, skopiuj folder czcionek i folder css do środowiska programistycznego.

Folder czcionek zawiera czcionki ikon, a folder css zawiera ich style. Skompresowane style można usunąć font-awesome.min, podłączamy nieskompresowany font-awesome.css.

W index.html łączymy ikony i rejestrujemy każdy element z własnym stylem ikon ( strona główna , koszyk na zakupy , trybiki , lista-stron , koperty otwarte ).

Stworzyliśmy ramkę główną, utworzyliśmy podmenu po opisie głównego stylu, a teraz utworzymy plik, w którym opiszemy główne style poziomego menu style.css i połączymy go z index.html. Aby sprawdzić, czy style są połączone, utwórz folder img, w którym umieściłem dowolne zdjęcie w tle. Napiszmy połączenie obrazu za pomocą tła.

body {background-image: url ("../ img / ep_naturalwhite.png"); }

Jak widzimy, wszystko zostało wyświetlone, a następnie przejdziemy do opisu stylów.

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

.dws-menu * {margin: 0; wypełnienie: 0; }

Ustaw nagłówek na 200 pików. i przypisz, które możesz pobrać i osobno połącz się ze sobą na stronie, na wszelki wypadek, napisz dodatkowe czcionki.

header {margin: 200px; font-family: Cuprum, Arial, Helvetica, sans-serif; }

Ukryj znaczniki na listach:

.dws-menu ul, .dws-menu ol {list-style: none; }

Listy będą wyświetlane poziomo z wyświetlaczem: len, a my zrobimy to na środku:

.dws-menu> ul {display: flex; justify-content: center; }

W nagłówku wcniemy tylko górę, napiszemy margines.

header { margin-top: 200px; font-family: Cuprum, Arial, Helvetica, sans-serif; }

Zaprojektujmy nasze menu, ustaw kolor przycisków, czcionki itp.

Wybierz linki nav> ul li, i zablokuj je. Ustaw tło menu, wpisz wcięcia, określ rozmiar, kolor, usuń podkreślenie i utwórz nagłówki wielkimi literami.

.dws-menu> ul li a {display: block; tło: #ececed; dopełnienie: 15px 30px 15px 40px; rozmiar czcionki: 14px; kolor: # 454547; dekoracja tekstowa: brak; text-transform: wielkie litery; }

Następnie ustaw ikony, przypisz listy do pozycji: względne; dla dalszego wyrównania ikon:

.dws-menu> ul li {position: relative; }

Następnie wybieramy ikony, ustawiamy je absolutnie, wykonujemy wcięcia od góry na 15 pikach, od lewej 12 pików, zwiększamy rozmiar do 18 pików.

.dws-menu> ul li> a i.fa {position: absolute; top: 15px; left: 12px; rozmiar czcionki: 18px; }

Przypisz separator w postaci obramowania do list, wybierz pierwszy element LI, ustaw granicę. 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; }

Wprowadzanie separatorów dla list LI:

.dws-menu> ul li {position: relative; border-right: 1px solid # c7c8ca; }

Menu uzyskało wygląd, a następnie możesz przejść do opisu stylów podczas zawisu.

Animujemy poziome menu podczas wskazywania.

Wybierz łącza i przypisz kolor do bloku, a następnie przypisz kolor samego linku ikoną do bieli. Dodajmy kolejny ciemny cień. Z pomocą przejścia w 0,3 sekundy zrobimy gładki wygląd:

.dws-menu li a: hover {tło: # 454547; kolor: #ffffff; box-shadow: 1px 5px 10px -5px czarny; przejście: łatwość wszystkich 0.3s; }

Aby ten efekt zniknął płynnie, dodaj ten styl do linku bez problemu:

.dws-menu> ul li a {display: block; tło: #ececed; dopełnienie: 15px 30px 15px 40px; rozmiar czcionki: 14px; kolor: # 454547; dekoracja tekstowa: brak; text-transform: wielkie litery; przejście: łatwość wszystkich 0.3s; }

Menu główne zostanie zakończone i możesz przejść do opisu podmenu i zawartych w nich podmenu.

Opisz menu rozwijane CSS / HTML

O nas otwieramy index.html i dodajemy na przykład dodatkowe menu do produktów. Wstaw UL między listami LI i umieść w niej pięć list, które będą zawierały linki z atrybutem herf = ”#”.

ul> li * 5> a [href = "#"]

Naciskamy, aby złożyć wniosek, wpisz nazwę przedmiotów ( odzież, elektronika, żywność, narzędzia, życie. Chemia ).

<ul> <li> <a href="#"> Odzież </a> </ li> <li> <a href="#"> Elektronika </a> </ li> <li> <a href = „#”> Żywność </a> </ li> <li> <a href="#"> Narzędzia </a> </ li> <li> <a href="#"> Życie. chemia </a> </ li> </ ul>

Następnie otwórz style.css i opisz style podmenu.

Wybieramy drugą listę i przypisujemy jej pozycję: absolutna; , ustawmy minimalną szerokość na 150 pików.

/ * podmenu * / .dws-menu li ul {position: absolute; min-width: 150px; }

Napiszmy do list granicznych przy 1 piku.

.dws-menu li> ul li {border: 1px solid # c7c8ca; }

Dla linków w podmenu ustawimy wcięcia na 10 pikach., Usuń transformację tekstu i spraw, by tło było o kilka tonów ciemniejszym tłem: # e4e4e5; .

.dws-menu li> ul li a {padding: 10px; text-transform: none; tło: # e4e4e5; }

Następnie utwórz kolejne podmenu. Przejdź do pliku znaczników i na przykład w formularzu „Elektronika” przez analogiczne menu, tak jak wcześniej. Opisujemy nagłówki artykułów ( aparaty fotograficzne, komputery, telefony ) i oszczędzamy.

<li> <a href="#"> Elektronika </a> <ul> <li> <a href="#"> Kamery </a> </ li> <li> <a href="#"> Komputery </a> </ li> <li> <a href="#"> Telefony </a> </ li> </ ul> </ li>

Zostały wyprowadzone, ale ukryte pod głównym menu, teraz pozycja: absolutna; zagnieżdżony UL i przenieś go na szczyt 150. z boku:

.dws-menu li> ul li ul {position: absolute; right: -150px; top: 0; }

Następnie sprawimy, że podmenu pojawi się podczas kierowania głównych elementów górnego menu, do tego dodamy wyświetlacz: brak; i tym samym ukryć wszystkie wewnętrzne punkty.

/ * podmenu * / .dws-menu li ul {position: absolute; min-width: 150px; wyświetlacz: brak; }

A dla ich wyglądu wybieramy listy w dymku i wyświetlają 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 elementy.

<ul> <li> <a href="#"> <i class = "fa fa-home"> </ i> Home </a> </ li> <li> <a href="#"> < i class = "fa fa-shopping-cart"> </ i> Produkty </a> <ul> <li> <a href="#"> Odzież </a> <ul> <li> <a href = „#”> Buty </a> </ li> <li> <a href="#"> Kurtki </a> </ li> <li> <a href="#"> Spodnie </a> < / li> </ ul> </ li> <li> <a href="#"> Elektronika </a> <ul> <li> <a href="#"> Kamery </a> </ li> <li> <a href="#"> Komputery </a> </ li> <li> <a href="#"> Telefony </a> <ul> <li> <a href="#"> Samsung </a> </ li> <li> <a href="#"> Flf </a> </ li> <li> <a href="#"> Apple </a> </ li> < / ul> </ li> </ ul> </ li> <li> <a href="#"> Żywność </a> </ li> <li> <a href="#"> Narzędzia </ h a> </ li> <li> <a href="#"> Gen. chemia </a> </ li> </ ul> </ li> <li> <a href="#"> <i class = "fa fa-cogs"> </ i> Usługi </a> <ul > <li> <a href="#"> Usługa 1 </a> </ li> <li> <a href="#"> Usługa 2 </a> </ li> <li> <a href = „#”> Usługa 3 </a> </ li> </ ul> </ li> <li> <a href="#"> <i class = „fa fa-th-list”> </ i> Wiadomości </a> </ li> <li> <a href="#"> <i class = "fa fa-envelope-open"> </ i> Kontakty </a> </ li> </ ul>

Następnie zakończmy przyciski przyciskami. Używam, stworzyłem kilka ustawień wstępnych, możesz stworzyć swój własny, w moim przypadku po prostu skopiowałem ten kod i umieściłem go w miejscu, które wcześniej napisałem.

.dws-menu> ul li a {display: block; / * Permalink - ten gradient: http://colorzilla.com/gradient-editor/#c9c9c9+0,f6f6f6+2,c4c5c7+98.757577+100;Custom+3 * / background: # c9c9c9 ; / * Stare przeglądarki * / tło: -moz-linear-gradient (góra, # 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: gradient liniowy (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 tekstowa: brak; text-transform: wielkie litery; przejście: łatwość wszystkich 0.3s; } .dws-menu li a: hover {/ * Permalink - ten gradient: http://colorzilla.com/gradient-editor/#e0e1e5+0.454547+2.454547+98,e0e1e5+100 * / background: # e0e1e5; / * Stare przeglądarki * / tło: -moz-liniowy-gradient (góra, # 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 * / tło: gradient liniowy (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 * / color: #ffffff; box-shadow: 1px 5px 10px -5px czarny; przejście: łatwość wszystkich 0.3s; } dws-menu> ul li a {display: block;  / * Permalink - ten gradient: http://colorzilla

Jeśli chcesz, to menu może być zaprojektowane dla stylu, który jest dla Ciebie odpowiedni na stronie, wystarczy wygenerować kolor i zastąpić go kodem. Okazało się, że proste i jednocześnie ładne poziome menu, wykonane w czystym CSS.

Zostaw komentarz: