Codebeispiele - Navigation: Unterschied zwischen den Versionen

Aus DynPG-Wiki
Wechseln zu: Navigation, Suche
K (→‎Menüeinträge sortieren)
K
 
(2 dazwischenliegende Versionen des gleichen Benutzers werden nicht angezeigt)
Zeile 181: Zeile 181:
 
| 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.
 
| 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 =
 
| Voraussetzungen =
−
* das aktuelle DHTML Template: '''[[Media:Dhtml menu.zip|Download]]''' (''ersetzen Sie die Datei unter <tt><nowiki><DynPG Ordner</nowiki>/plugins/DPGdynmenu/templates/dhtml/menu.tpl</tt> durch die Datei aus diesem Archiv'')
+
* das aktuelle DHTML Template: '''[[Media:Dhtml menu.zip|Download]]''' (''ersetzen Sie die Datei unter <tt><nowiki><DynPG Ordner></nowiki>/plugins/DPGdynmenu/templates/dhtml/menu.tpl</tt> durch die Datei aus diesem Archiv'')
 
* einen Artikel, der das [[DynPG Module einbinden|Modul Dynamische Navigation einbindet]]
 
* einen Artikel, der das [[DynPG Module einbinden|Modul Dynamische Navigation einbindet]]
 
| Link = http://examples.gampers.ch/examples/navigation-dhtml?read_group=1
 
| Link = http://examples.gampers.ch/examples/navigation-dhtml?read_group=1

Aktuelle Version vom 15. Oktober 2011, 10:56 Uhr

Dynamische Navigation einbinden

Beschreibung:

Die dynamische Navigation einbinden

Voraussetzungen:

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"]->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:

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"]->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:

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"]->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:

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"]->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:

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) */

  1. 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) */

  1. group_fold_1 .level_0_r_i_exp_hover,
  2. 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"]->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 */
  1. 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) */

  1. group_fold_1 .level_0_r_i_exp_hover,
  2. 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) */

  1. 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) */

  1. group_fold_2 .level_0_r_i_exp_hover,
  2. 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) */

  1. 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) */

  1. group_fold_3 .level_0_r_i_exp_hover,
  2. 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) */

  1. 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) */

  1. group_fold_4 .level_0_r_i_exp_hover,
  2. 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) */

  1. 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) */

  1. group_fold_5 .level_0_r_i_exp_hover,
  2. 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:

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"]->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>

Von „https://wiki-de.dynpg.org/wiki_de/index.php?title=Codebeispiele_-_Navigation&oldid=3517“