CSS Einfaches Hauptmenü mit Bildern: Unterschied zwischen den Versionen

Aus DynPG-Wiki
Wechseln zu: Navigation, Suche
 
K
 
(6 dazwischenliegende Versionen des gleichen Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
 
[[Category:Beispiele]]
 
[[Category:Beispiele]]
−
'''''Beschreibung:''''' Ein simples Hauptmenü mit Bildern an den Einträgen. 
+
[[en:Simple main menu with images]]
 +
→ Hauptartikel: [[Anpassen des Navigationsmenüs#Grafiken für Menüpunkte|Anpassen des Navigationsmenüs > Grafiken für Menüpunkte]]
  
−
'''Beispiel 5.13. einfaches Hauptmenü mit Bildern - index.php'''
+
''Beschreibung:'' Ein simples Hauptmenü mit Bildern an den Einträgen der ersten Ebene.
 +
 
 +
'''Einfaches Hauptmenü mit Bildern - index.php'''
 
<code>[php, N]
 
<code>[php, N]
 
<?php
 
<?php
−
    require '../../../cms/getcontent.php'; //DynPG-Funktionalität einbinden
+
  require '../dynpg/getcontent.php';                   // DynPG-Funktionalität einbinden
−
$DynPG->SetParam_PathToRoot('../../../cms/'); //DynPG-Pfad setzen
+
  $GLOBALS["DynPG"]->SetParam_PathToRoot('../dynpg/'); // DynPG-Pfad setzen
 
?>
 
?>
−
 
+
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<!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">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
−
<head>
+
<head>
−
<title>Hauptmenue-Tutorial</title>
+
  <title>Seite mit dynamischen Navigationsmenü</title>
−
 
+
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
−
<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>
+
  
 +
  <link rel="stylesheet" type="text/css" href="style.css" />  <!--eigene style.css einbinden-->
 +
</head>
 +
 
 +
<body>
 +
  <h1>Seite mit dynamischen Navigationsmenü</h1>
  
 +
  <div id="navigation">
 +
    <?php
 +
    $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
 +
    ?>
 +
  </div>
 +
   
 +
  <div id="inhalt">
 +
    <?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
 +
    ?>
 +
  </div>
 +
</body>
 
</html>
 
</html>
 
</code>
 
</code>
  
  
−
'''Beispiel 5.14. einfaches Hauptmenü mit Bildern - CSS-Datei'''
+
'''Einfaches Hauptmenü mit Bildern - style.css'''
 
<code>[css,N]
 
<code>[css,N]
−
/*alle Links schwarz*/
+
/* ======= Layout der Seite und Navigation ======= */
−
a{color: black;}
+
  
 +
/* Navigation*/
 +
div#navigation{
 +
  /* Angaben für ein zweispaltiges Layout */
 +
  float: left;
 +
  width:150pt;
 +
  margin-left:5pt;
 +
  margin-right:5pt;
  
−
/*===========================Hauptkategorien==============================*/
+
  border:1px solid black;
 +
}
  
−
#hauptmenue p{
+
/* Inhalt */
−
text-align: left;
+
div#inhalt {
 +
  /* Angaben für ein zweispaltiges Layout */
 +
  margin-left:165pt;
 +
  margin-right:5pt;
 
}
 
}
  
−
/*Hintergrundbilder für die Menüeinträge setzen*/
+
/* Alle divs innerhalb des Navigationsmenüs verschieben ihren Inhalt
−
#hauptmenue .level_0_r_i_exp, #hauptmenue .level_0_r_i_exp_hover,
+
  um 10 pt nach rechts. Durch die Verschaltelung von divs innerhalb
−
#hauptmenue .level_0_r_a_exp_hover, #hauptmenue .level_0_r_a_exp
+
  des Menüs erhalten wir so eine Einrückung. */
−
{
+
div#course_categories_menu  div  {
−
background: url("images/note.gif") no-repeat left top;
+
  padding-left:10pt;
−
padding: 0px 0px 5px 0px;
+
 
}
 
}
  
−
/*Bezeichnungen für die Menüeinträge positionieren*/
+
/* Alle links innerhalb des Navigationsmenüs */
−
#hauptmenue .level_0_r_i_exp p, #hauptmenue .level_0_r_i_exp_hover p,
+
div#course_categories_menu  a {
−
#hauptmenue .level_0_r_a_exp_hover p, #hauptmenue .level_0_r_a_exp p
+
  text-decoration:none;
−
{
+
−
position: relative;
+
−
left: 40px;
+
 
}
 
}
  
 +
/* ======= Bilder der Menüeinträge ======= */
  
−
/*===========================Sub-Kategorien==============================*/
+
/* Hintergrundbilder für die Menüeinträge der ersten Ebene setzen */
−
 
+
div#navigation .level_0_r_i_exp, div#navigation .level_0_r_i_exp_hover,  
−
/*Bezeichnungen für die Menüeinträge positionieren*/
+
div#navigation .level_0_r_a_exp_hover, div#navigation .level_0_r_a_exp
−
#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;
+
  background: url("images/note.gif") no-repeat left top;
−
left: 60px;
+
  padding: 0px 0px 5px 0px;
 
}
 
}
−
 
+
−
 
+
/* Bezeichnungen für die Menüeinträge der ersten Ebene  positionieren */
−
/*===========================Sub-Sub-Kategorien==============================*/
+
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
−
/*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;
+
  position: relative;
−
left: 60px;
+
  left: 40px;
 
}
 
}
−
 
−
/*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;}
 
 
</code>
 
</code>
  
−
 
+
[http://examples.gampers.ch/examples/css/menu_with_images/index.php Beispiel ausführen]
−
[http://www.dynpg.ch/doku/examples/css/menu_with_images/index.php Beispiel ausführen]
+

Aktuelle Version vom 15. Mai 2011, 10:06 Uhr

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

Beschreibung: Ein simples Hauptmenü mit Bildern an den Einträgen der ersten Ebene.

Einfaches Hauptmenü mit Bildern - index.php 

<?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" />  <!--eigene style.css einbinden-->
</head>
 
<body>
  <h1>Seite mit dynamischen Navigationsmenü</h1>
 
  <div id="navigation">
    <?php
    $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
    ?>
  </div>
 
  <div id="inhalt">
    <?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
    ?>
  </div>
</body>
</html>


Einfaches Hauptmenü mit Bildern - style.css 

/* ======= 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;
}
 
/* 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;
}
 
/* ======= Bilder der Menüeinträge ======= */
 
/* Hintergrundbilder für die Menüeinträge der ersten Ebene setzen */
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
{
  background: url("images/note.gif") no-repeat left top;
  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;
}

Beispiel ausführen

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