Toon posts:

[CSS] Dropdwon menu verplaatsen

Pagina: 1
Acties:
  • 265 views

Onderwerpen

Vraag


  • MarcVanBeek
  • Registratie: Maart 2021
  • Laatst online: 02-06-2021
Mijn vraag

Ik moet voor school een HTML pagina met CSS maken. Daarop moet een dropdown menu aanwezig zijn onder aan de pagina. Het maken van een dropdownmenu lukt mij wel (zie code) maar hoe geef ik het menu een andere plaats op de pagina (bijvoorbeeld onderaan de pagina).

Kan iemand mij helpen ? alvast bedanken

Relevante software en hardware die ik gebruik
...

Wat ik al gevonden of geprobeerd heb

dit is mijn test code:

<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}

.dropdown {
position: relative;
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
display: block;
}

.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
<body>

<h2>Mijn Test Pagina</h2>
<p>Druk op de button om het menu te openen.</p>

<div class="dropdown">
<button class="dropbtn">Mijn drop down menu</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>

</body>
</html>

Alle reacties


  • Belindo
  • Registratie: December 2012
  • Laatst online: 19:37

Belindo

▶ ─🔘─────── 15:02

Speltip 1: Zet je code tussen code tags, dat maakt het een stuk leesbaarder
Speltip 2: Wat heb je zelf geprobeerd/gezocht/gedaan
Speltip 3: Is het niet de bedoeling dat je deze opdracht zélf maakt?

Verder heb je niks om te positioneren. Je div met dropdown staat simpelweg ónder al je content, dus komt de dropdown onderaan te staan.

Je zult meerdere divs moeten gebruiken. Bijvoorbeeld voor je maincontent, dan je inleiding tekst, en dan je dropdown. Dan kun je die divs allemaal op een andere manier positioneren.

Coding in the cold; <brrrrr />


  • Oon
  • Registratie: Juni 2019
  • Niet online
Toevoeging op wat @Belindo aangeeft:

Een dropdown op basis van hover werkt alleen wanneer de trigger in de buurt staat, als je menu onderaan de pagina verschijnt en je knop bovenaan de pagina staat dan win je er niks mee.
Het is ook vreemd dat je een <button> gebruikt maar op hover checkt. Puur HTML/CSS heb je namelijk die button helemaal niet nodig, dat kan dan net zo goed een <a> of <span> zijn.

Gezien het simpele voorbeeld kun je ook een linkje naar een snippet op CodePen of JSFiddle toevoegen, dan kunnen wij meteen precies zien wat je nu al hebt en wat er nog fout gaat.

  • RobIII
  • Registratie: December 2001
  • Laatst online: 12:30

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Met wat hierboven gezegd is moet je al een heel eind komen maar ik wil je verzoeken een volgende keer onze Quickstart te hanteren wanneer je een topic opent. Ook zien we graag dat je code tags gebruikt wanneer je code post :)

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Roses are red Violets are blue, Unexpected ‘{‘ on line 32.

Over mij


Dit topic is gesloten.



Nintendo Switch (OLED model) Apple iPhone SE (2022) LG G1 Google Pixel 6 Call of Duty: Vanguard Samsung Galaxy S22 Garmin fēnix 7 Nintendo Switch Lite

Tweakers vormt samen met Hardware Info, AutoTrack, Gaspedaal.nl, Nationale Vacaturebank, Intermediair en Independer DPG Online Services B.V.
Alle rechten voorbehouden © 1998 - 2022 Hosting door True

Tweakers maakt gebruik van cookies

Tweakers plaatst functionele en analytische cookies voor het functioneren van de website en het verbeteren van de website-ervaring. Deze cookies zijn noodzakelijk. Om op Tweakers relevantere advertenties te tonen en om ingesloten content van derden te tonen (bijvoorbeeld video's), vragen we je toestemming. Via ingesloten content kunnen derde partijen diensten leveren en verbeteren, bezoekersstatistieken bijhouden, gepersonaliseerde content tonen, gerichte advertenties tonen en gebruikersprofielen opbouwen. Hiervoor worden apparaatgegevens, IP-adres, geolocatie en surfgedrag vastgelegd.

Meer informatie vind je in ons cookiebeleid.

Sluiten

Toestemming beheren

Hieronder kun je per doeleinde of partij toestemming geven of intrekken. Meer informatie vind je in ons cookiebeleid.

Functioneel en analytisch

Deze cookies zijn noodzakelijk voor het functioneren van de website en het verbeteren van de website-ervaring. Klik op het informatie-icoon voor meer informatie. Meer details

janee

    Relevantere advertenties

    Dit beperkt het aantal keer dat dezelfde advertentie getoond wordt (frequency capping) en maakt het mogelijk om binnen Tweakers contextuele advertenties te tonen op basis van pagina's die je hebt bezocht. Meer details

    Tweakers genereert een willekeurige unieke code als identifier. Deze data wordt niet gedeeld met adverteerders of andere derde partijen en je kunt niet buiten Tweakers gevolgd worden. Indien je bent ingelogd, wordt deze identifier gekoppeld aan je account. Indien je niet bent ingelogd, wordt deze identifier gekoppeld aan je sessie die maximaal 4 maanden actief blijft. Je kunt deze toestemming te allen tijde intrekken.

    Ingesloten content van derden

    Deze cookies kunnen door derde partijen geplaatst worden via ingesloten content. Klik op het informatie-icoon voor meer informatie over de verwerkingsdoeleinden. Meer details

    janee