Navbar

Status
Niet open voor verdere reacties.

bigfoot47

Gebruiker
Lid geworden
21 mei 2008
Berichten
140
Hoi iedereen,

ik heb een navigatie bar gemaakt deze werkt perfect, juist 1 ding dat ik graag zou veranderen.
Nu moet ik deze als ik er iets bij plaats altijd elke pagina dat veranderen, maar hoe kan ik 1 pagina maken dat deze dan een link heeft in de andere pagina's.

Mvg Danny
www.dbphotography.be
 
Je bedoelt een centraal bestand waarin je op een enkele plek je navbar in plaatst?

Verdiep je eens in PHP. Dan kan je met de include-functie bestanden invoegen. Voor het gemak is het handig om deze bestanden in een andere map gescheiden te houden.
index.php
PHP:
<!DOCTYPE html>
<html>
<head>
<title>Welkom op mijn site</title>
</head>
<body>
<?php include "includes/menubar.php"; ?>
<h1>Welkom!</h1>
<p>Welkom op mijn site, hier staat veel informatie op dus kijk gerust rond.</p>
</body>
</html>
includes/menubar.php
Code:
<ul>
 <li>Nieuws</li>
 <li>Foto's</li>
 <li>Over mijzelf</li>
</ul>
Dit kan je ook voor footers doen die copyright bevatten etc...
PHP is een krachtig taaltje waar je veel meer mee kan doen.

PS: Rechtermuisknop-blokkades zijn zwaar annoying. Haal deze er gewoon uit, want je beperkt er een hoop mee.
 
Laatst bewerkt:
Ik wil 1 pagina en dat ik deze kan veranderen en dat hij deze dan zelf doet in de 20 andere.

dit is de code wat in blauw staat van mijn menubar


Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Gallery</title>
<!--[if IE]>
  <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="../css/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
</script>
<style type="text/css" media="screen">
@import url("../menubar/navigation.css");
</style>
<link href="../css/teksthome.css" rel="stylesheet" type="text/css">
<link href="../css/koptekst.css" rel="stylesheet" type="text/css">
<script language="JavaScript1.2" type="text/javascript" src="../banner home/mm_css_menu.js"></script>
</head>

