Hoe een mooi mobiel menu te maken met het DIVI-thema - DeLaatbusiness

Hoe een mooi mobiel menu te maken met het DIVI-thema

5 min


109
6 gratis internet marketing ebooks, klik hier voor download

Mobiele menu’s zijn er in alle verschillende stijlen. Er zijn een verticaal schuifmenu, een vervolgkeuzemenu, een boommenu en andere. Het DIVI-thema heeft al ingebouwde mobiele menustijlen die u kunt gebruiken, maar die u kunt aanpassen voor een betere gebruikerservaring.

In deze zelfstudie maken we een geweldig menu dat eruitziet als app-pictogrammen op telefoons.

Aan de slag 
Standaard ziet het mobiele menu er als volgt uit:

standaard-mobiel-menu

We zullen een menu maken met een ontwerp als dit:

Instructies 
In deze tutorial gaan we de bovenstaande ontwerpen maken met CSS-stijlen. We hebben een fragment gemaakt dat u kunt kopiëren en in uw DIVI-websites kunt plakken. Best makkelijk!

STAP 1: Stel de koptekststijl Volledig scherm in op Customizer
1. Klik in WordPress Dashboard onder Vormgeving op Customizer. Selecteer Header en navigatie en vervolgens Header-indeling. Selecteer Volledig scherm onder Stijl koptekst. Sla dan op.

customizer-1
customizer-2
customizer-3

STAP 2: Font awesome integreren 
1. Klik op WordPress Dashboard onder Uiterlijk op DIVI Thema-opties. Plaats onder het tabblad Integratie deze code:

script defer = ”” src = ”https: // use.
fontawesome.com/releases/v5.0.9
/js/all.js "integriteit =" sha384-8iPTk2s / jMVj81dnzb / iFR2sdA7u06vHJyyLlAd4snFpCl / SnyUjRrbdJsw1pGIl "crossorigin =" anoniem ">

integratie


STAP 3: Voeg pictogrammen toe aan menunavigatie met behulp van afbeeldingsbestanden en geweldige pictogrammen voor lettertypen

U kunt voor elk item afbeeldingsbestanden of lettertypepictogrammen gebruiken. De onderstaande schermafbeelding toont de items waar ik afbeeldingsbestanden en geweldige pictogrammen voor lettertypen heb gebruikt.

menu

Hier zijn de codes:

Voor Font Awesome-pictogrammen

 en de menutitel

 
Voor afbeeldingsbestanden

 en de menutitel

STAP 4: Geef het traditionele menu weer op het bureaublad terwijl het nieuwe mobiele menu wordt weergegeven op kleinere schermformaten. 
Deze code is om het menu op volledig scherm uit te schakelen en de standaardnavigatie weer te geven op schermformaten met 980px en hoger.

.et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated {
ondoorzichtigheid: 1;
achtergrond: transparant;
}

.et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated ul # mobile_menu_slide {
opvulling: 0! belangrijk;
display: block! belangrijk;
}

.et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated ul # mobile_menu_slide li {
display: inline-blok;
}

.et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated ul # mobile_menu_slide li img, .et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated ul # mobile_menu_slide li i, ul .et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated # mobile_menu_slide li svg.svg-inline-bis {
Geen weergeven;
}

.et_slide_in_menu_container {
ondoorzichtigheid: 1! belangrijk;
}

.et_pb_fullscreen_nav_container {
ondoorzichtigheid: 1;
}

.et_pb_fullscreen_nav_container ul # mobile_menu_slide {
ondoorzichtigheid: 1! belangrijk;
zichtbaarheid: zichtbaar;
display: block! belangrijk;
text-align: right;
breedte: 100%;
padding-rechts: 22%;
hoogte: aanvankelijk;
padding-top: 9px;
}

.et_pb_fullscreen_nav_container ul # mobile_menu_slide li {
display: inline-blok;
}

.et_pb_fullscreen_nav_container ul # mobile_menu_slide li img, .et_pb_fullscreen_nav_container ul # mobile_menu_slide li i {
Geen weergeven;
}

.et_pb_fullscreen_nav_container ul # mobile_menu_slide li {
opvulling: 0 2%;
}

.et_pb_fullscreen_nav_container ul # mobile_menu_slide li a {
lettergrootte: 17px;
text-transform: hoofdletters;
}

span.mobile_menu_bar.et_pb_header_toggle.et_toggle_fullscreen_menu {
ondoorzichtigheid: 0;
}

div # page-container [style = ”padding-top: 96px; overflow-y: verborgen; margin-top: -43px; ”] {}

div # page-container [style = ”padding-top: 96px; overflow-y: verborgen; margin-top: -43px; ”] ul # mobile_menu_slide li a {
lettergrootte: 13px;
}

div # page-container [style = ”padding-top: 96px; overflow-y: verborgen; margin-top: -43px; ”] ul # mobile_menu_slide li {
margin-top: -15px;
}

div # page-container [style = ”padding-top: 96px; overflow-y: verborgen; margin-top: -43px; ”] ul # mobile_menu_slide {
margin-top: -14px;
}

Je hebt 2 opties: 
1. Plak het in aangepaste CSS-pagina 
2. Plak het op DIVI-thema-opties of CSS-stijl.

STAP 5: Geef het mobiele menu weer op tablets en mobiele apparaten (980px en lager).

@media-scherm en (max-breedte: 1190px) {
.et_pb_fullscreen_nav_container ul # mobile_menu_slide {
padding-rechts: 8%;
}
}

@mediascherm en (max-breedte: 980px) {
.et_header_style_fullscreen .et_pb_fullscreen_nav_container {
max-breedte: 499px;
marge: 0 auto;
}
header # main-header {
opvulling: 5px 0;
}
span.mobile_menu_bar.et_pb_header_toggle.et_toggle_fullscreen_menu {
ondoorzichtigheid: 1;
}
.et_pb_fullscreen_nav_container ul # mobile_menu_slide {
display: geen! belangrijk;
}
.et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated {
achtergrond: url ( https://say-eat.gocrayons.com/wp-content/uploads/2017/12/gallery-8.jpg )! belangrijk;
achtergrondherhaling: geen herhaling! belangrijk;
achtergrondgrootte: omslag! belangrijk;
opvulling-bodem: 72px;
}

.et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated: voor {
breedte: 100%;
hoogte: 100%;
positie: absoluut;
links: 0;
rechts: 0;
boven: 0;
inhoud: ";
achtergrond: rgba (0, 0, 0, 0.61);
}
.et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated ul # mobile_menu_slide {
display: table-cell! belangrijk;
positie: relatief;
breedte: auto;
hoogte: 100%;
opvulling: 0;
text-align: center;
verticaal uitlijnen: midden;
}
.et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated ul # mobile_menu_slide li {
display: blok;
breedte: 33,3%;
zweven: links;
padding-bottom: 6vh! belangrijk;
padding-right: 0! belangrijk;
}
.et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated ul # mobile_menu_slide li i: voor {
lettergrootte: 38px;
}

.et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated ul # mobile_menu_slide li img {
opvulling: 18px 19px! belangrijk;
}
.et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated ul # mobile_menu_slide li img, .et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated ul # mobile_menu_slide li i, ul .et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated # mobile_menu_slide li svg.svg-inline-bis {
display: blok;
achtergrond: # f66d41;
breedte: 75px;
hoogte: 75px;
opvulling: 18px 0;
grensradius: 15px;
margin-bottom: 24px;
}
.et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated {
-webkit-transitie: -webkit-transformatie 0.4s, ondoorzichtigheid 0.4s;
overgang: transformatie 0,4 s, dekking 0,4 s;
}
body # page-container .et_slide_in_menu_container {
transformeren: schaal (1);
-webkit-transitie: -webkit-transformatie 0.4s, ondoorzichtigheid 0.4s;
overgang: transformatie 0,4 s, dekking 0,4 s;
}
.et_header_style_fullscreen .et_slide_in_menu_container span.mobile_menu_bar.et_toggle_fullscreen_menu: voor {
rand: 1px solid # f66d41;
kleur: # f66d41;
grensradius: 50%;
opvulling: 6px;
}
.et_header_style_fullscreen .et_slide_in_menu_container span.mobile_menu_bar.et_toggle_fullscreen_menu {
bottom: 25px! belangrijk;
top: initial! important;
links: 0;
rechts: 0;
text-align: center;
}
}

@media-scherm en (max-breedte: 414px) {
.et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated ul # mobile_menu_slide li img, .et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated ul # mobile_menu_slide li i, ul .et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated # mobile_menu_slide li svg.svg-inline-bis {
display: blok;
achtergrond: # f66d41;
breedte: 60px;
hoogte: 60px;
opvulling: 14px 0;
grensradius: 15px;
margin-bottom: 24px;
marge: 0 auto 10px;
}
.et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated ul # mobile_menu_slide li img {
opvulling: 15px 16px! belangrijk;
}
}

Je hebt 2 opties: 
1. Plak het in aangepaste CSS-pagina 
2. Plak het op DIVI-thema-opties of CSS-stijl.


What's Your Reaction?

hate hate
0
hate
confused confused
0
confused
fail fail
0
fail
fun fun
0
fun
geeky geeky
0
geeky
love love
0
love
lol lol
0
lol
omg omg
0
omg
win win
0
win
Erwin@delaatbusiness.com
Dag, Hulp nodig met internet marketing of websites maken? neem dan contact op

0 Comments

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Open List
Submit your own item and vote up for the best submission
Ranked List
Upvote or downvote to decide the best list item
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format