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:
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.
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 ">
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.
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.
0 Comments