CSS Einfaches Hauptmenü mit verschiedenen Bildern und Hovereffekt

Aus DynPG-Wiki
Wechseln zu: Navigation, Suche

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

Beispiel 5.15. einfaches Hauptmenü mit Bildern und Hovereffekt - index.php [php, N] <?php 

   require '../../../cms/getcontent.php';  //DynPG-Funktionalität einbinden

$DynPG->SetParam_PathToRoot('../../../cms/'); //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>Hauptmenue-Tutorial</title>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<?php $DynPG->Write_CSS_JS_Header(); ?>

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


<body>

Hauptmenue-Tutorial

<?php $DynPG->SetParam_A_Anytime(true); //nur anzeigen, wenn es der Kontext (also Position im Menü es vorgibt! $DynPG->SetParam_A_Article(15); $DynPG->Write_Article(); ?>

<?php $DynPG->SetParam_A_Anytime(false); //nur anzeigen, wenn es der Kontext (also Position im Menü) es vorgibt! $DynPG->SetParam_AA_Maxview(10); //Maximal zehn Einträge in Artikellisten $DynPG->Write_AllArticles(); $DynPG->Write_Article(); ?>

</body>


</html>


Beispiel 5.16. einfaches Hauptmenü mit Bildern und Hovereffekt - CSS-Datei [css,N] /*alle Links schwarz*/ a{color: black;}


/*===========================Hauptkategorien des Menüs==============================*/

  1. hauptmenue p{

text-align: left; }

  1. hauptmenue .level_0_r_i_exp, #hauptmenue .level_0_r_i_exp_hover,
  2. hauptmenue .level_0_r_a_exp_hover, #hauptmenue .level_0_r_a_exp

{ padding: 0px 0px 5px 0px; }


/*Bezeichnungen für die Menüeinträge positionieren*/

  1. hauptmenue .level_0_r_i_exp p, #hauptmenue .level_0_r_i_exp_hover p,
  2. hauptmenue .level_0_r_a_exp_hover p, #hauptmenue .level_0_r_a_exp p

{ position: relative; left: 40px; }

/*Hintergrundbild für Menüeintrag1 setzen (passiv) (ACHTUNG: Die Nummer variiert bei jedem System!!! Um sie herauszufinden muss im Quellcode der generierten HTML-Datei nachgeschaut werden, also einfach im Browser den Quelltext anzeigen lassen!)*/

  1. group_fold_6 .level_0_r_i_exp

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


/*Hintergrundbild für Menüeintrag1 setzen (aktiv)*/

  1. group_fold_6 .level_0_r_i_exp_hover,
  2. group_fold_6 .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üeintrag2 setzen (passiv) */

  1. group_fold_5 .level_0_r_i_exp

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


/*Hintergrundbild für Menüeintrag2 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/important2.gif") no-repeat left top; }


/*Hintergrundbild für Menüeintrag3 setzen (passiv) */

  1. group_fold_2 .level_0_r_i_exp

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


/*Hintergrundbild für Menüeintrag3 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/note2.gif") no-repeat left top; }


/*Hintergrundbild für Menüeintrag4 setzen (passiv) */

  1. group_fold_7 .level_0_r_i_exp

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


/*Hintergrundbild für Menüeintrag4 setzen (aktiv)*/

  1. group_fold_7 .level_0_r_i_exp_hover,
  2. group_fold_7 .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üeintrag5 setzen (passiv) */

  1. group_fold_1 .level_0_r_i_exp

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


/*Hintergrundbild für Menüeintrag5 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/caution2.gif") no-repeat left top; }


/*===========================Sub-Kategorien==============================*/

/*Bezeichnungen für die Menüeinträge positionieren*/

  1. hauptmenue .level_1_r_i_exp p, #hauptmenue .level_1_r_i_exp_hover p,
  2. hauptmenue .level_1_r_a_exp_hover p, #hauptmenue .level_1_r_a_exp p

{ position: relative; left: 60px; }


/*===========================Sub-Sub-Kategorien==============================*/

/*Bezeichnungen für die Menüeinträge positionieren*/

  1. hauptmenue .level_2_r_i_exp p, #hauptmenue .level_2_r_i_exp_hover p,
  2. hauptmenue .level_2_r_a_exp_hover p, #hauptmenue .level_2_r_a_exp p

{ position: relative; left: 60px; }


/*Navigation, Print-Button und Artikelheader unsichtbar machen*/

  1. dynpg_A_breadcrumb{display: none;}
  1. dynpg_AA_breadcrumb_navi{display: none;}
  2. dynpg_AA_breadcrumb_pages{display: none;}
  1. dynpg_A_btnprint{display: none;}
  1. dynpg_A_header{display: none;}

Beispiel ausführen

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