CSS Einfaches Hauptmenü mit Bildern: Unterschied zwischen den Versionen

Aus DynPG-Wiki
Wechseln zu: Navigation, Suche
 
Zeile 1: Zeile 1:
 
[[Category:Beispiele]]
 
[[Category:Beispiele]]
−
'''''Beschreibung:''''' Ein simples Hauptmenü mit Bildern an den Einträgen.
+
[[en:Simple main menu with images]]
 +
'''''Beschreibung:''''' Ein simples Hauptmenü mit Bildern an den Einträgen. Hauptartikel: [[Implementation eines kompletten Hauptmenüs]]
  
 
'''Beispiel 5.13. einfaches Hauptmenü mit Bildern - index.php'''
 
'''Beispiel 5.13. einfaches Hauptmenü mit Bildern - index.php'''

Version vom 19. Dezember 2009, 16:57 Uhr

Beschreibung: Ein simples Hauptmenü mit Bildern an den Einträgen. Hauptartikel: Implementation eines kompletten Hauptmenüs

Beispiel 5.13. einfaches Hauptmenü mit Bildern - 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.14. einfaches Hauptmenü mit Bildern - CSS-Datei 

/*alle Links schwarz*/
a{color: black;}
 
 
/*===========================Hauptkategorien==============================*/
 
#hauptmenue p{
	text-align: left;
}
 
/*Hintergrundbilder für die Menüeinträge setzen*/
#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
{
	background: url("images/note.gif") no-repeat left top;
	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;
}
 
 
/*===========================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_Bildern&oldid=2193“