• hjem
  •  > 
  • Mobile enheder
  •  > 
  • Pop-up sidemenu til mobil. Lav en glidende sidemenu ved hjælp af ren CSS

Pop-up sidemenu til mobil. Lav en glidende sidemenu ved hjælp af ren CSS

Vi fortsætter med at oprette en pop-out sidemenu ved klik, i den første del af lektionen oprettede vi HTML-markeringen, stiliserede alle vælgerne, nu er der kun tilbage at tilføje JS-dynamik.

Henvender sig til jQuery-biblioteket

$(".menu-ikon").on("klik", funktion(e) (

som vil finde en udtræksmenu med klassemenu og anvende toggleClass-metoden på menuen. ToggleClass-metoden tildeler og fjerner klasser fra et element.

$(".menu").toggleClass("menu_active");

Når du klikker på burgerikonet, vises en menu til venstre. Nu skal vi sørge for, at indholdet flytter sig væk og giver plads til menuen. For at gøre dette, lad os oprette en ny klasse section_active , som, når en hændelse opstår, flytter sektionen med indhold 25% til højre, ligesom menuen.

Sektion_aktiv(
transform: translateX(25%);
}

Lad os tilføje glathed til sektionsvælgeren - en overgang på et halvt sekund. For at sikre at sektionen ikke overlapper ikonet, vil vi sætte dens position - relativ , sektionen skal være på det nederste lag - z-index: 0 .

Sektion (
overgang: 0,5s;
stilling: relativ;
z-indeks: 0;
}

Træk menuen øverst i afsnittet ud

Menu (
z-indeks: 1;
}

Lad os gå tilbage til jQuery, som finder sektionselementet, og tildele det klassen section_active.

$("sektion").toggleClass("sektion_aktiv");
})

Så vi fik en fuldt responsiv menu, der fungerer godt på alle skærmopløsninger.

Al kode + resultat Glidemenu til højre For bedre at forstå lektionen, lad os se på, hvordan man laver en glidende menu til højre ved at klikke, flytte hovedindholdet til venstre. Situationen er helt anderledes; flere værdier i menuen kræver ændringer.

Menu (
venstre: 75%; /* i stedet for 0 */
transform: translateX(100%); /* i stedet for -100% */
}
og én værdi for afsnittet, når der klikkes på det

Sektion_aktiv(
transform: translateX(-25%); /* i stedet for 25 % */

I denne artikel vil jeg gerne give dig et eksempel på oprettelse af en pop op-menu. Dette slideout-menueksempel blev oprettet ved hjælp af CSS og jQuery.

Menuen vises øverst, når du klikker på "knappen" placeret i midten helt øverst.

Efter menuen er forladt, bliver hele det resterende område af siden utilgængeligt for valg med musen.

Ændring af hastigheden, hvormed menuen bevæger sig ned eller skjuler sig, er meget enkel; for at gøre dette skal du ændre værdierne for flere linjer i scriptet:

For at ændre menuens udgangshastighed skal du ændre den numeriske værdi i linjen:

SlideMenu.slideDown(300);

For at ændre hastigheden, hvormed menuen bevæger sig op, skal du ændre den numeriske værdi i linjen:

SlideMenu.slideUp(300);

Jo højere den numeriske værdi, desto langsommere vil effekten af ​​at flytte ud eller flytte i menuen være.

Vigtig! For at arbejde med dette eksempel på teksttransformation, glem ikke at inkludere jQuery-biblioteket.

Du kan se og downloade et demoeksempel ved at klikke på nedenstående links.

HTML
  • Menu 1
  • Menu 2
  • Menu 3
  • Menu 4
  • Menu 5
Udtræksmenu Klik

Skyttens revolvere overgik til Roland fra hans far, men da Roland viste sig at være større og kraftigere end ham, blev de specielt vægtet med metalplader.

Revolverne beskrives som enorme og tunge, med gule håndtag lavet af det fineste sandeltræ. Da Roland leder efter patroner til sit våben i New York ("Extraction of Three"), viser det sig, at han egner sig til patroner fra en .45 kaliber Winchester (oprindeligt fra en Long Colt af samme kaliber).

Til reference blev de første "universelle" .44-40 Winchester-patroner brugt i både Winchester Model 1873-håndtagsgeværet og Colt Peacemaker 1878-revolveren; Kamret til .45 Long Colt-patronen, Navy Arms, Rossi, Marlin og Winchester producerer Liver Action-rifler med en Henry-bøjle og et underløbsmagasin til moderne "cowboy"-skydning; den samme patron blev brugt i Peacemaker og Colt Single Action Hærens konverteringer.

CSS body ( border-top: 10px solid #ff725d; ) h1 ( margin: 90px 0 50px; color: #666; text-align: center; font-size: 50px; ) .content ( margin: 0 auto 20px; max- width: 680px; polstring: 0 3%; .content img ( width: 260px; højde: auto; border: solid 10px #fff; box-shadow: 0 1px 2px #999; float: left; margin: 0 3% 3 %; ) p (font-size: 110%; text-align: center; line-height: 1,5; margin: 0 0 15px; ) .slide_container (bredde: 100%; position: absolut; top: 0; z-index : 999; ) #menu ( polstring: 50px 0; border-bottom: solid 10px #ff725d; baggrund: #fff; display: ingen; ) #menu ul ( overløb: skjult; margin: 0 auto; polstring: 0; max- width: 800px; width: 100%; ) #menu li (float: venstre; polstring: 0; width: 20%; listestil: ingen; ) #menu li a (display: blok; margin: 0 5%; polstring : 20px 0; border: solid 1px #333; background: #fff; color: #666; text-align: center; text-decoration: none; font-size: 18px; ) #menu li a:hover (kant: solid 1px #12a1c6;farve: #12a1c6; ) #menu li a:active ( kant: fast 1px #0e7b97; farve: #0e7b97; ) #btn ( margin: 0 auto; bredde: 200px; højde: 30px; border-radius: 0 0 5px 5px; baggrund: #ff725d ; markør: pointer; ) #btn span (position: relativ; top: 12px; venstre: 50%; display: blok; margin-venstre: -25px; bredde: 50px; højde: 5px; kant-radius: 5px; baggrund: #fff; box-shadow: indsat 1px 1px 2px #ddd; ) .layer (position: fast; top: 0; width: 100%; højde: 100%; baggrundsfarve: #ff725d; -ms-filter: "progid :DXImageTransform.Microsoft.Alpha(opacitet=50)"; opacitet: 0,5; ) @medieskærm og (max-width: 480px) ( #menu (polstring: 5%; ) #menu li (bredde: 100%; ) # menu li a ( border-top: none; ) #menu li a:hover ( margin-top: -1px; ) #menu li:første-barn a ( border-top: solid 1px #333; ) #menu li:first -child a:hover ( margin-top: 0; border-top: solid 1px #12a1c6; ) ) JS $(function() ( var openBtn = $("#btn"), slideMenu = $("#menu") , lag = $("").addClass("lag"); openBtn.on("klik", funktion() (if (slideMenu.is(":skjult")) (lag.appendTo("body"); slideMenu.slideDown(300); ) else ( slideMenu.slideUp(300); layer.remove(); ) )); ));

I denne artikel vil jeg gerne give dig et eksempel på oprettelse af en pop op-menu. Dette slideout-menueksempel blev oprettet ved hjælp af CSS og jQuery. Menuen vises øverst, når du klikker på "knappen" placeret i midten helt øverst. Efter menuen er forladt, bliver hele det resterende område af siden utilgængeligt for valg med musen. Ændring af hastigheden, hvormed menuen bevæger sig ned eller skjules, er meget enkel; for at gøre dette skal du ændre værdierne for flere linjer i scriptet: For at ændre hastigheden, hvormed menuen bevæger sig ud, skal du ændre den numeriske værdi i linjen: For at ændre hastigheden, hvormed menuen bevæger sig op, skal du ændre den numeriske værdi i linjen: Jo større den numeriske værdi, desto langsommere vil effekten af ​​at forlade eller flytte i menuen være. Vigtig! At arbejde med data...

Så kort og tydeligt... Nedenfor er en måde at implementere en simpel glidende menu på. Koden er straks med kommentarer, så den er overskuelig. Her er DEMO. Pointen er, at vi klikker på ☰-ikonet, og en menu vises til venstre. Burgerikonet bliver til et kryds, som i Telegram :) Klik derefter på krydset og menuen flyttes til venstre. Alt er meget enkelt... Hvis det ønskes, er koden og stilene nemme at modernisere, ændre farver og størrelser. Hvis du også vil flytte menuen til højre side, skal du blot erstatte alle venstre med højre i stilene. Igen, i DEMO-sandkassen kan du eksperimentere. Fordelen ved sådan en menu er, at den kan implementeres i de fleste skabeloner.

Her er selve layoutet:












ENKEL UDTRÆKKE SIDEMENU

Næste CSS-stile:

/* kropsstile, alt er klart her */
krop (
margin: 0;
polstring: 0;
font-familie: Arial;
skriftstørrelse: 12pt;
baggrund: #f0f0f0;
}
/*stil menuen*/
.hidden-menu (
display: blok;
position: fast;
liste-stil: ingen;
polstring: 10px;
margin: 0;
box-sizing: border-box;
bredde: 200px;
baggrundsfarve: #2b343c;
højde: 100%;
top: 0;
venstre: -200px;
overgang: venstre.2s;
z-indeks: 2;


}
.hidden-menu li a (tekst-dekoration: ingen; farve:#cacaca;)
.hidden-menu li a:hover (farve:#fff;)
/*skjul indtastningsfeltet*/
.hidden-menu-ticker (
display: ingen;
}
/*generelle stilarter af hamburgerikonet, selve etiketten*/
.btn-menu (
farve: #fff;
baggrundsfarve: #fff;
polstring: 2px;
position: fast;
top: 5px;
venstre: 5px;
markør: pointer;
overgang: venstre .23s;
z-indeks: 3;
bredde: 20px;
-webkit-transform: translateZ(0);
-webkit-backface-synlighed: skjult;
}
/*generelle stribestile*/
.btn-menu span (
display: blok;
højde: 2px;
baggrundsfarve: #2b343c;
margen: 5px 0 0;
overgang: alle .1s lineære .23s;
stilling: relativ;
}
/*naglede den første stribe til toppen af ​​etiketten*/
.btn-menu span.first (
margin-top: 0;
}
/*når du klikker på burgeren, flytter vi den og giver en anden baggrund til burgeren*/
.hidden-menu-ticker:checked ~ .btn-menu (
venstre: 160px;
baggrundsfarve: #2b343c;
}
/*og derefter stilarter, der ændrer burgeren, flytte menuen efter begivenheden - ved at klikke på burgerikonet*/
.hidden-menu-ticker:checked ~ .hidden-menu (
venstre: 0;
}
.hidden-menu-ticker:checked ~ .btn-menu span.first (
-webkit-transform: rotere(45deg);
top: 7px;
baggrundsfarve: #fff;
}
.hidden-menu-ticker:checked ~ .btn-menu span.second (
opacitet: 0;
}
.hidden-menu-ticker:checked ~ .btn-menu span.third (
-webkit-transform: rotere(-45deg);
top: -7px;
baggrundsfarve: #fff;
}
/*tja, her er stilen på titlen, den ville have været smukkere :)*/
header (
baggrundsfarve: #fff;
farve: #2487ca;
tekst-align: center;
polstring: 5px;
}
h1 (
margin: 0;
polstring: 0;
skriftstørrelse: 17px;
font-weight: normal;
}

Hvis du har spørgsmål, så spørg i kommentarerne. Del artiklen på sociale medier. netværk. Tak 😉

I dette indlæg vil vi lave en fast sideinformationsmenu. For at implementere ikoner forbinder vi skrifttypen.

Trin 1. Forbind skrifttypen med ikoner, opret et tomt dokument

Du kan finde detaljerede oplysninger om at arbejde med FontAwesome-skrifttypen og et link til selve projektet i mit indlæg -.

Her er koden til siden med de vedhæftede filer:

Fast sidemenu

Trin 2: Tilføj HTML-markering til den faste menu

Her er opmærkningskoden til vores faste menu:

Som du har bemærket, brugte jeg et tag - dette er et html5 markup-element, hvis du bruger html4, kan du erstatte dette tag med et almindeligt eller fjerne det helt og flytte identifikatoren til listen, sådan her: