[CSS] Menu maken als met frame

[Verwijderd]

Het kan zijn dat ik niet goed zoek, maar ik kan niet vinden hoe ik het volgende mbv CSS kan doen.

Ik wil graag een navigatiemenu maken die op elke pagina terug komt, en als ik iets in dit menu verander (zoals extra link), ik dit niet voor elke pagina apart hoeft te doen.

Bij het gebruik van frames zou dit menu dan bv de linkerkolom zijn, en voor elke pagina op de site hetzelfde zijn.

Ik heb gezocht op termen als: "CSS menu", "CSS alternative frame" etc, maar vond vooral zaken als een fixed position menu, maar niet wat ik zoek. Als iemand me kan verwijzen naar een site waar ik de oplossing voor mijn probleem kan vinden, of betere zoektermen weet, dan zou ik dit ook graag weten.

[djluc]

Normaal gesproken doe je dit met bijvoorbeeld een include in PHP. Een serverside taal dus.

[BtM909]

Als je dat op die manier wilt oplossen, dan zou ik eens kijken naar serverside mogelijkheden zoals SSI of een server side taal ala PHP. Je kan dan simpelweg een verwijzing maken naar een extern bestand die je menu behelst. Deze verwijzing moet dan wel op elke pagina voorkomen, maar je kan nu 1 file editten voor alle pagina's

[Verwijderd]

Mogelijkheden hiertoe zijn o.a. het gebruik van een frameset of iframe (embedded frame) of een javascript functie om je menu te tekenen, waarbij je een js file met de functie include bovenaan elke pagina.

edit: Of als je ervaring hebt met een taal als PHP kan dat natuurlijk ook, zoals hierboven wordt gesuggereerd.

[ Voor 22% gewijzigd door Verwijderd op 28-03-2006 15:57 ]

[Wim Leers]

Of een JS menu in ieder pagina includen gaat ook. CSS is beter weliswaar (ook weer afhankelijk van je vereisten, maar goed).
Kijk eens op milonic.com. Een site die dit gebruikt vind je hier. Je kunt natuurlijk ook een freeware oplossing gebruiken (hoewel je deze 'pro oplossing' ook gratis kunt gebruiken onder bepaalde voorwaarden).

[JHS]

Bashrat: CSS en JS is niet mutual exclusive? Je kan op zich best met JS de DOM aanpassen zodat er een menu in staat, en dat met CSS stylen. Ik zou dit echter toch afraden omdat je volledig het gebruik van je website afhankelijk maakt van javascript .

[djluc]

Het kan allemaal anders, leuker etcetera maar met een heel simpel stukje php kan het:

PHP:

<?PHP
//met 1 centrale pagina: http://index.php?page=home
$pages=array(
  'home' => 'home.php',
  'p2' => 'p2.php',
);

if(isset($pages[$_GET['page']])) {
  require_once($pages[$_GET['page']]);
}

//met diverse losse pagina's, minder handig in sommige gevallen maar wel snel als je al een site hebt
include('menu.php');
?>

[Verwijderd]

Helaas ben ik nog niet goed thuis in php, en heb ik geen idee hoe ik deze code zou moeten toepassen in mijn site.

JS zou ik liever niet gebruiken, wil de site graag puur in HTML en CSS maken. PHP toepassen kan in principe wel, de host ondersteunt het, maar vergt voor mij dus nog enige studie..

[DamadmOO]

DamadmOO in "Alternatief voor Frames"

In de header.php zou je ook je menu kunnen zetten en deze wordt dan bij elke pagina gebruikt.

[Technicality]

PHP:

<?PHP

//variabele test vastleggen en redirren naar home als nodig
$test = $_GET['page'];  //haal de variabele "page" uit je url, bijvoorbeeld index.php?page=home
if ($test=="")
$test = 'home';
else $test = $test;

//menu includen
include('static/menu.html');

//content includen
if ($test == "home" || $test == "servers" ||$test == "contact" || $test == "games" || $test == "")
include("content/".$test.".html");
else echo "Pagina niet gevonden!";

//footer includen
include("static/eind.html");
?>

Dit kan vast wel sneller, netter en korter, maar dit gebruik ik zelf voor mijn siteje (ben nog druk aan het leren). Hier include je dus eerst een header/menu(met ook het doctype e.d.), dan de content en links-div en vervolgens de footer (met dingen als </html> enzo). In de planning staan xml en mysql, maar dat is van later zorg. Let wel dat die if van content includen bij mij zo is ingesteld dat de 'page' variabele ook de bestandsnaam is. Je zou ook van een switch kunnen gebruikmaken, dan kun je wel andere bestandsnamen opgeven (dat had ik eerst, maar omdat het toch overeenkomt vond ik dit niet zo nodig).

[Martinspire]

wat volgens mij makkelijker is en voor hem beter te begrijpen (vanwege je beperkte php kennis )

de pagina waar het menu staat hernoem je naar php (dus bv geen index.html maar index.php)

vervolgens zet je op de plaats van je menu neer:

code:

<?PHP include("menu.php"); ?>

en maak je een nieuw bestand aan wat je hernoemd naar menu.php en daarin zet je:

code:

<a href=index.php>index</a>
<a href=pagina2.php>Pagina2</a>

of hoe je je menu wilt hebben
(tabel, divjes, het kan allemaal)

al moet je dus elke pagina hernoemen naar php en de metatags en de doctype veranderen (weet niet zeker)

let wel op, dit is dus geen prachtige code maar het voldoet wel aan wat jij wilt

[ Voor 16% gewijzigd door Martinspire op 29-03-2006 11:58 ]

[RAJH]

Ik heb het op de volgende manier gedaan (met behulp van smarty):

in de index.php

PHP:

$smarty->assign("menu", array('<a href="/?action=aql-ingangscontrole">AQL ingangscontrole</a>',
                              '<a href="/?action=smd">SMD</a>',
                              '<a href="/?action=eerste-board-controle">Eerste board controle</a>',
                              '<a href="/?action=aoi">AOI</a>',
                              '<a href="/?action=touch-up">Touch-up</a>',
                              '<a href="/?action=handmontage">Handmontage</a>',
                              '<a href="/?action=test-and-repair">Test and Repair</a>',
                              '<a href="/?action=aql-eindcontrole">AQL eindcontrole</a>'));

in de header.tpl

PHP:

<ul class="menu-list">
    {foreach from=$menu item=menu_item}
        <li>{$menu_item}</li>
    {/foreach}
</ul>

Voor het aanpassen van het menu is een wijziging maken in de array voldoende

[Martinspire]

maar dan moet je het toch nog steeds in elke pagina aanpassen?

[simon]

RAJH, die a hrefs zou ik ook in smarty zetten. Zelf doe ik dit soort dingen met sections, vind ik net ietwat fijner werken.

[RAJH]

Nee, alleen in de index.php waarin ik de array heb gedefinieerd. De {foreach} loop haalt gewoon alle items uit de array en plaatst die tussen <li> tags.

offtopic:
@ Simon

Bedoel je alle links apart assignen? Want dan moet je weer bij elke wijziging een nieuwe {$var} toevoegen in de header.tpl

[ Voor 41% gewijzigd door RAJH op 29-03-2006 17:02 ]

[sjolmers]

Een idee, erg simpel. Je zult in je css file nog een entry voor de opmaak voor id=menu moeten maken.
Om te beginnen: zorg dat al je pagina's op .php eindigen (index.php, pagina2.php,...)
Include dan de volgende code toe aan je pagina's

code:

<?
{
include "../menu.php";
}
?>

maak een pagina genaamt menu.php (doh) met een code die lijkt op de onderstaande

code:

  <ul id="menu">
<li><a href="http://blabla.com" title="Home">home</a></li>
<li><a href="http://www.blabla.com/pagina1.php" title="pagina1">pagina1</a></li>
<li><a href="http://www.blabla.com/pagina1.php" title="pagina2">pagina2</a></li>
<li><a href="http://www.blabla.com/pagina1.php" title="pagina3">pagina3</a></li>
<li><a href="http://www.blabla.com/pagina1.php" title="pagina4">pagina4</a></li>
  </ul>
    </p>

Nu hoef je alleen je menu aan te passen en je kunt een pagina simpel toevoegen

[ Voor 111% gewijzigd door sjolmers op 29-03-2006 17:49 . Reden: duidelijker tekst ]

[Verwijderd]

Inmiddels is het me gelukt op die manier die DamadmOO, djmantri en sjolmers noemen!

Omdat dit me goed afging heb ik ook nog even gekeken naar de iets meer uitgebreide manier van Technicality gekeken. Die begrijp ik op zich wel, maar ik zie staan: "//haal de variabele "page" uit je url, bijvoorbeeld index.php?page=home", echter dan moet de url er al wel op die manier uit zien, iets wat bij mij nu nog niet het geval is. Een url op deze manier, hoe creer je die?

[Technicality]

Ik hrb mod_rewrite (een apache module) gebruikt. Hierdoor veranderd de pagina jouwdomein.nl/home onzichtbaar in jouwdomein/index.php?page=home. Mijn linkjes bestaan dus ook gewoon uit "home" en niet "home.html".

Mijn .htacces hiervoor:

code:

RewriteEngine on
RewriteRule  ^([a-z]+)$   index.php?page=$1

Je ziet dat er een regular expression staat. Op zich kan dit ook met een url als /home/links, dat wordt dan:

code:

RewriteEngine on
RewriteRule  ^([a-z]+)/([a-z]+)$   index.php?page=$1&id=$2

De $1 en $2 verwijzen dan naar de regular expressions die ervoor staan. Probleem is wel dat je voor elke / die je toevoegt een nieuwe rewriterule moet schrijven.

Je kunt natuurlijk ook links maken met een url als "index.php?page=home" voor je home e.d.
Er is ook een IIS variant, maar daar weet ik niets vanaf

djmantri schreef op woensdag 29 maart 2006 @ 11:57:
wat volgens mij makkelijker is en voor hem beter te begrijpen (vanwege je beperkte php kennis )
hehe
de pagina waar het menu staat hernoem je naar php (dus bv geen index.html maar index.php)

vervolgens zet je op de plaats van je menu neer:

code:

<?PHP include("menu.php"); ?>

en maak je een nieuw bestand aan wat je hernoemd naar menu.php en daarin zet je:

code:

<a href=index.php>index</a>
<a href=pagina2.php>Pagina2</a>

of hoe je je menu wilt hebben
(tabel, divjes, het kan allemaal)

al moet je dus elke pagina hernoemen naar php en de metatags en de doctype veranderen (weet niet zeker)

let wel op, dit is dus geen prachtige code maar het voldoet wel aan wat jij wilt

Includes nemen gewoon platte tekst mee. Je kunt als je wilt je bestanden dus ook .bla noemen, als ie maar html/php code bevat.

Even een kleine toevoeging: Zo begon ik:

PHP:

<?php
include('header.html');
include('home.html');
include('footer.html');
?>

Hier zet je gewoon drie bestandjes achter elkaar. Als je wilt kun je dit bestandje (wat je bijvoorbeeld index.php hebt genoemd) copy-pasten en dan 'home' vervangen voor de content die je dan wil gebruiken. In je menu link je dan naar deze .php bestanden

Toevallig heb ik dan een trucje gebruikt waarbij de middelste include reageert op wat er achter de laatste / staat. Mijn methode is ook veilig voor scriptkiddie (tm) aanvallen

[ Voor 64% gewijzigd door Technicality op 29-03-2006 22:19 ]

[Kayshin]

Waarom geen centrale HTML pagina op deze manier:

PHP:

<?
  include("include/db.inc.php");
  mysql_connect($host,$user);
  mysql_select_db($db) or die("Kan database niet selecteren.");
?>
<html>
  <head>
    <title>
      Blaat
    </title>
    <link rel="stylesheet" type="text/css" href="css/menu.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
  </head>
  <body>
    <div id="container">
      <div id="menu">
        <ul>
          <li><a href="index.php?type=home">Home</a></li>
          <li><a href="index.php?type=deelnemers">Deelnemers</a></li>
          <li><a href="index.php?type=groepen">Groepen</a></li>
          <li><a href="index.php?type=punten">Punten</a></li>
        </ul>
      </div>
      <div id="content">
          <?
            if(isset($_GET['type'])){
              switch($_GET['type']){
              default:
              case 'home':
                include("include/home.inc.php");
                break;
              case 'deelnemers':
                include("include/deelnemers.inc.php");
                break;
              case 'groepen':
                include("include/groepen.inc.php");
                break;
              case 'punten':
                include("include/punten.inc.php");
                break;
              }
            }else{
              include("include/home.inc.php");
            }
          ?>
      </div>
    </div>
  </body>
</html>
<?
  mysql_close();
?>

Zo hoef je maar 1 bestand aan te passen voor je menu en zijn je pagina's ook nog eens beter beveiligd.

[mocean]

Kayshin schreef op donderdag 30 maart 2006 @ 00:57:
Waarom geen centrale HTML pagina op deze manier:

PHP:

<?
  include("include/db.inc.php");
  mysql_connect($host,$user);
  mysql_select_db($db) or die("Kan database niet selecteren.");
  ....
  mysql_close();
?>

Zo hoef je maar 1 bestand aan te passen voor je menu en zijn je pagina's ook nog eens beter beveiligd.

En je doet niks met de mysql connectie En het is duidelijk PHP.

[ Voor 7% gewijzigd door mocean op 30-03-2006 01:39 ]

[Kayshin]

Zooi die ik doe met de connectie als queries enzo staat in de includes. Alleen de algemene zooi staat in mn index pagina, zoals begintags van de html, includes, db selectie en afsluiting, indeling van de site, menu ed.

Rest staat dus allemaal in de includes, dan hoef ik niet in elk apart bestand een connectie te maken en te verbreken, scheelt typwerk

[JHS]

Kayshin: De hele switch/case constructe zoals jij die kiest zorgt ervoor dat je nogal veel repetition krijgt, en dat je drie regels code moet toevoegen als je een nieuwe pagina maakt. Ik zou het dan ook veel eerder zo oplossen:

PHP:

$pages = array("home", "deelnemers", "groepen", "punten"); /* Array of pages, first is default */
if( $isset($_GET['type']) 
    && in_array($_GET['type'], $pages) 
    && file_exists(ROOT."include/".$_GET['type']."php")
  ) {
  require_once(ROOT."include/".$_GET['type']);
} 
elseif( file_exists(ROOT."include/".$pages[0]."php") {
  require_once(ROOT."include/".$_GET['type']);
}
else {
  /* error */
}

Daarnaast zou ik persoonlijk je includes buiten je webroot zetten .