<body>
<div class="container">
  <div class="header">
    <div align="left">
      <p> 
        <!--The following section is an HTML table which reassembles the sliced image in a browser.--> 
        <!--Copy the table section including the opening and closing table tags, and paste the data where--> 
        <!--you want the reassembled image to appear in the destination document. --> 
        <!--======================== BEGIN COPYING THE HTML HERE ==========================--><!--========================= STOP COPYING THE HTML HERE =========================--> 
        
        <!--The following section is an HTML table which reassembles the sliced image in a browser.--> 
        <!--Copy the table section including the opening and closing table tags, and paste the data where--> 
        <!--you want the reassembled image to appear in the destination document. --> 
        <!--======================== BEGIN COPYING THE HTML HERE ==========================--><!--========================= STOP COPYING THE HTML HERE =========================--> 
        <!--The following section is an HTML table which reassembles the sliced image in a browser.--> 
        <!--Copy the table section including the opening and closing table tags, and paste the data where--> 
        <!--you want the reassembled image to appear in the destination document. --> 
        <!--======================== BEGIN COPYING THE HTML HERE ==========================--><!--========================= STOP COPYING THE HTML HERE =========================--> 
        
        <!--The following section is an HTML table which reassembles the sliced image in a browser.--> 
        <!--Copy the table section including the opening and closing table tags, and paste the data where--> 
        <!--you want the reassembled image to appear in the destination document. --> 
        <!--======================== BEGIN COPYING THE HTML HERE ==========================--> 
        <!--======================== BEGIN COPYING THE HTML HERE ==========================--> 
        <!--======================== BEGIN COPYING THE HTML HERE ==========================--> 
        <!--======================== BEGIN COPYING THE HTML HERE ==========================--> 
        <!--The following section is an HTML table which reassembles the sliced image in a browser.--> 
        <!--Copy the table section including the opening and closing table tags, and paste the data where--> 
        <!--you want the reassembled image to appear in the destination document. --> 
        <!--======================== BEGIN COPYING THE HTML HERE ==========================--> 
        <!--The following section is an HTML table which reassembles the sliced image in a browser.--> 
        <!--Copy the table section including the opening and closing table tags, and paste the data where--> 
        <!--you want the reassembled image to appear in the destination document. --> 
        <!--======================== BEGIN COPYING THE HTML HERE ==========================--> 
        <!--======================== BEGIN COPYING THE HTML HERE ==========================--> 
        <!--======================== BEGIN COPYING THE HTML HERE ==========================--> 
        <img name="banneralbum_2" src="../Banner/banner%20album.gif" width="900" height="150" alt=""> 
        <!--========================= STOP COPYING THE HTML HERE =========================--> 
        <!--========================= STOP COPYING THE HTML HERE =========================--> 
        <!--========================= STOP COPYING THE HTML HERE =========================--> 
        <!--========================= STOP COPYING THE HTML HERE =========================--> 
        <!--========================= STOP COPYING THE HTML HERE =========================--> 
        <!--========================= STOP COPYING THE HTML HERE =========================--> 
        <!--========================= STOP COPYING THE HTML HERE =========================-->
      </p>
   [COLOR="#0000FF"] <div class="navbar" dir="rtl">
      <ul id="navmenu">
        <li><a href="../Home/home.html">Home</a></li>
        <li><a href="#">Shoots</a><span class="darrow">▼</span>
          <ul class="sub1">
            <li><a href="#">Model</a><span class="rarrow">▶</span>
            <ul class="sub2">
             <li><a href="../Anouchka & Samanta/Anouchka & Samanta.html">Anouchka & Samanta</a></li>
          </li></ul>
            <li><a href="#">Kinderen</a><span class="rarrow">▶</span>
            <ul class="sub2">
             <li><a href="../Lowik/Lowic.html">Lowik</a></li>
          </li></ul>
            <li><a href="#">Huwelijk</a><span class="rarrow">▶</span>
            <ul class="sub2">
             <li><a href="../Khatleen-Tom/Kathleen & Tom.html">Khatleen & Tom</a></li>
          </li></ul>
            <li><a href="#">Zwangerschap</a><span class="rarrow">▶</span>
            <ul class="sub2">
             <li><a href="../Katty & Peter/Katty & Peter.html">Katty & Peter</a></li>        
        </ul></li></ul>
        <li><a href="#">Natuur</a><span class="darrow">▼</span>
          <ul class="sub1">
            <li><a href="../Paddenstoelen/Paddenstoellen.html">Paddestoelen</a></li>
            <li><a href="../Watervallen ardennen/Watervallen Ardennen.html">Watervallen</a></li>
            <li><a href="#">Landschap</a><span class="rarrow">▶</span>
              <ul class="sub2">
                <li><a href="../Landschap/Landschap.html">Algemeen</a></li>
                <li><a href="../Landshap Maastricht/Landschap Maastricht.html">Maastricht</a></li>
              </ul>
            </li>
          </ul>
        <li><a href="#">Urbex</a><span class="darrow">▼</span>
          <ul class="sub1">
            <li><a href="#">2015</a><span class="rarrow">▶</span>
              <ul class="sub2">
                <li><a href="../Hasard de cheratte/cheratte1.html">Hasard de Cheratte</a></li>
                <li><a href="../Fort la Chartreuse/Fort la chartreuse.html">Fort La Chartreuse</a></li>
                <li><a href="../Piscine de Mosque/Piscine de Mosque.html">Pisine de Mosque</a></li>
                <li><a href="../Labo G/Labo G.html">Labo G</a></li>
                <li><a href="../Val benoit/Val benoit.html">Val Bnoit</a></li>
              </ul>
            <li><a href="#">2016</a><span class="rarrow">▶</span>
              <ul class="sub2">
                <li><a href="../Villa Kakelbond/Villa Kakelbond.html">Villa Kakelbond</a></li>
                <li><a href="../Hotel du golf/Hotel du golf.html">Hôtel Du Golf</a></li>
                <li><a href="../Bowling Z/Bowling Z.html">Bowling Z</a></li>
                <li><a href="../chateau noisy/chateau noisy.html">Chateau Noisy</a></li>
                <li><a href="../Maison Felix/Maison Felix.html">Maison Felix</a></li>
                <li><a href="../Maison nick/Maison ..html">Maison ?</a></li>
                <li><a href="../Chateau Rochendaal/Chateau Rochendaal.html">Chateau Rochendaal</a></li>
                <li><a href="../Maison L'oiseau Bleu/Maison L'oiseau Bleu.html">Maison l'oiseau Bleu</a></li>
                <li><a href="../Rusthuis DN/Rusthuis DN.html">Rusthuis DN</a></li>
                <li><a href="../Bij fien/Bij fien1.html">Bij Fien</a></li>
                <li><a href="../Filature Impressionante/Filature Impressionante.html">Filature Impressionante</a></li>
                <li><a href="../Maison Viron/Maison Viron.html">Maison Viron</a></li>
                <li><a href="../Maison Dave/Maison Dave.html">Maison Dave</a></li>
                <li><a href="../H15/H15.html">H 15</a></li>
                <li><a href="../Orient express/Orient express.html">Orient express</a></li>
                <li><a href="../Maison Hox/Maison Hox.html">Maison Hox</a></li>
                <li><a href="../The Bridge/The bridge.html">The bridge</a></li>
                <li><a href="../Cemetery of the Insane/Cemetery of the Insane.html">Cemetery of the Insane</a></li>
                <li><a href="#">Farm Paternoster</a></li>
                <li><a href="#">Lost in the woods</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="Mailto:dbphotography47@gmail.com">Contact</a></li>
      </ul>
      </li>
      <p>&nbsp;</p>
      <p>&nbsp;</p>[/COLOR]
