• De afgelopen dagen zijn er meerdere fora waarop bestaande accounts worden overgenomen door spammers. De gebruikersnamen en wachtwoorden zijn via een hack of een lek via andere sites buitgemaakt. Via have i been pwned? kan je controleren of jouw gegeven ook zijn buitgemaakt. Wijzig bij twijfel jouw wachtwoord of schakel de twee-staps-verificatie in.

HTML navigatie menu op elke pagina

Status
Niet open voor verdere reacties.

IreneU

Nieuw lid
Lid geworden
4 mrt 2021
Berichten
2
Waarderingsscore
0
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?
 
Topic verplaatst. naar de goede plek.
 
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.
 
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.
 
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.
 
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
 
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.
 
<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.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan