Codebeispiele - Navigation

Inhaltsverzeichnis

1 Dynamische Navigation einbinden
2 Horizontales Navigationsmenü
3 DHTML Navigationsmenü
4 Bilder für Menüeinträge
5 Bilderwechsel für Menüeinträge
6 Menüeinträge sortieren

Dynamische Navigation einbinden

Beschreibung:

Voraussetzungen:

einen Artikel, der das Modul Dynamische Navigation einbindet

Snippet:

<?php
  $GLOBALS["DynPG"]->SetupTemplate('uneditable');          // diese Template verhindert, dass der Artikel selbst im Frontend-Editiermodus bearbeitet werden kann
  $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
  $GLOBALS["DynPG"]->SetupTemplate('default');             // Standard-Template setzen
?>

Beispiel ausführen

<toggledisplay status="hide" showtext="▼ Quelltext anzeigen" hidetext="▼ Quelltext verbergen" linkstyle="font-size:normal;"> index.php:

<?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>Dynamische Navigation</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>Dynamische Navigation</h1>
 
  <!-- Navigation -->
  <div id="navigation">
    <?php
    $GLOBALS["DynPG"]->SetupTemplate('uneditable');          // diese Template verhindert, dass der Artikel selbst im Frontend-Editiermodus bearbeitet werden kann
    $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
    $GLOBALS["DynPG"]->SetupTemplate('default');             // Standard-Template setzen
    ?>
  </div>
 
  <!-- Inhalt -->
  <div id="inhalt">
    <?php
    $GLOBALS["DynPG"]->Write_AllGroups();         // Gruppenlisten-Ansicht ausgeben (standardmäßig abhängig vom Navigationskontext)
    $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>

style.css:

/* Navigation */
div#navigation{
  /* Angaben für ein zweispaltiges Layout */
  float:left;
  width:150pt;
  margin-left:5pt;
  margin-right:5pt;
 
  border:1px solid #AAA;
}
 
/* Inhalt */
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;
}

</toggledisplay>

Horizontales Navigationsmenü

Beschreibung:

Die dynamische Navigation als horizontales Menü einbinden

Voraussetzungen:

einen Artikel, der das Modul Dynamische Navigation einbindet

Snippet:

<?php
  $GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'horizontal'); // Template für horizontale Navigation setzen
  $GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'max_depth', 0);  // maximale Tiefe auf höchste Gruppenebene beschränken
 
  $GLOBALS["DynPG"]->SetupTemplate('uneditable');          // diese Template verhindert, dass der Artikel selbst im Frontend-Editiermodus bearbeitet werden kann
  $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
  $GLOBALS["DynPG"]->SetupTemplate('default');             // Standard-Template setzen
?>

Beispiel ausführen

<toggledisplay status="hide" showtext="▼ Quelltext anzeigen" hidetext="▼ Quelltext verbergen" linkstyle="font-size:normal;"> index.php:

<?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>Horizontale Navigation</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>Horizontale Navigation</h1>
 
  <!-- Navigation -->
  <div id="navigation">
    <?php
    $GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'horizontal'); // Template für horizontale Navigation setzen
    $GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'max_depth', 0);  // maximale Tiefe auf höchste Gruppenebene beschränken
 
    $GLOBALS["DynPG"]->SetupTemplate('uneditable');          // diese Template verhindert, dass der Artikel selbst im Frontend-Editiermodus bearbeitet werden kann
    $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
    $GLOBALS["DynPG"]->SetupTemplate('default');             // Standard-Template setzen
    ?>
  </div>
 
  <!-- Inhalt -->
  <div id="inhalt">
    <?php
    $GLOBALS["DynPG"]->Write_AllGroups();         // Gruppenlisten-Ansicht ausgeben (standardmäßig abhängig vom Navigationskontext)
    $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>

style.css:

/* Navigation */
div#navigation{
  border:1px solid #AAA;
  margin-bottom:20px;
}
 
/* Inhalt */
div#inhalt {
 
}
 
