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
    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(); ?>        				<!--Standard-Css von DynPG einbinden-->
 
		<link rel="stylesheet" type="text/css" href="style.css" />	<!--eigene style.css einbinden-->
	</head>
 
 
	<body>
		<h1>Hauptmenue-Tutorial</h1>
 
		<table  border="0">
			<tr valign="top">
				<th align="left" style="width:230px" id="hauptmenue">
					<div style="border: 3px black solid">
						<?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();
						?>
					</div>
				</th>
 
				<th id="anzeige">
					<div style="border: 3px black solid">
						<?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();
						?>
					</div>
				</th>
			</tr>
		</table>
	</body>
 
 
</html>


Beispiel 5.16. einfaches Hauptmenü mit Bildern und Hovereffekt - CSS-Datei 

/*alle Links schwarz*/
a{color: black;}
 
 
 
/*===========================Hauptkategorien des Menüs==============================*/
#hauptmenue p{
	text-align: left;
}
 
#hauptmenue .level_0_r_i_exp, #hauptmenue .level_0_r_i_exp_hover,
#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*/
#hauptmenue .level_0_r_i_exp p, #hauptmenue .level_0_r_i_exp_hover p, 
#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!)*/
#group_fold_6 .level_0_r_i_exp 
{
	background: url("images/warning1.gif") no-repeat left top;
}
 
 
/*Hintergrundbild für Menüeintrag1 setzen (aktiv)*/
#group_fold_6 .level_0_r_i_exp_hover, 
#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) */
#group_fold_5 .level_0_r_i_exp 
{
	background: url("images/important1.gif") no-repeat left top;
}
 
 
/*Hintergrundbild für Menüeintrag2 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/important2.gif") no-repeat left top;
}
 
 
/*Hintergrundbild für Menüeintrag3 setzen (passiv) */
#group_fold_2 .level_0_r_i_exp 
{
	background: url("images/note1.gif") no-repeat left top;
}
 
 
/*Hintergrundbild für Menüeintrag3 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/note2.gif") no-repeat left top;
}
 
 
/*Hintergrundbild für Menüeintrag4 setzen (passiv) */
#group_fold_7 .level_0_r_i_exp 
{
	background: url("images/tip1.gif") no-repeat left top;
}
 
 
/*Hintergrundbild für Menüeintrag4 setzen (aktiv)*/
#group_fold_7 .level_0_r_i_exp_hover, 
#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) */
#group_fold_1 .level_0_r_i_exp 
{
	background: url("images/caution1.gif") no-repeat left top;
}
 
 
/*Hintergrundbild für Menüeintrag5 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/caution2.gif") no-repeat left top;
}
 
 
/*===========================Sub-Kategorien==============================*/
 
/*Bezeichnungen für die Menüeinträge positionieren*/
#hauptmenue .level_1_r_i_exp p, #hauptmenue .level_1_r_i_exp_hover p, 
#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*/
#hauptmenue .level_2_r_i_exp p, #hauptmenue .level_2_r_i_exp_hover p, 
#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*/
#dynpg_A_breadcrumb{display: none;}
 
#dynpg_AA_breadcrumb_navi{display: none;}
#dynpg_AA_breadcrumb_pages{display: none;}
 
#dynpg_A_btnprint{display: none;}
 
#dynpg_A_header{display: none;}

Beispiel ausführen

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