CSS Einfaches Hauptmenü mit Bildern
Aus DynPG-Wiki
Version vom 19. Dezember 2009, 16:57 Uhr von Torsten (Diskussion | Beiträge)
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;}