/* Horizontale Navigation */
div#course_categories_menu_horizontal {
 
}
 
/* Menü-Elemente horizontal anordnen */
div#course_categories_menu_horizontal  div  {
  margin: 0 8px 0 8px;
  display:inline-block;
}
 
/* Alle links innerhalb des horizontalen Navigationsmenüs */
div#course_categories_menu_horizontal  a {
  font-size:large;
  text-decoration:none;
}

</toggledisplay>

DHTML Navigationsmenü

Beschreibung:

Die dynamische Navigation als DHTML Menü mit mouse-over-Effekt einbinden. Die Unterpunkte der Gruppen höchster Ebene werden beim Darüberfahren in einem kleinen Fenster eingeblendet.

Voraussetzungen:

das aktuelle DHTML Template: Download (ersetzen Sie die Datei unter <DynPG Ordner>/plugins/DPGdynmenu/templates/dhtml/menu.tpl durch die Datei aus diesem Archiv)
einen Artikel, der das Modul Dynamische Navigation einbindet

Snippet:

<?php
  $GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'dhtml');        // Template für DHTML Navigation setzen
  $GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'full_load', true); // gesamten Inhalt laden
  $GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'hide_not_public_groups', true); // versteckte Gruppen ausblenden (wichtig!)
 
  $GLOBALS["DynPG"]->SetupTemplate('uneditable');          // diese Template verhindert, dass der Artikel selbst im Frontend-Editiermodus bearbeitet werden kann
  $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
  $GLOBALS["DynPG"]->SetupTemplate('default');             // Standard-Template setzen
?>

Beispiel ausführen

<toggledisplay status="hide" showtext="▼ Quelltext anzeigen" hidetext="▼ Quelltext verbergen" linkstyle="font-size:normal;"> index.php:

<?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>DHTML Menü</title>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
 
  <link rel="stylesheet" type="text/css" href="menu_dhtml.css" />  <!--DHTML Menü Style Sheet einbinden-->
</head>
 
<body>
  <h1>DHTML Menü</h1>
 
  <!-- Navigation -->
  <div id="navigation">
    <?php
    $GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'dhtml');        // Template für DHTML Navigation setzen
    $GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'full_load', true); // gesamten Inhalt laden
    $GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'hide_not_public_groups', true); // versteckte Gruppen ausblenden (wichtig!)
 
    $GLOBALS["DynPG"]->SetupTemplate('uneditable');          // diese Template verhindert, dass der Artikel selbst im Frontend-Editiermodus bearbeitet werden kann
    $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
    $GLOBALS["DynPG"]->SetupTemplate('default');             // Standard-Template setzen
    ?>
  </div>
 
  <!-- Inhalt -->
  <div id="inhalt">
    <?php
    $GLOBALS["DynPG"]->Write_AllGroups();         // Gruppenlisten-Ansicht ausgeben (standardmäßig abhängig vom Navigationskontext)
    $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>

menu_dhtml.css:

/* Horizontale Navigation */
div#mainMenu {
  border:1px solid #AAA;
  width:100%;
  margin-bottom:20px;
}
 
/* Listen */
ul.menu, ul.menu ul {
  list-style-type: none;
}
 
/* Hauptpunkte des Menüs */
ul.menu > li {
  display:inline-block;
  margin-left:10px;
  margin-right:10px;
}
 
/* Alle links innerhalb des DHTML Navigationsmenüs */
div#mainMenu a {
  font-size:large;
  text-decoration:none;
}
 
/* Alle links innerhalb des DHTML Navigationsmenüs (Hover) */
div#mainMenu a:hover{
  text-decoration:underline;
}
 
/* Liste innerhalb des eingeblendeten Fensters */
ul.menu ul {
  padding: 10px 20px 15px 10px;
  position: absolute;
  background-color: #F6F6F6;
  display: none;
  min-width: 188px;
  margin: 0;
}
 
/* IE-Hack */
*html ul.menu ul { width: 150px; }
 
