Pure CSS / HTML drop-down menu

Pure CSS / HTML drop-down menu In deze tutorial maken we een klassiek horizontaal menu op pure CSS....
We animeren het horizontale menu terwijl we wijzen.
Beschrijf het vervolgkeuzemenu CSS / HTML

Pure CSS / HTML drop-down menu
In deze tutorial maken we een klassiek horizontaal menu op pure CSS. Het heeft pictogrammen in de lijsten. Als u naar een item wijst, verandert het vloeiend de kleur van de knop en de tekst, er wordt een schaduw toegevoegd. Vervolgkeuzelijsten kunnen op meerdere niveaus worden gemaakt en het belangrijkste is dat alles eenvoudigweg wordt geïmplementeerd op pure CSS3.
De voortzetting van deze les hier - deel 2 MOBIELE VERSIE horizontaal menu ".
Zie de pen POyzbW door Denis ( @Dwstroy ) aan CodePen .
Gebruik in de les:
weergave: flex;
gebruik overgang;
plaats de elementen met de positie.

HTML horizontale menustructuur

Schrijf eerst de opmaak onder het horizontale menu. We openen onze ontwikkelomgeving in mijn geval, dit is PhpStorm, maak een index.html-bestand aan, schrijf het frame html: 5 voor, vervang lang met ru.

Alle meta worden verwijderd, behalve de codering. Ik zal mijn titel " Tom-menu " registreren.

Tussen de body schrijven we de header-tag, en daarin staat een blok met het klasse .dws-menu dat ons menu zal bevatten. Vervolgens zal de structuur als volgt zijn, we zullen lijsten maken in de hoeveelheid van vijf stukken. In elke lijst staat een link met het kenmerk href = "#". Daarna ga ik naar het pictogram met de klasse .fa .fa

We drukken op om toe te passen.

Laten we de naam van de menu-items ( Thuis, Producten, Diensten, Nieuws, Contacten ) opschrijven.

Selecteer en verbind vervolgens de pictogrammen. Ga naar de site, we zullen de pictogrammen voor deze menu-items selecteren:

Download het archief van de site met pictogrammen, extraheer de inhoud naar uw computer, kopieer de map met lettertypen en de map css naar uw ontwikkelomgeving.

De map met lettertypen bevat pictogramlettertypen en de map css bevat hun stijlen. Gecomprimeerde stijlen kunnen worden verwijderd font-awesome.min, we verbinden het niet-gecomprimeerde font-awesome.css.

In index.html verbinden we pictogrammen en we registreren elk item met zijn eigen pictogramstijl ( home , winkelwagentje , radertjes , th-lijst , envelop open ).

We hebben het hoofdframe gemaakt, creëren een submenu na de beschrijving van de hoofdstijl en nu zullen we een bestand maken waarin we de hoofdstijlen van de horizontale menu style.css zullen beschrijven en verbinden met index.html. Om te controleren of de stijlen verbonden zijn, maak je een img-map, daarin zal ik een willekeurige afbeelding op de achtergrond plaatsen. Laten we de beeldverbinding schrijven met behulp van de achtergrond.

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

Zoals we zien, is alles weergegeven en gaan we verder met het beschrijven van stijlen.

Laten we allereerst alle inspringen opnieuw instellen, die verschillende browsers standaard kunnen instellen:

.dws-menu * {marge: 0; opvulling: 0; }

Stel de header in op 200 pieken. en toewijzen die u kunt downloaden en afzonderlijk verbinding kunt maken met uzelf op de site, voor het geval u extra lettertypen schrijft.

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

Verberg de markeringen in de lijsten:

.dws-menu ul, .dws-menu ol {lijststijl: geen; }

De lijsten worden horizontaal weergegeven met weergave: vlas, en we doen het in het midden:

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

In de header zullen we alleen de top laten inspringen, we zullen een margin-top schrijven.

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

Laten we ons menu ontwerpen, de kleur van de knoppen instellen, het lettertype, enz.

Selecteer links nav> ul li en laat ze elementen blokkeren. Stel de achtergrond van het menu in, voer inspringingen in, specificeer de grootte, kleur, verwijder het onderstrepingsteken en maak de koppen in hoofdletters.

.dws-menu> ul li a {display: block; achtergrond: #ececed; opvulling: 15px 30px 15px 40px; lettertypegrootte: 14px; kleur: # 454547; tekstdecoratie: geen; text-transform: hoofdletters; }

Plaats vervolgens de pictogrammen, wijs de lijsten toe aan positie: relatief; voor verdere uitlijning van pictogrammen:

.dws-menu> ul li {positie: relatief; }

Vervolgens selecteren we pictogrammen, plaatsen we ze absoluut, maken inspringen van bovenaf op 15 pieken, vanaf de linker 12 pieken, vergroten we de grootte tot 18 pieken.

.dws-menu> ul li> een i.fa {positie: absoluut; top: 15px; links: 12px; lettergrootte: 18px; }

Wijs het scheidingsteken toe in de vorm van een rand aan de lijsten, selecteer het eerste LI-element, stel de rand in. We selecteren het laatste element LI en wijzen het een vergelijkbare rand toe.

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

Scheidingstekens maken voor LI-lijsten:

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

Het menu heeft het uiterlijk gekregen en u kunt vervolgens naar de beschrijving van stijlen gaan tijdens de zweeftekst.

We animeren het horizontale menu terwijl we wijzen.

Selecteer koppelingen en wijs een kleur aan het blok toe en wijs de kleur van de koppeling zelf met het pictogram toe aan wit. Laten we nog een donkere schaduw toevoegen. Met de hulp van de overgang in 0,3 seconden zullen we een vlotte verschijning maken:

.dws-menu li a: hover {background: # 454547; kleur: #ffffff; vakschaduw: 1px 5px 10px -5px zwart; overgang: alle 0,3s gemak; }

En om dit effect soepel te laten verdwijnen, voeg je deze stijl op je gemak toe aan de link:

.dws-menu> ul li a {display: block; achtergrond: #ececed; opvulling: 15px 30px 15px 40px; lettertypegrootte: 14px; kleur: # 454547; tekstdecoratie: geen; text-transform: hoofdletters; overgang: alle 0,3s gemak; }

Het hoofdmenu is voltooid en u kunt verder gaan naar de beschrijving van het submenu en de daarin ingesloten submenu's.

Beschrijf het vervolgkeuzemenu CSS / HTML

Over ons openen we index.html en voegen we bijvoorbeeld een extra menu toe aan de producten. Plaats de UB tussen de LI-lijsten en plaats er vijf lijsten in, die links bevatten met het kenmerk herf = "#".

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

We drukken op om toe te passen, schrijven de naam van de items ( Kleding, Elektronica, Voedsel, Gereedschappen, Leven, Chemie ).

<ul> <li> <a href="#"> Kleding </a> </ li> <li> <a href="#"> Elektronica </a> </ li> <li> <a href = "#"> Eten </a> </ li> <li> <a href="#"> Tools </a> </ li> <li> <a href="#"> Life. chemie </a> </ li> </ ul>

Open vervolgens style.css en beschrijf de submenustijlen.

We selecteren de tweede lijst en wijzen deze positie toe: absoluut; , laten we de minimumbreedte instellen op 150 pieken.

/ * submenu * / .dws-menu li ul {positie: absoluut; minimale breedte: 150 px; }

Laten we naar de grenslijsten op 1 piek schrijven.

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

Voor de links in het submenu stellen we inspringingen in op 10 pieken., Verwijder de teksttransformatie en maak van de achtergrond een aantal tonen donkerder achtergrond: # e4e4e5; .

.dws-menu li> ul li a {opvulling: 10px; text-transform: none; achtergrond: # e4e4e5; }

Maak vervolgens een ander submenu. Ga naar het markup-bestand en bijvoorbeeld in het formulier "Elektronica" in het analogiemenu zoals we eerder deden. We beschrijven de titels van de items ( camera's, computers, telefoons ) en opslaan.

<li> <a href="#"> Elektronica </a> <ul> <li> <a href="#"> Camera's </a> </ li> <li> <a href="#"> Computers </a> </ li> <li> <a href="#"> Telefoons </a> </ li> </ ul> </ li>

Ze werden uitgebracht, maar verborgen onder het hoofdmenu, nu positie: absoluut; geneste UL en verplaats deze naar de 150 piek. aan de zijkant:

.dws-menu li> ul li ul {positie: absoluut; rechts: -150 px; boven: 0; }

Vervolgens zullen we het submenu weergeven wanneer we de hoofditems van het hoofdmenu targeten, hiervoor gebruiken we display: none; en daardoor alle interne punten verbergen.

/ * submenu * / .dws-menu li ul {positie: absoluut; minimale breedte: 150 px; display: geen; }

En voor hun uiterlijk zullen we de lijsten op zweeftekst selecteren en ze weergeven met behulp van display: block; .

.dws-menu li: hover> ul {display: block; }

Nu kunt u eenvoudig menu's met meerdere niveaus toevoegen door het UL-blok te kopiëren en de items ervan te wijzigen.

<ul> <li> <a href="#"> Startpagina </a> </ li> <li> <a href="#"> Producten </a> <ul> <li> <a href="#"> Kleding </a> <ul> <li> <a href = "#"> Schoenen </a> </ li> <li> <a href="#"> Jacks </a> </ li> <li> <a href="#"> Broeken </a> < / li> </ ul> </ li> <li> <a href="#"> Elektronica </a> <ul> <li> <a href="#"> Camera's </a> </ li> <li> <a href="#"> Computers </a> </ li> <li> <a href="#"> Telefoons </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="#"> Eten </a> </ li> <li> <a href="#"> Tools </ h a> </ li> <li> <a href="#"> Gen. chemie </a> </ li> </ ul> </ li> <li> <a href="#"> Diensten </a> <ul > <li> <a href="#"> Service 1 </a> </ li> <li> <a href="#"> Service 2 </a> </ li> <li> <a href = "#"> Service 3 </a> </ li> </ ul> </ li> <li> <a href="#"> Nieuws </a> </ li> <li> <a href="#"> Contactpersonen </a> </ li> </ ul>

Laten we dan de knoppen met de knoppen afmaken. Ik gebruik, ik heb verschillende voorinstellingen gemaakt, je kunt er zelf een maken, in mijn geval kopieer ik deze code en plaats deze op de achtergrond die ik eerder heb geschreven.

.dws-menu> ul li a {display: block; / * Permalink - dit verloop: http://colorzilla.com/gradient-editor/#c9c9c9+0,f6f6f6+2,c4c5c7+98.757577+100;Custom+3 * / background: # c9c9c9 ; / * Oude browsers * / achtergrond: -moz-linear-gradient (boven, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * FF3.6-15 * / achtergrond: -webkit-lineaire gradiënt (boven, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * Chrome10-25, Safari5.1-6 * / achtergrond: lineair verloop (naar beneden, # 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 * / opvulling: 15px 30px 15px 40px; lettertypegrootte: 14px; kleur: # 454547; tekstdecoratie: geen; text-transform: hoofdletters; overgang: alle 0,3s gemak; } .dws-menu li a: hover {/ * Permalink - dit verloop: http://colorzilla.com/gradient-editor/#e0e1e5+0.454547+2.454547+98,e0e1e5+100 * / achtergrond: # e0e1e5; / * Oude browsers * / achtergrond: -moz-linear-gradient (boven, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * FF3.6-15 * / achtergrond: -webkit-lineaire gradiënt (boven, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * Chrome10-25, Safari5.1-6 * / achtergrond: lineair verloop (naar beneden, # 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; vakschaduw: 1px 5px 10px -5px zwart; overgang: alle 0,3s gemak; }

Indien u dit wenst, kan dit menu worden ontworpen voor de stijl die wij voor u op de site geschikt vinden, het volstaat om een kleur te genereren en deze in de code te vervangen. Het bleek een eenvoudig en tegelijkertijd mooi horizontaal menu, gemaakt in pure CSS.

Pure CSS / HTML drop-down menu

HTML horizontale menustructuur

We animeren het horizontale menu terwijl we wijzen.

Beschrijf het vervolgkeuzemenu CSS / HTML

Laat een reactie achter: