Hvordan gjøre nettstedet ditt responsivt og interaktivt med CSS og JavaScript

Å ha et nettsted som er både responsivt og interaktivt er et uskreven krav for hver nettstedseier. Fordelene ved å ha et interaktivt nettsted som tilpasser seg perfekt til enhver skjermstørrelse kan ikke overvurderes.

Du bør lage en personlig opplevelse for hver bruker som besøker nettstedet ditt, og med flere CSS-egenskaper og noen få JavaScript-funksjoner kan du gjøre nettopp det.

I denne opplæringsartikkelen lærer du hvordan du gjør HTML- og CSS-nettstedet ditt responsivt og interaktivt.

Gjør nettstedet ditt interaktivt

Når du bygger et nettsted, starter du ovenfra og ned. Derfor er det å gjøre nettstedet ditt interaktivt en prosess som også bør begynne på toppen. Ta dette porteføljenettstedet vi bygget som et eksempel. Den har en ren design, men den er ikke helt interaktiv.

Hvert menyelement endrer farge når du holder musepekeren over det, men hvordan vet du hvilken del av nettstedet du er på? Vel, det er to måter å gjøre det på – aktiver menyelementer med på rulle og ved trykk arrangementer.

Aktivering av et menyelement hver gang du ruller opp eller ned på et nettsted vil kreve bruk av en JavaScript-funksjon som du kan kalle "activeMenu". Denne funksjonen trenger tilgang til menyelementene i navigasjonslinjen, så vel som hver del av nettstedet. Heldigvis kan du oppnå dette ved å bruke querySelectorAll DOM-velger.

I prosjektkatalogen din må du opprette en ny JavaScript-fil og koble den til HTML-filen din ved å bruke følgende kodelinje:

I en manus tag, den src verdi er navnet på JavaScript-filen, som i eksempelet ovenfor er main.js.

Main.js-filen

// ved å bruke javascript for å aktivere menyelementet på rulle
const li = document.querySelectorAll(.links");
const sek = document.querySelectorAll("seksjon");
function activeMenu(){
la len=sek.lengde;
while(--len && window.scrollY + 97 < sek[len].offsetTop){}
li.forEach (ltx => ltx.classList.remove("active"));
li[len].classList.add("aktiv");
}
aktivMeny();
window.addEventListener("scroll", activeMenu);

De querySelectorAll velgeren i koden ovenfor henter alle menyelementene ved å bruke lenker klasse. Den tar også tak i alle delene av nettstedet ved å bruke seksjon stikkord. De aktiver Meny funksjonen tar deretter lengden av hver seksjon og fjerner eller legger til en "aktiv" variabel avhengig av en brukers rulleposisjon.

For at koden ovenfor skal fungere, må du oppdatere stilarket for porteføljenettstedet for å inkludere følgende kode i navbar-delen:

#navbar .menu li.active a{
farge: #fff;
}

Aktiverer menyelementer ved å klikke

 //bruke jquery for å aktivere menyelementet ved å klikke
$(document).on('click', 'li', function(){
$(this).addClass('active').siblings().removeClass('active')
})

Hvis du legger til koden ovenfor i JavaScript-filen din, aktiveres hver seksjon når en bruker klikker på det aktuelle menyelementet. Imidlertid bruker den jQuery (et JavaScript-bibliotek) som utfører denne oppgaven med en minimal mengde kode.

Et problem du kan støte på når du aktiverer hvert menyelement ved klikk, er at navigasjonslinjen vil dekke den øverste delen av hver seksjon. For å forhindre dette kan du ganske enkelt sette inn følgende kode i verktøydelen av stilarket:

seksjon{
scroll-margin-top: 4,5rem;
}

Koden ovenfor vil sikre at når du navigerer til hver seksjon ved å klikke, vil navigasjonslinjen forbli 4,5 rem over hver seksjon (eller 72 px). En annen kul funksjon å legge til nettstedet ditt er jevn rulling, som du kan oppnå med følgende CSS-kode:

html {
rulle-atferd: glatt;
}

Gjør hjemmesiden din interaktiv

På de fleste nettsteder vil en bruker se sin første knapp på navigasjonslinjen eller hjemmesiden. Bortsett fra å se ut som en oppfordring til handling, bør en knapp også være interaktiv. En flott måte å oppnå dette på er med CSS :sveve selector, som tildeler en ny tilstand til et element hver gang en brukers mus kjører over det.

På porteføljenettstedet har den eneste lenken på hjemmesiden btn klasse (som gir det utseendet som en knapp). Så for å gjøre denne knappen interaktiv, kan du ganske enkelt tilordne :sveve velgeren til btn klasse.

Bruke :hover-velgeren

 .btn: hover{
bakgrunn: #fff;
farge: blå;
kant: blått fast ;
kantradius: 5px;
}

Hvis du legger til koden ovenfor i verktøydelen av porteføljenettstedet, vil knappen gå fra en tilstand til en annen når du holder musepekeren over den.

En annen kul funksjon for hjemmesiden er en skriveanimasjon, som bruker typed.js (et jQuery-skrivende animasjonsskript).

Bruker typed.js

// jquery-skriving av tekstanimasjonsskript
var typed = new Typed(".typing", {
strings: ["Programvareutvikler"],
typeHastighet: 100,
tilbakehastighet: 60,
loop: sant
});

Etter at du har lagt til koden ovenfor i JavaScript-filen din, må du gjøre følgende endring i HTML-en:

Og jeg er en 

I koden ovenfor erstatter du "Software Developer"-teksten i den originale koden med "typing"-klassen, og lager skriveanimasjonen.

Gjøre andre deler av nettstedet ditt interaktive

Opprette en knappeverktøyklasse og bruke sveve selector sørger for at hver del av nettsiden din som har en knapp er interaktiv. CSS-overgangs- og transformasjonsegenskapene har også noen flotte animasjonsfunksjoner som du kan legge til på nettstedet ditt.

Hvis du har et galleri eller en bildedel på nettstedet ditt, kan du bruke de to egenskapene som er nevnt ovenfor for å lage en sveveeffekt på bildene dine. Å legge til følgende CSS-kode til bildene i prosjektdelen av porteføljenettstedet vil skape en transformasjonseffekt på bildene i delen:

.img-container img{
maks-bredde: 450px;
overgang: alle 0,3s ease-out;
markør: peker;
}
.img-container img: hover{
transform: skala (1,2);
}

Gjør nettstedet ditt responsivt

Når du oppretter et responsivt nettsted, er det fire forskjellige enhetstyper du må vurdere – stasjonære datamaskiner, bærbare datamaskiner, nettbrett og smarttelefoner. I tillegg har hver av disse enhetstypene også en rekke forskjellige skjermstørrelser, men å ha disse fire kategoriene er et godt sted å begynne.

I slekt: Hvordan bruke mediesøk i HTML og CSS for å lage responsive nettsteder

I sin nåværende tilstand vises porteføljenettstedet godt på stasjonære og bærbare datamaskiner. Så å gjøre den responsiv vil bety å lage en tilpasset layout for nettbrett og smarttelefoner.

Den beste måten å oppnå et responsivt design med CSS og HTML er gjennom mediespørringer. Du kan plassere en mediespørring i en CSS-fil eller HTML-en link stikkord. Den siste tilnærmingen letter skalerbarhet, og det er også metoden jeg skal demonstrere.

Du må opprette to ekstra CSS-filer. Den første CSS-filen vil lage layoutstrukturen for små bærbare datamaskiner og nettbrett i liggende modus. Den vil ha en maksimal bredde på 1100 piksler, som du ser i følgende lenketag:

Sette inn kodelinjen ovenfor i hode taggen til HTML-filen din (eller i dette tilfellet porteføljenettstedets fil) vil sikre at hver enhet med en skjermbredde på 1100 piksler og under vil bruke stylingen i widescreen.css fil.

Widescreen.css-filen

/* Hjem */
#navbar .container h1 a span{
display: ingen;
}
#home .home-content .text-3 span{
farge: #000000;
}
/* Portefølje */
.projects{
rettferdiggjøre-innhold: senter;
}
.prosjekt{
flex: 0;
}
/* Om */
.about-content{
flex-retning: kolonne;
}
/* Kontakt */
.contact-content{
flex-retning: kolonne;
}

Koden ovenfor vil produsere en responsiv layout på enheter med skjermstørrelser på 1100px og under, som du kan se i utdataene nedenfor:

Den andre CSS-filen vil lage layoutstrukturen for smarttelefoner og nettbrett i portrettmodus. Den vil ha en maksimal bredde på 760px, som du kan se i følgende lenketag:

Mobile.css-filen

/* Navbar */
#navbar .container h1 a span{
display: ingen;
}
#navbar .container .menu{
marg-venstre: 0rem;
}
#skinke-meny{
bredde: 35px;
høyde: 30px;
margin: 30px 0 20px 20px;
markør: peker;
}
#navbar .container .menu-wrap .menu{
display: ingen;
}
.bar{
høyde: 5px;
bredde: 100 %;
bakgrunnsfarge: #ffffff;
display: blokk;
kantradius: 5px;
overgang: 0,3s letthet;
}
#bar1{
transform: translateY(-4px);
}
#bar3{
transform: translateY(4px);
}
/* Hjem */
#hjem{
display: flex;
bakgrunn: url("/images/home.jpg") no-repeat center;
høyde: 100vh;
}
#home .container{
margin: 6rem 1rem 2rem 1rem;
polstring: 2rem;
}
#home .home-content .text-1{
skriftstørrelse: 20px;
margin: 1,2rem;
}
#home .home-content .text-2{
skriftstørrelse: 45px;
font-vekt: 500;
margin: 1rem;
}
#home .home-content .text-3{
skriftstørrelse: 22px;
margin: 1,2rem;
}
#home .home-content .text-3 span{
farge: #0000ff;
font-vekt: 600;
}
#home .container{
marg-venstre: 4,5rem;
}
/* Om */
#about .container{
polstring: 0;
}
/* Kontakt */
#kontakt .container{
polstring: 0;
}

Filen ovenfor vil produsere følgende responsive smarttelefonlayout:

Andre måter å lage responsive interaktive nettsteder på

Å vite hvordan du gjør nettstedet ditt responsivt og interaktivt ved å bruke CSS og HTML er en stor ferdighet å ha. Men dette er ikke de eneste metodene for å gjøre nettstedet ditt responsivt og interaktivt.

Mange frontend-rammeverk og til og med maler på tjenester som Joomla forenkler responsive interaktive design.

15 stilige Joomla-maler for responsive nettsteder

Ønsker du å lage et nettsted for din bedrift eller blogg? Prøv disse Joomla-malene.

Les Neste

Om forfatteren