/* Listenelemente der Tiefe 2 */
ul.menu li.d_2 {
  margin-left:10px;
}
 
/* Listenelemente der Tiefe 3 */
ul.menu li.d_3 {
  padding-left:20px;
}

</toggledisplay>

Bilder für Menüeinträge

Beschreibung:

Bilder für alle Menüpunkte einer Ebene festlegen

Voraussetzungen:

einen Artikel, der das Modul Dynamische Navigation einbindet

Snippet:

index.php:

<?php
  $GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'intelligent'); // Template 'intelligent' setzen
 
  $GLOBALS["DynPG"]->SetupTemplate('uneditable');          // diese Template verhindert, dass der Artikel selbst im Frontend-Editiermodus bearbeitet werden kann
  $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
  $GLOBALS["DynPG"]->SetupTemplate('default');             // Standard-Template setzen
?>

style.php:

/* Hintergrundbilder für die Menüeinträge der ersten Ebene setzen */
div.d0
{
  background: url("images/bild.jpg") no-repeat left top;
  padding: 0px 0px 10px 30px;
}
?>

Beispiel ausführen

<toggledisplay status="hide" showtext="▼ Quelltext anzeigen" hidetext="▼ Quelltext verbergen" linkstyle="font-size:normal;"> index.php:

<?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>Navigationsmenü mit Bildern</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>Navigationsmenü mit Bildern</h1>
 
  <div id="navigation">
    <?php
    $GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'intelligent'); // Template 'intelligent' setzen
 
    $GLOBALS["DynPG"]->SetupTemplate('uneditable');          // diese Template verhindert, dass der Artikel selbst im Frontend-Editiermodus bearbeitet werden kann
    $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
    $GLOBALS["DynPG"]->SetupTemplate('default');             // Standard-Template setzen
    ?>
  </div>
 
  <div id="inhalt">
    <?php
    $GLOBALS["DynPG"]->Write_AllGroups();         // Gruppenlisten-Ansicht ausgeben (standardmäßig abhängig vom Navigationskontext)
    $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>

style.css:

/* ======= Layout der Seite und Navigation ======= */
 
/* Navigation*/
div#navigation{
  /* Angaben für ein zweispaltiges Layout */
  float:left;
  width:130pt;
  margin-left:5pt;
  margin-right:5pt;
  padding:10px;
 
  border:1px solid black;
}
 
/* Inhalt */
div#inhalt {
  /* Angaben für ein zweispaltiges Layout */ 
  margin-left:165pt;
  margin-right:5pt;
}
 
/* 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.d0
{
  background: url("images/note.gif") no-repeat left top;
  padding: 0px 0px 10px 30px;
}
 
/* Ebene 2 */
div.d1
{
  padding: 0px 0px 5px 40px;
}
 
/* Ebene 3 */
div.d2
{
  padding: 0px 0px 5px 50px;
}
 
/* Ebene 4 */
div.d3
{
  padding: 0px 0px 5px 60px;
}

</toggledisplay>

Bilderwechsel für Menüeinträge

Beschreibung:

Bilderwechsel für Menüpunkte festlegen

Voraussetzungen:

einen Artikel, der das Modul Dynamische Navigation einbindet

Snippet:

index.php:

<?php
  $GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'intelligent'); // Template 'intelligent' setzen
 
  $GLOBALS["DynPG"]->SetupTemplate('uneditable');          // diese Template verhindert, dass der Artikel selbst im Frontend-Editiermodus bearbeitet werden kann
  $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
  $GLOBALS["DynPG"]->SetupTemplate('default');             // Standard-Template setzen
?>

style.php:

/* Ebene 1 */
div.d0
{
  padding: 0px 0px 10px 30px;
  position: relative;
}
 
/* Hintergrundbild für Menüeintrag 1 setzen (passiv) */
#group_fold_1 .level_0_r_i_exp 
{
  background: url("images/bild.jpg") no-repeat left top;
}
 
