Vraag HTML navigatie menu op elke pagina

IreneU

Nieuw lid
Lid geworden
4 mrt 2021
Berichten
2
Waarderingsscore
0
Punten
1
Leeftijd
35
Hallo!
Ik ben bezig om een website te maken in dreamweaver, dus HTML. Dit gaat best goed alleen ik heb 1 vraag.
Moet ik op elke pagina opnieuw mijn navigatiemenu plakken? Of kan ik dit in een CSS bestand bijvoegen en naar verwijzen in de HTML?
Ik dacht dat het met deze code kon maar dat lukt niet. <link rel="stylesheet" href="css/menu.css" type="text/css" media="all"/
(uiteraard heb ik een menu.css bestand gemaakt, maar wellicht klopt deze niet?)

@charset "utf-8";
/* Navigatie */
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Titel website</title>
</head>
<body class="home page page-template page-template-template-portfolio page-template-template-portfolio-php">
<div id="page">
<div class="container">
<header id="masthead" class="site-header">
<div class="site-branding">
<h1 class="site-title"><a href="index.html" rel="home"><img src="afbeeldingen/logo.JPG" alt="" width="50%"/></a></h1>
</div>
<nav id="site-navigation" class="main-navigation">
<button class="menu-toggle">Menu</button>
<a class="skip-link screen-reader-text" href="#content">Skip to content</a>
<div class="menu-menu-1-container">
<ul id="menu-menu-1" class="menu">
<li><a href="1.html">1</a>
<li><a href="2.html">2</a></li>
<li><a href="3">3</a></li>
</ul>
</div>
</nav>


Wat doe ik fout?
 

Aarie25

Moderator
Forumleiding
Lid geworden
12 apr 2013
Berichten
22.677
Waarderingsscore
751
Punten
113
Leeftijd
40
Topic verplaatst. naar de goede plek.
 

maulem

Vaak hier
Lid geworden
23 feb 2017
Berichten
568
Waarderingsscore
22
Punten
18
CSS is niet hetzelfde als HTML. HTML is puur structuurcode, d.w.z. waar in de pagina komt wat. Je kunt in de HTML wel verwijzen naar CSS classes of id's. In jouw bijgevoegde code staat bijvoorbeeld:

<ul id="menu-menu-1" class="menu">

Hier zie je dat de HTML voor de unordered list <ul></ul> wordt aangevuld met verwijzingen naar de CSS selectors menu-menu-1 (een id) en menu (een class). Het CSS-bestand bevat opmaakcode voor elk van de selectors. In het CSS-bestand kun je dus alleen stijlregels terugvinden die de styling regelen van elementen in de HTML.

Dat betekent dat je de HTML van het navigatiemenu dient op te nemen (plakken) in elke HTML-pagina die je aanmaakt.

Ook zul je in elk van de HTML-pagina's een verwijzing moeten opnemen naar het .css-bestand. Zet de volledige tekst van de .css hier eens neer.
 

IreneU

Nieuw lid
Lid geworden
4 mrt 2021
Berichten
2
Waarderingsscore
0
Punten
1
Leeftijd
35
Maulem, bedankt voor je antwoord. Je zegt "Dat betekent dat je de HTML van het navigatiemenu dient op te nemen (plakken) in elke HTML-pagina die je aanmaakt."
Is dat normaal? Pak elke willekeurige site, hebben zij dat dan ook in elke pagina weer geplakt?

Ik wil steeds nieuwe pagina's toevoegen aan mijn site, moet ik dan op elke pagina elke keer weer de nieuwste pagina toevoegen? Ik vind dat zoveel gedoe en kan me niet voorstellen dat dat standaard is.

NB. bovenstaande menu css heb ik zelf in elkaar geflanst. Ik heb een template gekocht waarin wel een style.css zit maar ik kan daarin dus het antwoord op mijn vraag niet vinden.
 

maulem

Vaak hier
Lid geworden
23 feb 2017
Berichten
568
Waarderingsscore
22
Punten
18
Ik vind dat zoveel gedoe en kan me niet voorstellen dat dat standaard is.

Het is inderdaad standaard. Er zijn wel mogelijkheden om dat via jquery (een soort javascript) te regelen. Dan zou je moeten denken aan een aparte nav.html pagina met daarin enkel de HTML van het menu, die je vervolgens in de pagina die je maakt, invoegt in een div. Dan krijg je dus zoiets:

<!--Navigation bar-->
<div id="nav-placeholder">

</div>

<script>
$(function(){
$("#nav-placeholder").load("nav.html");
});
</script>
<!--end of Navigation bar-->

Maar dat is geavanceerd, ik denk niet geschikt voor jou als beginner.

Ik dacht dat het met deze code kon maar dat lukt niet.

Als het even kan, zet hier op het forum de inhoud van de menu.css eens neer. Misschien kan ik ontdekken waar de fout zit.
 

hansiv

Junior lid
Lid geworden
1 jun 2014
Berichten
84
Waarderingsscore
2
Punten
8
Ik heb het probleem opgelost door de pagina's op mijn site de extentie .php te geven.
Daarnaast heb ik een apart menubestand dat ik met de regel <?php include 'XXXXmenu.php'; ?> invoeg op de gewenste pagina. Alle pagina's zijn gewoon opgebouwd met html. Een wijziging in het menu hoef ik maar éénmaal uit te voeren. Het menubestand is een gewone html file.

Zie verder www.maginot.nl
 

gouwepeer

geen apple
Lid geworden
3 apr 2010
Berichten
807
Waarderingsscore
37
Punten
28
Zoals @hansiv al aan gaf: php.
Een mooi voorbeeld: verdeel jouw site in 3 stukken.
- header (de bovenkant van jouw site)
- body (de content van de pagina
- footer (de onderkant van jouw site

De eerste pagina is doorgaans de index.html pagina. Indien je deze hebt dien je die te verwijderen of een andere naam te geven zodat daarna naar index.php gezocht zal worden (uitleg onderaan in dit bericht).
Maak nu het bestand index.php aan:
PHP:
<?php
include 'header.html';
include 'home.html';
include 'footer.html';
?>
Dit script gaat nu van de bestanden header.html home.html en footer.html 1 pagina samenstellen.
Voor de 2e pagina kan je dan zoiets aanmaken:
PHP:
<?php
include 'header.html';
include 'pagina2.html';
include 'footer.html';
?>
Je ziet dat de header en de footer bij beide pagina's hetzelfde blijven en dat alleen de content per pagina anders is. In de header kan je ook css invoegen en uiteraard de navigatie menu.
De footer is de ideale plek om scripts in te voegen.
Een ideale site om html, css en js uit te proberen is W3Schools.

Zodra je een domeinnaam in typt, bijvoorbeeld mijnsite.nl, zal er eerst gezocht worden naar de pagina index.html. Als die pagina niet bestaat zal index.php worden gezocht. Indien index.php de homepage moet worden is het onverstandig om index.html aan te maken.
 

gouwepeer

geen apple
Lid geworden
3 apr 2010
Berichten
807
Waarderingsscore
37
Punten
28
<link rel="stylesheet" href="css/menu.css" type="text/css" media="all"/
Een stylesheet is puur voor de vormgeving, bijvoorbeeld de positie van een afbeelding, responsive uiterlijk (past zich aan aan het formaat van het scherm), achtergrondkleur, en al het overige wat je kan bedenken.
Het menu zelf is puur html.
 

Nieuwste berichten

Bovenaan Onderaan