{"id":92267,"date":"2022-10-12T21:52:40","date_gmt":"2022-10-13T02:52:40","guid":{"rendered":"https:\/\/blogging-techies.com\/sw\/hur-du-gor-din-webbplats-responsiv-och-interaktiv-med-css-och-javascript\/"},"modified":"2022-10-12T21:52:40","modified_gmt":"2022-10-13T02:52:40","slug":"hur-du-gor-din-webbplats-responsiv-och-interaktiv-med-css-och-javascript","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/sw\/hur-du-gor-din-webbplats-responsiv-och-interaktiv-med-css-och-javascript\/","title":{"rendered":"Hur du g\u00f6r din webbplats responsiv och interaktiv med CSS och JavaScript"},"content":{"rendered":"
\n

Att ha en webbplats som \u00e4r b\u00e5de responsiv och interaktiv \u00e4r ett oskrivet krav f\u00f6r varje webbplats\u00e4gare. F\u00f6rdelarna med att ha en interaktiv webbplats som anpassar sig perfekt till alla sk\u00e4rmstorlekar kan inte \u00f6verskattas.<\/p>\n

Du b\u00f6r skapa en personlig upplevelse f\u00f6r varje anv\u00e4ndare som bes\u00f6ker din webbplats, och med flera CSS-egenskaper och n\u00e5gra JavaScript-funktioner kan du g\u00f6ra just det.<\/p>\n

I den h\u00e4r sj\u00e4lvstudieartikeln f\u00e5r du l\u00e4ra dig hur du g\u00f6r din HTML- och CSS-webbplats responsiv och interaktiv.<\/p>\n

<\/span> G\u00f6r din webbplats interaktiv<\/span><\/h2>\n

N\u00e4r du bygger en webbplats b\u00f6rjar du uppifr\u00e5n och ner. Att g\u00f6ra din webbplats interaktiv \u00e4r d\u00e4rf\u00f6r en process som ocks\u00e5 b\u00f6r b\u00f6rja p\u00e5 toppen. Ta denna portf\u00f6ljwebbplats som vi byggde som ett exempel. Den har en ren design men den \u00e4r inte helt interaktiv.<\/p>\n

Varje menyalternativ \u00e4ndrar f\u00e4rg n\u00e4r du h\u00e5ller muspekaren \u00f6ver det, men hur vet du vilken del av webbplatsen du \u00e4r p\u00e5? Tja, det finns tv\u00e5 s\u00e4tt att g\u00f6ra det \u2013 aktivera menyalternativ med oncroll <\/strong>och onclick <\/strong>evenemang.<\/p>\n

Aktivering av ett menyalternativ varje g\u00e5ng du rullar upp eller ner p\u00e5 en webbplats kr\u00e4ver anv\u00e4ndning av en JavaScript-funktion som du kan kalla \u201cactiveMenu\u201d. Den h\u00e4r funktionen kommer att beh\u00f6va tillg\u00e5ng till menyalternativen i navigeringsf\u00e4ltet, s\u00e5v\u00e4l som varje sektion av webbplatsen. Lyckligtvis kan du \u00e5stadkomma detta med hj\u00e4lp av querySelectorAll <\/strong>DOM-v\u00e4ljare.<\/p>\n

I din projektkatalog m\u00e5ste du skapa en ny JavaScript-fil och l\u00e4nka den till din HTML-fil med hj\u00e4lp av f\u00f6ljande kodrad:<\/p>\n

<script src=\"https:\/\/ipotek.net\/hur-du-gor-din-webbplats-responsiv-och-interaktiv-med-css-och-javascript\/main.js\"><\/script><\/pre>\n
I en manus<\/strong> taggen, den src<\/strong> v\u00e4rde \u00e4r namnet p\u00e5 JavaScript-filen, vilket i exemplet ovan \u00e4r main.js<\/strong>.<\/p>\n
<\/span>Main.js-filen<\/span><\/h3>\n
\/\/ using javascript to activate menu item onscrollconst li = document.querySelectorAll(\".links\");const sec = document.querySelectorAll(\"section\");
function activeMenu(){let len=sec.length;while(--len && window.scrollY + 97 < sec[len].offsetTop){}li.forEach(ltx => ltx.classList.remove(\"active\"));li[len].classList.add(\"active\");}activeMenu();window.addEventListener(\"scroll\", activeMenu);<\/p><\/pre>\n
De querySelectorAll<\/strong> v\u00e4ljaren i koden ovan tar tag i alla menyalternativ med hj\u00e4lp av l\u00e4nkar<\/strong> klass.  Den tar ocks\u00e5 tag i alla delar av webbplatsen med hj\u00e4lp av sektion<\/strong> m\u00e4rka.  De aktivera Meny<\/strong> funktionen tar sedan l\u00e4ngden p\u00e5 varje avsnitt och tar bort eller l\u00e4gger till en \u201caktiv\u201d variabel beroende p\u00e5 en anv\u00e4ndares rullningsposition.<\/p>\n
F\u00f6r att koden ovan ska fungera m\u00e5ste du uppdatera portf\u00f6ljwebbplatsens stilark f\u00f6r att inkludera f\u00f6ljande kod i navigeringsf\u00e4ltet:<\/p>\n
#navbar .menu li.active a{color: #fff;}<\/pre>\n
 \/\/using jquery to activate menu item onclick$(document).on('click', 'li', function(){$(this).addClass('active').siblings().removeClass('active')})<\/pre>\n
Om du l\u00e4gger till koden ovan i din JavaScript-fil aktiveras varje avsnitt n\u00e4r en anv\u00e4ndare klickar p\u00e5 l\u00e4mpligt menyalternativ.  D\u00e4remot anv\u00e4nder den jQuery (ett JavaScript-bibliotek) som utf\u00f6r denna uppgift med en minimal m\u00e4ngd kod.<\/p>\n
Ett problem som du kan st\u00f6ta p\u00e5 n\u00e4r du aktiverar varje menyalternativ vid klick \u00e4r att navigeringsf\u00e4ltet kommer att t\u00e4cka den \u00f6vre delen av varje avsnitt.  F\u00f6r att f\u00f6rhindra detta kan du helt enkelt infoga f\u00f6ljande kod i verktygsdelen av stilmallen:<\/p>\n
section{scroll-margin-top: 4.5rem;}<\/pre>\n
Koden ovan s\u00e4kerst\u00e4ller att n\u00e4r du navigerar till varje sektion genom att klicka, kommer navigeringsf\u00e4ltet att stanna 4,5 rem ovanf\u00f6r varje sektion (eller 72px).  En annan cool funktion att l\u00e4gga till p\u00e5 din webbplats \u00e4r smidig rullning<\/strong>, vilket du kan \u00e5stadkomma med f\u00f6ljande CSS-kod:<\/p>\n
html {scroll-behavior: smooth;}<\/pre>\n
<\/span>  G\u00f6r din hemsida interaktiv<\/span><\/h2>\n
P\u00e5 de flesta webbplatser kommer en anv\u00e4ndare att se sin f\u00f6rsta knapp i navigeringsf\u00e4ltet eller p\u00e5 startsidan.  F\u00f6rutom att se ut som en uppmaning b\u00f6r en knapp ocks\u00e5 vara interaktiv.  Ett bra s\u00e4tt att \u00e5stadkomma detta \u00e4r med CSS :sv\u00e4va <\/strong>selector, som tilldelar ett nytt tillst\u00e5nd till ett element varje g\u00e5ng en anv\u00e4ndares mus k\u00f6r \u00f6ver det.<\/p>\n
P\u00e5 portf\u00f6ljwebbplatsen har den enda l\u00e4nken p\u00e5 hemsidan btn<\/strong> klass (vilket ger det utseendet av en knapp).  S\u00e5 f\u00f6r att g\u00f6ra den h\u00e4r knappen interaktiv kan du helt enkelt tilldela den :sv\u00e4va<\/strong> v\u00e4ljare till btn<\/strong> klass.<\/p>\n
<\/span>Anv\u00e4nda :hoverv\u00e4ljaren<\/span><\/h3>\n
 .btn:hover{background: #fff;color:blue;border: blue solid ;border-radius: 5px;}<\/pre>\n
Om du l\u00e4gger till koden ovan i verktygssektionen p\u00e5 portf\u00f6ljwebbplatsen kommer knappen att \u00f6verg\u00e5 fr\u00e5n ett tillst\u00e5nd till ett annat n\u00e4r du h\u00e5ller muspekaren \u00f6ver den.<\/p>\n
En annan cool funktion f\u00f6r hemsidan \u00e4r en skrivanimation, som anv\u00e4nder typd.js <\/strong>(ett animationsskript f\u00f6r att skriva jQuery).<\/p>\n
<\/span>Anv\u00e4nder typd.js<\/span><\/h3>\n
\/\/ jquery typing text animation scriptvar typed = new Typed(\".typing\", {strings: [\"Software Developer\"],typeSpeed: 100,backSpeed: 60,loop: true});<\/pre>\n
N\u00e4r du har lagt till koden ovan i din JavaScript-fil m\u00e5ste du g\u00f6ra f\u00f6ljande \u00e4ndring av HTML:en:<\/p>\n
<div class=\"text-3\">And I'm a <span class=\"typing\"><\/span><\/div><\/pre>\n
I koden ovan ers\u00e4tter du \u201cSoftware Developer\u201d-texten i originalkoden med \u201ctyping\u201d-klassen, vilket skapar skrivanimationen.<\/p>\n
<\/span>  G\u00f6ra andra delar av din webbplats interaktiva<\/span><\/h2>\n
Skapa en knappverktygsklass och anv\u00e4nda sv\u00e4va<\/strong> selector ser till att varje avsnitt p\u00e5 din webbsida som har en knapp \u00e4r interaktivt.  CSS-\u00f6verg\u00e5ngs- och transformeringsegenskaperna har ocks\u00e5 n\u00e5gra fantastiska animeringsfunktioner som du kan l\u00e4gga till p\u00e5 din webbplats.<\/p>\n
Om du har ett galleri eller n\u00e5gon bildsektion p\u00e5 din webbplats kan du anv\u00e4nda de tv\u00e5 egenskaperna som n\u00e4mns ovan f\u00f6r att skapa en sv\u00e4vningseffekt p\u00e5 dina bilder.  Om du l\u00e4gger till f\u00f6ljande CSS-kod till bilderna i projektdelen av portf\u00f6ljwebbplatsen skapas en transformationseffekt p\u00e5 bilderna i avsnittet:<\/p>\n
.img-container img{max-width: 450px;transition: all 0.3s ease-out;cursor: pointer;}
.img-container img:hover{transform: scale(1.2);}<\/p><\/pre>\n
<\/span>  G\u00f6r din webbplats responsiv<\/span><\/h2>\n
N\u00e4r du skapar en responsiv webbplats finns det fyra olika enhetstyper som du m\u00e5ste t\u00e4nka p\u00e5 \u2013 station\u00e4ra datorer, b\u00e4rbara datorer, surfplattor och smartphones.  Dessutom har var och en av dessa enhetstyper ocks\u00e5 en rad olika sk\u00e4rmstorlekar, men att ha dessa fyra kategorier \u00e4r ett bra st\u00e4lle att b\u00f6rja.<\/p>\n
I sitt nuvarande tillst\u00e5nd visas portf\u00f6ljwebbplatsen bra p\u00e5 station\u00e4ra och b\u00e4rbara datorer.  S\u00e5 att g\u00f6ra den responsiv kommer att inneb\u00e4ra att skapa en anpassad layout f\u00f6r surfplattor och smartphones.<\/p>\n
Det b\u00e4sta s\u00e4ttet att uppn\u00e5 en responsiv design med CSS och HTML \u00e4r genom mediefr\u00e5gor.  Du kan placera en mediefr\u00e5ga i en CSS-fil eller HTML l\u00e4nk<\/strong> m\u00e4rka.  Det senare tillv\u00e4gag\u00e5ngss\u00e4ttet underl\u00e4ttar skalbarhet, och det \u00e4r ocks\u00e5 metoden som jag kommer att demonstrera.<\/p>\n
Du m\u00e5ste skapa ytterligare tv\u00e5 CSS-filer.  Den f\u00f6rsta CSS-filen kommer att skapa layoutstrukturen f\u00f6r sm\u00e5 b\u00e4rbara datorer och surfplattor i liggande l\u00e4ge.  Den kommer att ha en maximal bredd p\u00e5 1100px<\/strong>, som du ser i f\u00f6ljande l\u00e4nktagg:<\/p>\n
<link rel=\"stylesheet\" media=\"screen and (max-width: 1100px)\" href=\"https:\/\/ipotek.net\/hur-du-gor-din-webbplats-responsiv-och-interaktiv-med-css-och-javascript\/css\/widescreen.css\"><\/pre>\n
Infoga kodraden ovan inom huvud<\/strong> taggen f\u00f6r din HTML-fil (eller i det h\u00e4r fallet portf\u00f6ljwebbplatsfilen) kommer att s\u00e4kerst\u00e4lla att varje enhet med en sk\u00e4rmbredd p\u00e5 1100px <\/strong>och under kommer att anv\u00e4nda stylingen i widescreen.css<\/strong> fil.<\/p>\n
<\/span>Filen widescreen.css<\/span><\/h3>\n
\/* Home *\/#navbar .container h1 a span{display: none;}
#home .home-content .text-3 span{color: #000000;}<\/p>
\/* Portfolio *\/.projects{justify-content: center;}.project{flex: 0;}<\/p>
\/* About *\/.about-content{flex-direction: column;}<\/p>
\/* Contact *\/.contact-content{flex-direction: column;}<\/p><\/pre>\n
Koden ovan kommer att producera en responsiv layout p\u00e5 enheter med sk\u00e4rmstorlekar p\u00e5 1100px och mindre, som du kan se i utg\u00e5ngen nedan:<\/p>\n
\n<\/figure>\n
  Den andra CSS-filen kommer att skapa layoutstrukturen f\u00f6r smartphones och surfplattor i st\u00e5ende l\u00e4ge.  Den kommer att ha en maximal bredd p\u00e5 760px,<\/strong> som du kan se i f\u00f6ljande l\u00e4nktagg:<\/p>\n
<link rel=\"stylesheet\" media=\"screen and (max-width: 760px)\" href=\"https:\/\/ipotek.net\/hur-du-gor-din-webbplats-responsiv-och-interaktiv-med-css-och-javascript\/css\/mobile.css\"><\/pre>\n
<\/span>Filen mobile.css<\/span><\/h3>\n
\/* Navbar *\/
#navbar .container h1 a span{display: none;}<\/p>
#navbar .container .menu{margin-left: 0rem;}<\/p>
#ham-menu{width: 35px;height: 30px;margin: 30px 0 20px 20px;cursor: pointer;}#navbar .container .menu-wrap .menu{display: none;}<\/p>
.bar{height: 5px;width: 100%;background-color: #ffffff;display: block;border-radius: 5px;transition: 0.3s ease;}#bar1{transform: translateY(-4px);}#bar3{transform: translateY(4px);}<\/p>
\/* Home *\/#home{display: flex;background: url(\"\/images\/home.jpg\") no-repeat center;height: 100vh;}<\/p>
#home .container{margin: 6rem 1rem 2rem 1rem;padding: 2rem;}<\/p>
#home .home-content .text-1{font-size: 20px;margin: 1.2rem;}#home .home-content .text-2{font-size: 45px;font-weight: 500;margin: 1rem;}#home .home-content .text-3{font-size: 22px;margin: 1.2rem;}#home .home-content .text-3 span{color: #0000ff;font-weight: 600;}<\/p>
#home .container{margin-left: 4.5rem;}<\/p>
\/* About *\/#about .container{padding: 0;}<\/p>
\/* Contact *\/#contact .container{padding: 0;}<\/p><\/pre>\n
Filen ovan kommer att producera f\u00f6ljande responsiva smartphone-layout:<\/p>\n
\n<\/figure>\n
<\/span>  Andra s\u00e4tt att skapa responsiva interaktiva webbplatser<\/span><\/h2>\n
Att veta hur du g\u00f6r din webbplats responsiv och interaktiv med CSS och HTML \u00e4r en stor f\u00e4rdighet att ha.  Men det h\u00e4r \u00e4r inte de enda metoderna f\u00f6r att g\u00f6ra din webbplats responsiv och interaktiv.<\/p>\n
M\u00e5nga frontend-ramverk och till och med mallar p\u00e5 tj\u00e4nster som Joomla underl\u00e4ttar responsiv interaktiv design. <\/p>\n
    Om f\u00f6rfattaren<\/strong><\/p>\n
            Kadeisha Kean (39 artiklar publicerade)
<\/strong><\/p>\n
Kadeisha Kean \u00e4r en full-stack mjukvaruutvecklare och teknisk\/teknikskribent.  Hon har den distinkta f\u00f6rm\u00e5gan att f\u00f6renkla n\u00e5gra av de mest komplexa tekniska koncepten;  producera material som l\u00e4tt kan f\u00f6rst\u00e5s av alla nyb\u00f6rjare.  Hon brinner f\u00f6r att skriva, utveckla intressant programvara och att resa runt i v\u00e4rlden (genom dokument\u00e4rer).<\/p>\n
                            Mer fr\u00e5n Kadeisha Kean<\/p>\n
<\/span>Prenumerera p\u00e5 v\u00e5rt nyhetsbrev<\/span><\/h4>\n
G\u00e5 med i v\u00e5rt nyhetsbrev f\u00f6r tekniska tips, recensioner, free e-b\u00f6cker och exklusiva erbjudanden!<\/p>\n
Klicka h\u00e4r f\u00f6r att prenumerera<\/p>\n<\/p><\/div>\n  
\n
\n
Table of Contents<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n