CSS Einfaches Hauptmenü mit Bildern
Beschreibung: Ein simples Hauptmenü mit Bildern an den Einträgen.
Beispiel 5.13. einfaches Hauptmenü mit Bildern - 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>
|
<?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.14. einfaches Hauptmenü mit Bildern - CSS-Datei
[css,N]
/*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;}