/* Hintergrundbild für Menüeintrag 1 setzen (aktiv) */
#group_fold_1 .level_0_r_i_exp_hover, 
#group_fold_1 .level_0_r_a_exp_hover, #group_fold_1 .level_0_r_a_exp
{
  background: url("images/bild_hover.jpg") no-repeat left top;
}
?>

Beispiel ausführen

<toggledisplay status="hide" showtext="▼ Quelltext anzeigen" hidetext="▼ Quelltext verbergen" linkstyle="font-size:normal;"> index.php:

<?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>Navigationsmenü mit Bildern</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>Navigationsmenü mit Bildern</h1>
 
  <div id="navigation">
    <?php
    $GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'intelligent'); // Template 'intelligent' setzen
 
    $GLOBALS["DynPG"]->SetupTemplate('uneditable');          // diese Template verhindert, dass der Artikel selbst im Frontend-Editiermodus bearbeitet werden kann
    $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
    $GLOBALS["DynPG"]->SetupTemplate('default');             // Standard-Template setzen
    ?>
  </div>
 
  <div id="inhalt">
    <?php
    $GLOBALS["DynPG"]->Write_AllGroups();         // Gruppenlisten-Ansicht ausgeben (standardmäßig abhängig vom Navigationskontext)
    $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>

style.css:

/* ======= Layout der Seite und Navigation ======= */
 
/* Navigation*/
div#navigation{
  /* Angaben für ein zweispaltiges Layout */
  float:left;
  width:130pt;
  margin-left:5pt;
  margin-right:5pt;
  padding:10px;
 
  border:1px solid black;
}
 
/* Inhalt */
div#inhalt {
  /* Angaben für ein zweispaltiges Layout */ 
  margin-left:165pt;
  margin-right:5pt;
}
 
/* Alle links innerhalb des Navigationsmenüs */
div#course_categories_menu  a {
  text-decoration:none;
}
 
/* ======= Bilder der Menüeinträge ======= */
 
/* Ebene 1 */
div.d0
{
  padding: 0px 0px 10px 30px;
  position: relative;
}
 
/* Ebene 2 */
div.d1
{
  padding: 0px 0px 5px 40px;
}
 
/* Ebene 3 */
div.d2
{
  padding: 0px 0px 5px 50px;
}
 
/* Ebene 4 */
div.d3
{
  padding: 0px 0px 5px 60px;
}
 
/* Hintergrundbild für Menüeintrag 1 setzen (passiv) 
   ACHTUNG: Die Nummer der Gruppe variiert in jedem System */
#group_fold_1 .level_0_r_i_exp 
{
  background: url("images/tip1.gif") no-repeat left top;
}
 
/* Hintergrundbild für Menüeintrag 1 setzen (aktiv) */
#group_fold_1 .level_0_r_i_exp_hover, 
#group_fold_1 .level_0_r_a_exp_hover, #group_fold_1 .level_0_r_a_exp
{
  background: url("images/tip2.gif") no-repeat left top;
}
 
/* Hintergrundbild für Menüeintrag 2 setzen (passiv) */
#group_fold_2 .level_0_r_i_exp 
{
  background: url("images/warning1.gif") no-repeat left top;
}
 
/* Hintergrundbild für Menüeintrag 2 setzen (aktiv) */
#group_fold_2 .level_0_r_i_exp_hover, 
#group_fold_2 .level_0_r_a_exp_hover, #group_fold_2 .level_0_r_a_exp
{
  background: url("images/warning2.gif") no-repeat left top;
}
 
/* Hintergrundbild für Menüeintrag 3 setzen (passiv) */
#group_fold_3 .level_0_r_i_exp 
{
  background: url("images/important1.gif") no-repeat left top;
}
 
/* Hintergrundbild für Menüeintrag 3 setzen (aktiv) */
#group_fold_3 .level_0_r_i_exp_hover, 
#group_fold_3 .level_0_r_a_exp_hover, #group_fold_3 .level_0_r_a_exp
{
  background: url("images/important2.gif") no-repeat left top;
}
 
