CSS Einfaches Hauptmenü mit verschiedenen Bildern und Hovereffekt

Aus DynPG-Wiki
Wechseln zu: Navigation, Suche

→ Hauptartikel: Anpassen des Navigationsmenüs > Verschiedene Grafiken für einzelne Menüpunkte

Beschreibung: Ein simples Hauptmenü mit Bildern an den Einträgen, die sich ändern wenn der Mauszeiger darauf zeigt.

Einfaches Hauptmenü mit Bildern und Hovereffekt - 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>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" />

</head>

<body>

Seite mit dynamischen Navigationsmenü

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

</body> </html>


Einfaches Hauptmenü mit Bildern und Hovereffekt - style.css [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 ======= */

/* Abstand zwischen den Menüeinträgen der ersten Ebene */ 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 { 

 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;

}

/* Hintergrundbild für Menüeintrag 1 setzen (passiv) 

  ACHTUNG: Die Nummer der Gruppe variiert in jedem System */
  1. group_fold_6 .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_6 .level_0_r_i_exp_hover,
  2. group_fold_6 .level_0_r_a_exp_hover, #group_fold_7 .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_7 .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_7 .level_0_r_i_exp_hover,
  2. group_fold_7 .level_0_r_a_exp_hover, #group_fold_6 .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_8 .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_8 .level_0_r_i_exp_hover,
  2. group_fold_8 .level_0_r_a_exp_hover, #group_fold_5 .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_9 .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_9 .level_0_r_i_exp_hover,
  2. group_fold_9 .level_0_r_a_exp_hover, #group_fold_2 .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_10 .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_10 .level_0_r_i_exp_hover,
  2. group_fold_10 .level_0_r_a_exp_hover, #group_fold_1 .level_0_r_a_exp

{ 

 background: url("images/caution2.gif") no-repeat left top;

}

Beispiel ausführen

Von „https://wiki-de.dynpg.org/wiki_de/index.php?title=CSS_Einfaches_Hauptmenü_mit_verschiedenen_Bildern_und_Hovereffekt&oldid=2888“