WebImpressionen
Menüs

Ein Menü für die Navigation wird wohl immer gebraucht.
Doch wie gestaltet man ein Menü richtig?

  • Der aktive Link oder Button sollte solange er aktiv ist nicht anklickbar sein.
  • Der aktive Link oder Button sollte sich von den nicht aktiven Links oder Buttons unterscheiden.
  • Das Menü sollte auch bei deaktivierten JavaScript funktionieren!

Viele Menüs mit jQuery unterstützung funktionieren bei deaktivierten JavaScript nicht!

Alle Beispiele in dieser Kategorie ist Grundlegendes Anschauungs-Material.

Wenn man das Menü auf jeder seiner Seiten macht, können diese voraussetzungen leicht mit css erfüllt werden.
Doch wie sieht das bei einem externen Menü aus?

Ein php-Menü läßt sich ganz leicht mit & ohne Datenbank realisieren.

dbname.csv
   id  titel ziel
   1 | Home | 1
   2 | Info | 2	
   .....

menue.php
.....
<ul>
<?php
if (($handle = fopen("dbname.csv", "r")) !== false) {
while (($data = fgetcsv($handle, 1000, "|")) !== false) {
if (( $page ) == $data[0]){
print ' <li> ' . $data[1] . ' </li> ';
} else {
print ' <li> <a href="index.php? page = ' . $data[2] . ' "> ' . $data[1] . ' </a> </li> ';
}
fclose($handle);
}
?>
</ul>
.....

index.php
.....
<?php
$page = ( isset ( $_GET['page'] ) ? $_GET['page'] : '');

if ( file_exists ('menue.php')) { require ('menue.php'); }

switch($page) {
case 1:
if ( file_exists ('home.txt')) { require ('home.txt'); }
break;

case 2:
if ( file_exists ('info.txt')) { require ('info.txt'); }
break;
.....

default:
if ( file_exists ('home.txt')) { require ('home.txt'); }
}
?>
.....



Datenbank

CREATE TABLE `menu` (
`id` int(1) NOT NULL AUTO_INCREMENT,
`title` varchar(50) NOT NULL,
`ziel` varchar(50) NOT NULL,
PRIMARY KEY (`id`));

INSERT INTO `menu` VALUES(1,'Home',1);
INSERT INTO `menu` VALUES(2,'Info',2);
.....

menue.php
.....
<ul>
<?php
$sql = "SELECT id, title, ziel FROM menu";
if ($result = $mysqli -> query( $sql ) {
if ($result -> num_rows > 0) {
while ( $data = $result -> fetch_array ( ) ) {
if (( $page ) == $data[0]){
print ' <li> ' . $data[1] . ' </li> ';
} else {
print ' <li> <a href="index.php? page = ' . $data[2] . ' "> ' . $data[1] . ' </a> </li> ';
}
}
$result -> free( );
} else {
echo "Es wurden keine Datensätze gefunden.";
}
} else {
echo " FEHLER: " . $sql . " konnte nicht ausgeführt werden. " . $mysqli -> error ;
}
$mysqli -> close( );
?>
</ul>
.....

Die index.php ist gleich.