Quelltext der Seite CSS Einfaches Hauptmenü mit Bildern

[[Category:Beispiele]]
[[en:Simple main menu with images]]
→ Hauptartikel: [[Anpassen des Navigationsmenüs#Grafiken für Menüpunkte|Anpassen des Navigationsmenüs - Grafiken für Menüpunkte]]

''Beschreibung:'' Ein simples Hauptmenü mit Bildern an den Einträgen der ersten Ebene.

'''Einfaches Hauptmenü mit Bildern - index.php'''
<code>[php, N]
<?php
  require '../dynpg/getcontent.php';                   //DynPG-Funktionalität einbinden
  $GLOBALS["DynPG"]->SetParam_PathToRoot('../dynpg/'); //DynPG-Pfad setzen
?>
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
  <title>Seite mit dynamischen Navigationsmenü</title>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

  <link rel="stylesheet" type="text/css" href="style.css" />  <!--eigene style.css einbinden-->
</head>
  
<body>
  <h1>Seite mit dynamischen Navigationsmenü</h1>

  <div id="navigation">
    <?php
    $GLOBALS["DynPG"]->SetParam_A_Anytime(true);             // dynamische Navigation immer anzeigen
    $GLOBALS["DynPG"]->SetParam_A_Article(1);                // Artikelnummer der dynamischen Navigation
    $GLOBALS["DynPG"]->SetParam_A_ArticleHeader(false);      // Artikelkopf (Titel, Lead-Bild und Lead-Text) ausblenden
    $GLOBALS["DynPG"]->SetParam_A_CategoryNavigation(false); // Kategorienavigation (Gruppe > Untergruppe > Artikel) ausblenden
    $GLOBALS["DynPG"]->SetParam_A_PrintNavigation(false);    // Drucken-Link ausblenden
    $GLOBALS["DynPG"]->Write_Article();                      // dynamische Navigation ausgeben
    ?>
  </div>
    
  <div id="inhalt">
    <?php
    $GLOBALS["DynPG"]->Write_AllGroups();         // Gruppenlisten-Ansicht ausgeben (standardmäßig abhängig vom Navigationskontext)
    $GLOBALS["DynPG"]->SetParam_AA_Maxview(10);   // Maximal zehn Einträge in Artikellisten anzeigen
    $GLOBALS["DynPG"]->Write_AllArticles();       // Artikdelliste-Ansicht ausgeben (standardmäßig abhängig vom Navigationskontext)
    $GLOBALS["DynPG"]->SetParam_A_Anytime(false); // Parameter wieder auf false setzen (wurde bei der Navigation auf true gesetzt)
    $GLOBALS["DynPG"]->Write_Article();           // Artikel-Detailansicht ausgeben
    ?>
  </div>
</body>
</html>
</code>


'''Einfaches Hauptmenü mit Bildern - style.css'''
<code>[css,N]
/* ======= Layout der Seite und Navigation ======= */

/* Navigation*/
div#navigation{
  /* Angaben für ein zweispaltiges Layout */
  float: left;
  width:150pt;
  margin-left:5pt;
  margin-right:5pt;

  border:1px solid black;
}

div#inhalt {
  /* Angaben für ein zweispaltiges Layout */ 
  margin-left:165pt;
  margin-right:5pt;
}

/* Alle divs innerhalb des Navigationsmenüs verschieben ihren Inhalt
   um 10 pt nach rechts. Durch die Verschaltelung von divs innerhalb
   des Menüs erhalten wir so eine Einrückung.   */
div#course_categories_menu  div  {
  padding-left:10pt;
}

/* Alle links innerhalb des Navigationsmenüs */
div#course_categories_menu  a {
  text-decoration:none;
}

/* ======= Bilder der Menüeinträge ======= */

/* Hintergrundbilder für die Menüeinträge der ersten Ebene setzen */
div#navigation .level_0_r_i_exp, div#navigation .level_0_r_i_exp_hover, 
div#navigation .level_0_r_a_exp_hover, div#navigation .level_0_r_a_exp
{
  background: url("images/note.gif") no-repeat left top;
  padding: 0px 0px 5px 0px;
}
 
/* Bezeichnungen für die Menüeinträge der ersten Ebene  positionieren */
div#navigation .level_0_r_i_exp p, div#navigation .level_0_r_i_exp_hover p, 
div#navigation .level_0_r_a_exp_hover p, div#navigation .level_0_r_a_exp p
{
  position: relative;
  left: 40px;
}
</code>


[http://examples.gampers.ch/examples/css/menu_with_images/index.php Beispiel ausführen]