/* Hintergrundbild für Menüeintrag 4 setzen (passiv) */
#group_fold_4 .level_0_r_i_exp 
{
  background: url("images/note1.gif") no-repeat left top;
}
 
/* Hintergrundbild für Menüeintrag 4 setzen (aktiv) */
#group_fold_4 .level_0_r_i_exp_hover, 
#group_fold_4 .level_0_r_a_exp_hover, #group_fold_4 .level_0_r_a_exp
{
  background: url("images/note2.gif") no-repeat left top;
}
 
/* Hintergrundbild für Menüeintrag 5 setzen (passiv) */
#group_fold_5 .level_0_r_i_exp 
{
  background: url("images/caution1.gif") no-repeat left top;
}
 
/* Hintergrundbild für Menüeintrag 5 setzen (aktiv) */
#group_fold_5 .level_0_r_i_exp_hover, 
#group_fold_5 .level_0_r_a_exp_hover, #group_fold_5 .level_0_r_a_exp
{
  background: url("images/caution2.gif") no-repeat left top;
}

</toggledisplay>

Menüeinträge sortieren

Beschreibung:

Menüeinträge sortieren (hier aufsteigend nach Name)

Voraussetzungen:

einen Artikel, der das Modul Dynamische Navigation einbindet

Snippet:

<?php
  //Sortierschlüssel festlegen, hier: Name des Eintrages (weitere Möglichkeiten: INDEX, CREATEDATE)
  $GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'order', Array('NAME'));
  //Sortieren, und zwar aufsteigend (weitere Möglichkeiten: DESC)
  $GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'sort', Array('ASC'));
 
  $GLOBALS["DynPG"]->SetupTemplate('uneditable');          // diese Template verhindert, dass der Artikel selbst im Frontend-Editiermodus bearbeitet werden kann
  $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
  $GLOBALS["DynPG"]->SetupTemplate('default');             // Standard-Template setzen
?>

Beispiel ausführen

<toggledisplay status="hide" showtext="▼ Quelltext anzeigen" hidetext="▼ Quelltext verbergen" linkstyle="font-size:normal;"> index.php:

<?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>Menüeinträge sortieren</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>Menüeinträge sortieren</h1>
 
  <div id="navigation">
    <?php
    $GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'order', Array('NAME')); //Sortierschlüssel festlegen, hier: Name des Eintrages (weitere Möglichkeiten: INDEX, CREATEDATE)
    $GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'sort', Array('ASC'));   //Sortieren, und zwar aufsteigend (weitere Möglichkeiten: DESC)
 
    $GLOBALS["DynPG"]->SetupTemplate('uneditable');          // diese Template verhindert, dass der Artikel selbst im Frontend-Editiermodus bearbeitet werden kann
    $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
    $GLOBALS["DynPG"]->SetupTemplate('default');             // Standard-Template setzen
    ?>
  </div>
 
  <div id="inhalt">
    <?php
    $GLOBALS["DynPG"]->Write_AllGroups();         // Gruppenlisten-Ansicht ausgeben (standardmäßig abhängig vom Navigationskontext)
    $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>

style.css:

/* Navigation */
div#navigation{
  /* Angaben für ein zweispaltiges Layout */
  float:left;
  width:150pt;
  margin-left:5pt;
  margin-right:5pt;
 
  border:1px solid #AAA;
}
 
/* Inhalt */
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;
}

</toggledisplay>

Codebeispiele - Navigation

Inhaltsverzeichnis

Dynamische Navigation einbinden

Horizontales Navigationsmenü

DHTML Navigationsmenü

Bilder für Menüeinträge

Bilderwechsel für Menüeinträge

Menüeinträge sortieren

Navigationsmenü

Meine Werkzeuge

Namensräume

Varianten

Ansichten

Aktionen

Suche

Navigation

Andere Wikis

Werkzeuge