</div>
    </div>
</section>
<div class="tekst">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <p class="koptekst">Welkom op mijn webpagina!</p>
  <p class="koptekst">&nbsp;</p>
  <p> </p>
  <p>Op deze pagina wil ik jullie laten kennis maken met</p>
  <p>mijn hobby en passie voor fotografie.</p>
  <p>Ik ben  in 2007 begonnen met een spiegelreflex camera D60,</p>
  <p>na 2 jaar heb ik deze omgeruild voor een D7000.</p>
  <p>In 2014 ben ik gestart aan de cursus digitale fotografie en </p>
  <p>ik heb mijn vierde en laatste module afgewerkt in Juni 2016. </p>
  <p>Door deze cursus heb ik kennis gemaakt met de</p>
  <p>verschillende takken van de fotografie.</p>
  <p>Al mijn foto’s neem ik in RAW formaat, </p>
  <p>zodat ik ze digitaal kan ontwikkelen en mijn eigen stijl kan geven.</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  
</div>
<footer>
  <p>Copyright Danny Brughmans.</p>
</footer>
<footer>
  <p>All Rights Reserved.</p>
</footer>
</div>
<!-- Add jQuery library --> 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
<!-- Add fancyBox -->
<link rel="stylesheet" href="../Khatleen-Tom/source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="../Khatleen-Tom/source/jquery.fancybox.pack.js"></script> 
<script type="text/javascript">
	$(document).ready(function() {
		$(".fancybox").fancybox();
	});
</script> 

<!-- end .container -->
</div>
</body>
<br /> <!--Start Blocking the mouse (By MACRI)--><br /> <body oncontextmenu="return false;"><br /> <!--end blocking the mouse-->
</html>
 
Dan heb ik het goed begrepen, en kan je vast wel wat met mijn voorbeeld. :)
 
Maar ben niet thuis in php.

dus ik sla mijn navbar.htm op in navbar.php

dan geef ik op de ander pagina waar het menu moet komen jou regel in

<?php include "includes/menubar.php"; ?>
 
Dat klopt helemaal! Sla het bestand dan ook op als .php i.p.v. .html .
 
Als ik jou regel in geef waar normaal de menu stond geeft hij niets weer
 
- En de navbar staat wel in menubar.php in de map includes ?
- En het bestand met die php-code, heeft ook de .php bestandsextentie i.p.v. .html ?
- Roep je alles via een URL met http(s):// aan i.p.v. vanaf je eigen pc te openen?


Test anders eens of php werkt door een bestand aan te maken met:
test.php
Code:
<?php
phpinfo();
?>

Let er dus op dat je alles via een URL opent!
 
Laatst bewerkt:
heb een map includes gemaakt en deze staat er in kan het jij zijn omdat de menu bar nog in een div id staat
 
Hoe open je de pagina? Zie mijn vorige post....
 
als ik deze open in browser menubar.php gaat hij open en gaan zelfs de links enkel als ik de koppeling plaats in mijn code werkt het niet en heb het geplaatst waar de andere regels stonden.
Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Gallery</title>
<!--[if IE]>
  <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="../css/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
</script>
<style type="text/css" media="screen">
@import url("../menubar/navigation.css");
</style>
<link href="../css/teksthome.css" rel="stylesheet" type="text/css">
<link href="../css/koptekst.css" rel="stylesheet" type="text/css">
<script language="JavaScript1.2" type="text/javascript" src="../banner home/mm_css_menu.js"></script>
</head>

<body>
<div class="container">
  <div class="header">
    <div align="center">
      <p> 
        <!--The following section is an HTML table which reassembles the sliced image in a browser.--> 
        <!--Copy the table section including the opening and closing table tags, and paste the data where--> 
        <!--you want the reassembled image to appear in the destination document. --> 
        <!--======================== BEGIN COPYING THE HTML HERE ==========================--><!--========================= STOP COPYING THE HTML HERE =========================--> 
        
        <!--The following section is an HTML table which reassembles the sliced image in a browser.--> 
        <!--Copy the table section including the opening and closing table tags, and paste the data where--> 
        <!--you want the reassembled image to appear in the destination document. --> 
        <!--======================== BEGIN COPYING THE HTML HERE ==========================--><!--========================= STOP COPYING THE HTML HERE =========================--> 
        <!--The following section is an HTML table which reassembles the sliced image in a browser.--> 
        <!--Copy the table section including the opening and closing table tags, and paste the data where--> 
        <!--you want the reassembled image to appear in the destination document. --> 
        <!--======================== BEGIN COPYING THE HTML HERE ==========================--><!--========================= STOP COPYING THE HTML HERE =========================--> 
        
        <!--The following section is an HTML table which reassembles the sliced image in a browser.--> 
        <!--Copy the table section including the opening and closing table tags, and paste the data where--> 
        <!--you want the reassembled image to appear in the destination document. --> 
        <!--======================== BEGIN COPYING THE HTML HERE ==========================--> 
        <!--======================== BEGIN COPYING THE HTML HERE ==========================--> 
        <!--======================== BEGIN COPYING THE HTML HERE ==========================--> 
        <!--======================== BEGIN COPYING THE HTML HERE ==========================--> 
        <!--The following section is an HTML table which reassembles the sliced image in a browser.--> 
        <!--Copy the table section including the opening and closing table tags, and paste the data where--> 
        <!--you want the reassembled image to appear in the destination document. --> 
        <!--======================== BEGIN COPYING THE HTML HERE ==========================--> 
        <!--The following section is an HTML table which reassembles the sliced image in a browser.--> 
        <!--Copy the table section including the opening and closing table tags, and paste the data where--> 
        <!--you want the reassembled image to appear in the destination document. --> 
        <!--======================== BEGIN COPYING THE HTML HERE ==========================--> 
        <!--======================== BEGIN COPYING THE HTML HERE ==========================--> 
        <!--======================== BEGIN COPYING THE HTML HERE ==========================--> 
        <img name="banneralbum_2" src="../Banner/banner%20album.gif" width="900" height="150" alt=""> 
        <!--========================= STOP COPYING THE HTML HERE =========================--> 
        <!--========================= STOP COPYING THE HTML HERE =========================--> 
        <!--========================= STOP COPYING THE HTML HERE =========================--> 
        <!--========================= STOP COPYING THE HTML HERE =========================--> 
        <!--========================= STOP COPYING THE HTML HERE =========================--> 
        <!--========================= STOP COPYING THE HTML HERE =========================--> 
        <!--========================= STOP COPYING THE HTML HERE =========================-->
      </p>
    
<?php include "includes/menubar.php"; ?>
    
 
</section>
<div class="tekst">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <p class="koptekst">Welkom op mijn webpagina!</p>
  <p class="koptekst">&nbsp;</p>
  <p> </p>
  <p>Op deze pagina wil ik jullie laten kennis maken met</p>
  <p>mijn hobby en passie voor fotografie.</p>
  <p>Ik ben  in 2007 begonnen met een spiegelreflex camera D60,</p>
  <p>na 2 jaar heb ik deze omgeruild voor een D7000.</p>
  <p>In 2014 ben ik gestart aan de cursus digitale fotografie en </p>
  <p>ik heb mijn vierde en laatste module afgewerkt in Juni 2016. </p>
  <p>Door deze cursus heb ik kennis gemaakt met de</p>
  <p>verschillende takken van de fotografie.</p>
  <p>Al mijn foto’s neem ik in RAW formaat, </p>
  <p>zodat ik ze digitaal kan ontwikkelen en mijn eigen stijl kan geven.</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  
</div>
<footer>
  <p>Copyright Danny Brughmans.</p>
</footer>
<footer>
  <p>All Rights Reserved.</p>
</footer>
</div>
<!-- Add jQuery library --> 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
<!-- Add fancyBox -->
<link rel="stylesheet" href="../Khatleen-Tom/source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="../Khatleen-Tom/source/jquery.fancybox.pack.js"></script> 
<script type="text/javascript">
	$(document).ready(function() {
		$(".fancybox").fancybox();
	});
</script> 

<!-- end .container -->
</div>
</body>
<br /> <!--Start Blocking the mouse (By MACRI)--><br /> <body oncontextmenu="return false;"><br /> <!--end blocking the mouse-->
</html>
 
Hoe open je de pagina?
Vertel graag stapsgewijs wat je doet, waar je op klikt en wat je typt. Want nu is het gissen.

Screenshots zijn ook niet overbodig. ;)
 
Laatst bewerkt:
Als je nu nog die include op je begin-pagina en de andere pagina's zet. Dan werkt het! Het bekijken via Dreamweaver zelf gaat denk ik niet lukken . Dreamweaver kan volgens mij geen PHP uitvoeren.
 
mijn sartpagina is home.html daar heb ik het in geplaatst moet ik de map includes ook in die map plaatsen
 
mijn sartpagina is home.html daar heb ik het in geplaatst

Lees nog eens ☺

- En het bestand met die php-code, heeft ook de .php bestandsextentie i.p.v. .html ?

Verder moet de map 'includes' wel bestaan. Met ../ kan je een mapje hogerop komen in je directorystructuur

Trouwens.. waarom laat je bezoekers niet direct je pagina zien op een index.php bestand, zonder die landingspage met ENTER?
Veel vriendelijker ;)
 
Laatst bewerkt:
ik heb een map includes met daar in menubar.php in de map home startpagina met tekst staat home.php
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan