Codebeispiele - Navigation: Unterschied zwischen den Versionen

Version vom 9. Oktober 2011, 18:41 Uhr

Inhaltsverzeichnis

1 Dynamische Navigation einbinden
2 Dynamische Navigation
- 2.1 Horizontales Navigationsmenü
3 Horizontale Navigation
- 3.1 DHTML Navigationsmenü
4 DHTML Menü
- 4.1 Bilder für Menüeinträge
5 Navigationsmenü mit Bildern
- 5.1 Bilderwechsel für Menüeinträge
6 Navigationsmenü mit Bildern
- 6.1 Menüeinträge sortieren
7 Menüeinträge sortieren

Dynamische Navigation einbinden

Beschreibung:

Die dynamische Navigation einbinden

Voraussetzungen:

einen Artikel, der das Modul Dynamische Navigation einbindet

Snippet:

[php,N] <?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,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>Dynamische Navigation</title>
 <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

 <link rel="stylesheet" type="text/css" href="style.css" />  

</head>
<body>

  Dynamische 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
   ?>

  
  
   <?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
   ?>

</body> </html>

style.css: [css,N] /* 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,N] <?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,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>Horizontale Navigation</title>
 <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

 <link rel="stylesheet" type="text/css" href="style.css" />  

</head>
<body>

  Horizontale 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
   ?>

  
  
   <?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
   ?>

</body> </html>

style.css: [css,N] /* 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:

einen Artikel, der das Modul Dynamische Navigation einbindet

Snippet:

[php,N] <?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,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>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" />  

</head>
<body>

  DHTML Menü
  
   <?php
   $GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'dhtml');        // Template für DHTML Navigation setzen
   $GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'max_depth', null); // maximale Tiefe auf höchste Gruppenebene beschränken
   $GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'full_load', true); // gesamten Inhalt laden

   $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
   ?>

  
  
   <?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
   ?>

</body> </html>

menu_dhtml.css: [css,N] /* 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,N] <?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: [css,N] /* 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,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>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" />  

</head>
<body>

  Navigationsmenü mit Bildern
  
   <?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
   ?>

  
  
   <?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
   ?>

</body> </html>

style.css: [css,N] /* ======= 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,N] <?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: [css,N] /* 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,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>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" />  

</head>
<body>

  Navigationsmenü mit Bildern
  
   <?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
   ?>

  
  
   <?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
   ?>

</body> </html>

style.css: [css,N] /* ======= 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,N] <?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,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>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" />  

</head>
<body>

  Menüeinträge sortieren
  
   <?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
   ?>

  
  
   <?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
   ?>

</body> </html>

style.css: [css,N] /* 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: Unterschied zwischen den Versionen

Version vom 9. Oktober 2011, 18:41 Uhr

Inhaltsverzeichnis

Dynamische Navigation einbinden

Dynamische Navigation

Horizontales Navigationsmenü

Horizontale Navigation

DHTML Navigationsmenü

DHTML Menü

Bilder für Menüeinträge

Navigationsmenü mit Bildern

Bilderwechsel für Menüeinträge

Navigationsmenü mit Bildern

Menüeinträge sortieren

Menüeinträge sortieren

Navigationsmenü

Meine Werkzeuge

Namensräume

Varianten

Ansichten

Aktionen

Suche

Navigation

Andere Wikis

Werkzeuge

Version vom 9. Oktober 2011, 18:40 Uhr (Quelltext anzeigen) Torsten (Diskussion \| Beiträge) (Die Seite wurde neu angelegt: „Category:Beispiele == Dynamische Navigation einbinden == {{Code Example \| Beschreibung = Die dynamische Navigation einbinden \| Voraussetzungen = * einen …“)	Version vom 9. Oktober 2011, 18:41 Uhr (Quelltext anzeigen) Torsten (Diskussion \| Beiträge) K (hat „Codebeispiel - Navigation“ nach „Codebeispiele - Navigation“ verschoben) Zum nächsten Versionsunterschied →
(kein Unterschied)