Inhoudsopgave
Maar het probleem is dat veel van die formulieren niet volledig compatibel zijn met sommige browsers als CSS3 wordt gebruikt om deze taak uit te voeren.
Dankzij Javascript kunnen we dit soort effecten en animaties veel beter compatibel maken met browsers en er dus de nodige ondersteuning aan geven.
In deze tutorial zullen we zien hoe je een volledig responsieve navigatiebalk kunt maken met behulp van de Javascript Responsive Nav-plug-in.
Deze plug-in is open source en we kunnen hem in elk project gebruiken, hij wordt geleverd met zijn stylesheet om hem aan te passen en hij is volledig afhankelijk van andere Javascript-bibliotheken zoals jQuery.
In de HTML hoeven we alleen een lijst te maken om het menu te gebruiken en het een identifier te geven om het te kunnen selecteren via het script dat vereist is door de plug-in.
We koppelen ook de Responsive Nav-plug-in en koppelen deze aan het document, dit kan worden gedownload van de officiële pagina of rechtstreeks op Github, we kunnen alleen het .js-bestand downloaden of als je wilt kun je het hele .zip-bestand downloaden, hiervoor tutorial Ik zal alleen het bestand responsive-nav.min.js gebruiken.
We maken een demo-website die we responsive.html noemen
Responsieve navigatie
- Begin
- Over
- Diensten
- Blog
- Contact
Lorem ipsum pijn zit amet, consectetuer adipiscing.
Wees egestas, ante et vulputate volutpat
Dan zullen we de css toevoegen in een styles.css-bestand met de volgende code:
lichaam {marge: 0; opvulling: 0; achtergrond: # 3d3d3d; font-familie: Arial, schreefloos; } img {max-breedte: 100%; } #content {achtergrondkleur: # E6E6FA; marge: 20px auto 0; opvulling: 20px; breedte: 80%; } #nav {achtergrondkleur: # 4C76AE; } #nav ul {marge: 0; opvulling: 0; breedte: 100%; weergave: blok; lijststijl: geen; } #nav ul li {breedte: 100%; weergave: blok; lijststijl: geen; } #nav ul li a {display: block; opvulling: 10px 9px; breedte: 100%; lettergrootte: 1.1em; lettergewicht: normaal; achtergrond: # 4c76ae; kleur: # cad7ea; tekstdecoratie: geen; } #nav ul li a: zweef {achtergrond: # 00567f; } .js #nav {clip: rect (0 0 0 0); max-hoogte: 0; positie: absoluut; weergave: blok; overloop verborgen; zoomen: 1; } # nav.geopend {max-hoogte: 9999px; } # nav-toggle {lettergrootte: 1.2em; lettergewicht: vet; opvulling: 3px 9px; marge-links: 15px; tekstdecoratie: geen; grens-radius: 3px; kleur: #fefefe; achtergrond: # 4c7ab6; marge-onder: 15px; }Tot hier zal het de algemene stylesheet zijn, nu zullen we een stylesheet maken die het menu zal aanpassen als het scherm wordt verkleind tot 640px of minder, hiervoor passen we enkele stijlen toe binnen de Media Queries-eigenschap van css3 die zullen worden toegepast op apparaten met een minimale resolutie van 640px. Als de resolutie hoger is, wordt de gedefinieerde algemene css gebruikt.
@mediascherm en (min-breedte: 640px) {.js #nav {positie: relatief; } .js # nav.closed {max-height: geen; } # nav-toggle {display: geen; } #nav ul li a {border-right: 1px solid # 5E88BF; weergave: blok; zweven: links; breedte: automatisch; achtergrond: geen; opvulling: 11px 15px; lettergewicht: normaal; tekstdecoratie: geen; kleur: # E6E6FA; } #nav ul li a: zweef {achtergrond: # 00567f; kleur: # cad7ea; } h1 {kleur: # 90b9a0; lettergrootte: 2.5em; tekst uitlijnen: midden; }}Vond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een positief punt te geven
