HOE

Hoe naar huis

Menu's

Pictogrambalk Menupictogram Accordeon Tabbladen Verticale tabbladen Tabkoppen Tabbladen op volledige pagina Beweeg tabbladen Bovenste navigatie Responsieve Topnav Navigatiebalk met pictogrammen Zoekmenu Zoekbalk Vaste zijbalk Paginanavigatie Responsieve zijbalk Navigatie op volledig scherm Off-Canvas-menu Beweeg de Sidenav-knoppen Zijbalk met pictogrammen Horizontaal scrollmenu Verticaal menu Bodemnavigatie Responsieve bodemnavigatie Onderste rand navigatielinks Rechts uitgelijnde menulinks Gecentreerde menulink Menukoppelingen met gelijke breedte Vast menu Schuif de balk omlaag bij scrollen Verberg navigatiebalk op scrollen Navbar verkleinen bij scrollen Sticky Navbar Navigatiebalk op afbeelding Vervolgkeuzemenu's voor zweven Klik op vervolgkeuzelijsten Trapsgewijze vervolgkeuzelijst Vervolgkeuzelijst in Topnav Dropdown in Sidenav Vervolgkeuzelijst Resp Navbar Subnavigatiemenu Drop-up Mega-menu Mobiel menu Gordijnmenu Samengevouwen zijbalk Samengevouwen zijpaneel Paginering Paneermeel Knop groep Verticale knopgroep Sticky Social Bar Pil navigatie Responsieve koptekst

Afbeeldingen

Diavoorstelling Galerij met diavoorstelling Modale afbeeldingen Lichtbak Responsief afbeeldingsraster Afbeeldingsraster Tabblad Galerij Afbeeldingsoverlay vervagen Dia overlay afbeelding Afbeelding Overlay Zoom Titel afbeelding overlay Afbeeldingsoverlay-pictogram Afbeeldingseffecten Zwart-wit afbeelding Afbeeldingstekst Afbeeldingstekstblokken Transparante afbeeldingstekst Afbeelding op volledige pagina Formulier op afbeelding Heldenafbeelding Achtergrondafbeelding vervagen Wijzig Bg bij scrollen Afbeeldingen naast elkaar Afgeronde afbeeldingen Avatar-afbeeldingen Responsieve afbeeldingen Afbeeldingen centreren Miniaturen Rand rond afbeelding Ontmoet het team Kleverige afbeelding Een afbeelding spiegelen Schud een afbeelding Portfolio Galerij Portfolio met filtering Afbeelding zoomen Afbeelding vergrootglas Schuifregelaar voor beeldvergelijking favicon

Toetsen

Waarschuwingsknoppen Overzichtsknoppen Split-knoppen Geanimeerde knoppen Vervagende knoppen Knop op afbeelding Knoppen voor sociale media Lees meer Lees minder Knoppen laden Downloadknoppen Pil Knoppen Meldingsknop Pictogramknoppen Volgende/vorige knoppen Meer Knop in Nav Blokkeerknoppen Tekstknoppen Ronde Knoppen Scroll naar boven-knop

Formulieren

login formulier Aanmeldingsformulier Afrekenformulier Contact Formulier Sociaal inlogformulier Inschrijfformulier Formulier met pictogrammen Nieuwsbrief Gestapelde vorm Responsieve vorm Pop-upformulier Inline formulier Invoerveld wissen Nummerpijlen verbergen Tekst kopiëren naar klembord Geanimeerd zoeken Zoekknop Zoeken op volledig scherm Invoerveld in Navbar Inlogformulier in Navbar Aangepast selectievakje/radio Aangepaste selectie Tuimelschakelaar Vink selectievakje aan Caps Lock detecteren Triggerknop op Enter Wachtwoordvalidatie Toggle Zichtbaarheid wachtwoord Formulier met meerdere stappen Automatisch aanvullen Automatisch aanvullen uitschakelen Spellingcontrole uitschakelen Knop voor het uploaden van bestanden Lege invoervalidatie

Filters

Filterlijst Filtertabel Filterelementen Filter Dropdown Sorteer lijst Spell-tabel

Tafels

Zebra gestreepte tafel Middelste tafels Tafel over de volledige breedte Side-by-side tafels Responsieve tabellen Vergelijkingstabel

Meer

Video op volledig scherm Modale dozen Modaal verwijderen Tijdlijn Scroll-indicator: Voortgangsbalken Vaardigheidsbalk Bereikschuifregelaars Knopinfo Weergave-element zweven Pop-ups Opvouwbaar Kalender HTML bevat Te doen lijst Laders Sterrenclassificatie Gebruikersbeoordeling Overlay-effect Contactchips Kaarten Kaart omdraaien Profielkaart Productkaart Waarschuwingen Uitroepen Opmerkingen: Etiketten Cirkels Stijl HR Coupon Lijst groep Lijst zonder opsommingstekens Responsieve tekst Uitgesneden tekst Gloeiende tekst Vaste voettekst Kleverig element gelijke hoogte Clearfix Responsieve floats Snack bar Venster op volledig scherm Roltekening Vloeiend scrollen Verloop Bg Scroll Sticky Header Koptekst bij scrollen verkleinen Prijstabel Parallax Beeldverhouding Responsieve Iframes Wisselen van leuk/niet leuk Toggle Verbergen/Tonen Schakel donkere modus in Tekst wisselen Klasse wisselen Klasse toevoegen Klasse verwijderen Actieve klasse Boom zicht Eigenschap verwijderen Offline detectie Zoek verborgen element Webpagina omleiden Zoom zweven Flip Box Verticaal centreren Middelste knop in DIV Overgang bij zweven Pijlen vormen Download link Element op volledige hoogte Browservenster Aangepaste schuifbalk Verberg schuifbalk Schuifbalk tonen/dwingen Apparaat uiterlijk Bewerkbare rand Tijdelijke aanduiding kleur Tekst selectie kleur Kogelkleur Verticale lijn Verdelers Animeren van pictogrammen Afteltimer Schrijfmachine Binnenkort pagina Chatberichten Pop-up chatvenster Gesplitst scherm Getuigenissen Sectieteller Citaten Diavoorstelling Afsluitbare lijstitems Typische apparaatonderbrekingen Versleepbaar HTML-element JS-mediaquery's Syntaxis markeerstift JS Animaties JS-snaarlengte JS Machtsverheffen JS-standaardparameters Huidige URL ophalen Huidige schermgrootte ophalen Iframe-elementen ophalen

Website

Maak een gratis website Maak een website Een statische website maken Maak een website (W3.CSS) Een website maken (BS3) Maak een website (BS4) Maak een website (BS5) Een website maken en bekijken Een linkboom-website maken Maak een portfolio Maak een CV Maak een restaurantwebsite Maak een zakelijke website Maak een WebBook Center-website Contact Sectie Over pagina Grote kop Voorbeeldwebsite

Rooster

2-kolomsindeling 3-kolomsindeling 4-kolomsindeling Uitbreidend raster Lijstrasterweergave Gemengde kolomindeling Kolomkaarten Zig Zag-indeling Bloglay-out

Google

Google-kaarten Google-lettertypen Koppelingen van Google-lettertypen Google Analytics instellen

Converters

Gewicht omrekenen Temperatuur converteren Lengte converteren Converteer snelheid

Blog

Een baan als ontwikkelaar krijgen Word een front-end ontwikkelaar.

Hoe - Responsieve zijbalk


Leer hoe u een responsief zijnavigatiemenu maakt met CSS.



Een responsieve zijbalk maken

Stap 1) HTML toevoegen:

Voorbeeld

<!-- The sidebar -->
<div class="sidebar">
  <a class="active" href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
</div>

<!-- Page content -->
<div class="content">
  ..
</div>

Stap 2) CSS toevoegen:

Voorbeeld

/* The side navigation menu */
.sidebar {
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
  position: fixed;
  height: 100%;
  overflow: auto;
}

/* Sidebar links */
.sidebar a {
  display: block;
  color: black;
  padding: 16px;
  text-decoration: none;
}

/* Active/current link */
.sidebar a.active {
  background-color: #04AA6D;
  color: white;
}

/* Links on mouse-over */
.sidebar a:hover:not(.active) {
  background-color: #555;
  color: white;
}

/* Page content. The value of the margin-left property should match the value of the sidebar's width property */
div.content {
  margin-left: 200px;
  padding: 1px 16px;
  height: 1000px;
}

/* On screens that are less than 700px wide, make the sidebar into a topbar */
@media screen and (max-width: 700px) {
  .sidebar {
    width: 100%;
    height: auto;
    position: relative;
  }
  .sidebar a {float: left;}
  div.content {margin-left: 0;}
}

/* On screens that are less than 400px, display the bar vertically, instead of horizontally */
@media screen and (max-width: 400px) {
  .sidebar a {
    text-align: center;
    float: none;
  }
}

Tip: Ga naar onze CSS Navbar-zelfstudie voor meer informatie over navigatiebalken.

Ooit gehoord van W3Schools Spaces ? Hier kunt u uw website helemaal opnieuw maken of een sjabloon gebruiken en deze gratis hosten.

Ga gratis aan de slag

* geen kredietkaart nodig