ConPresso Community

Fragen, Antworten, Diskussionen rund um das Content Management System ConPresso

 
Beispiele zur Funktion printNavigation()
Gehe zu Seite 1, 2, 3, 4, 5  Weiter
 
Neue Antwort erstellen    ConPresso Community Foren-Übersicht -> ConPresso 4
Vorheriges Thema anzeigen :: Nächstes Thema anzeigen  
Autor Nachricht
balu
ConPresso-Entwickler


Anmeldungsdatum: 01.01.1970
Beiträge: 1745

BeitragVerfasst am: 01.02.2006 09:55    Titel: Beispiele zur Funktion printNavigation() Antworten mit Zitat

Die Funktion printNavigation() von ConPresso4 habe ich bereits in "Dynamische Navigation in CPO4 erklaert" recht detailliert beschrieben.

In diesem und den unten folgenden Postings werde ich ein paar einfache Beispiele aufzeigen, wie die Funktion genutzt werden kann und wie man den ausgegebenen HTML-Code mit CSS formatiert.


Die Funktion printNavigation() ist in ConPresso4 die Basis fuer die Ausgabe der Navigationselemente. Sie gibt abhaengig von den uebergebenen Parametern eine "unsortierte Liste" (<ul>) aus, die mit geeigneten CSS-Definitionen auf nahezu beliebige Weise formatiert werden kann.

Die Idee hinter der Verwendung einer Liste ist die, dass HTML-Elemente heutzutage nicht mehr fuer Layout zweckentfremdet werden sollten. Leider haben sich in den letzten Jahren aufgrund von Browser-Einschraenkungen und -Inkompatibilitaeten viele Unsitten eingebuergert. Das bekannteste Beispiel hierfuer ist die Verwendung von Tabellen fuer die Erstellung des Basis-Layouts einer Seite.

Bei der Programmierung von modernem (x)HTML wird jedoch wieder mehr auf die Trennung von Layout und Inhalt geachtet. Webseiten werden durch <div>-Elemente in Bloecke wie Header, Navigation, Inhalt und Footer geteilt. Inhalte werden durch die Verwendung von Ueberschriften h1, h2, usw. gegliedert. Und HTML-Elemente werden fuer den Zweck benutzt, fuer den sie gedacht waren: Tabellen fuer tabellarische Daten, usw.. Und da eine Navigation nun mal eher einer verschachtelten Liste entspricht als einer Tabelle, wird sie in ConPresso auch als Liste ausgegeben.

Das Ziel ist die Schaffung von Websites, deren Inhalt getrennt vom Aussehen gehandhabt wird. Hierdurch kann durch einfache Aenderung der CSS-Definitionen das gesamte Aussehen der Website geaendert werden. (Ein sehr beeindruckendes Beispiel hierfuer ist der CSS-Zengarden. Die Seite basiert auf immer demselben Code, der nur durch unterschiedliche Stylesheets anders formatiert wird.)

Ein - natuerlich nicht ganz unerwuenschter - Nebeneffekt ist, dass die Seite so auch gaenzlich ohne CSS dargestellt werden kann. Das ist dann zwar nicht mehr "huebsch", bringt aber einen enormen Schub im Bezug auf die Barrierefreiheit.

Soviel zu der Frage "Wieso Listen?", die mir des oefteren gestellt wurde. Kommen wir zu den Beispielen, wie man Navigationen in ConPresso aufbauen kann.

Aus Gruenden der Einfachheit kann hier nur die Basis der Formatierungsmoeglichkeiten gezeigt werden. Vielleicht gibt es CSS-Profis, die Ihre Beispiele mit einer kurzen Erklaerung hier beschreiben koennen, um anderen ein wenig Inspiration zu geben, welche Moeglichkeiten es gibt. Das waere dann natuerlich auch eine Hilfe fuer die Anwender, die keine Experten in HTML und CSS sind.

Basis aller folgenden Beispiele ist eine in ConPresso angelegte Navigation mit dem folgenden Aufbau:



Bei Fragen zu den einzelnen Beispielen gebt bitte immer kurz das Beispiel mit an, damit wir auch wissen, worauf Ihr Euch bezieht Smile

Balu
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden
balu
ConPresso-Entwickler


Anmeldungsdatum: 01.01.1970
Beiträge: 1745

BeitragVerfasst am: 01.02.2006 09:57    Titel: Beispiel 1 Antworten mit Zitat


 Beispiel 1
Das einfachste Beispiel gibt nur die verschachtelte UL-Liste aus, die dann in den folgenden Beispielen mit CSS formatiert wird:



php:
 <div id="navigation1">
     <?php printNavigation(); ?>
 </div>

Nach oben
Benutzer-Profile anzeigen Private Nachricht senden
balu
ConPresso-Entwickler


Anmeldungsdatum: 01.01.1970
Beiträge: 1745

BeitragVerfasst am: 01.02.2006 10:01    Titel: Beispiel 2: einfache Formatierung Antworten mit Zitat


 Beispiel 2: einfache Formatierung
Die Ausgabe unterscheidet sich nur ein wenig von der in Beispiel 1: Die Listen-Punkte wurden entfernt und die Einrueckung ein wenig kleiner gesetzt. Ausserdem wird das aktive Element blau dargestellt.



php:
 <div id="navigation2">
     <?php printNavigation(); ?>
 </div>


Das dazugehoerige CSS sieht wie folgt aus:

php:
 <style>
    #navigation2 {border: 1px solid #000; padding: 1em;}

    #navigation2 ul {margin: 0; padding: 0; list-style-type: none;}
    #navigation2 li {margin: 0; padding: 0;}

    #navigation2 li a {margin: 0; padding: 0; color: #000;}

    #navigation2 li li {padding-left: 1.5em;} /* erst die zweite Ebene einruecken */

    #navigation2 li.active a {color: #00c;} /* jede aktive Ebene einfaerben */
    #navigation2 li.active li.active a {color: #00c;}
    #navigation2 li.active li.active li.active a {color: #00c;}

    #navigation2 li.active li a {color: #000;} /* eine nicht aktive Unterebene wird in der
                                                  urspruenglichen Farbe dargestellt */
 </style>

Nach oben
Benutzer-Profile anzeigen Private Nachricht senden
balu
ConPresso-Entwickler


Anmeldungsdatum: 01.01.1970
Beiträge: 1745

BeitragVerfasst am: 01.02.2006 10:03    Titel: Beispiel 3: Anzeige nur einer Ebene - horizontal Antworten mit Zitat


 Beispiel 3: Anzeige nur einer Ebene - horizontal
Soll nur eine Ebene anzeigt werden, ist dieses durch den dritten Parameter von printNavigation() moeglich. Dieser Parameter schraenkt die Anzahl der auszugebenden Ebenen ein.



In diesem Beispiel wird nur die "Haupt"-Navigation ausgegeben und per CSS horizontal formatiert:

php:
 <div id="navigation3">
     <div id="haupt">
         <?php printNavigation(''01); ?>

         <!-- noetig, damit es unterhalb der mit "float" formatierten LI-Elemente weitergeht -->
         <div style="clear: both;"> </div>
     </div>
 </div>


Das dazugehoerige CSS:

php:
 <style>
    #navigation3 {border: 1px solid #000; padding: 1em;}

    /* Ebene 1 */
    #navigation3 ul {margin: 0; padding: 0; list-style-type: none;}
    #navigation3 #haupt li {margin: 0; padding: 0; float: left; display: inline; margin-right: 1em;}
 </style>

Nach oben
Benutzer-Profile anzeigen Private Nachricht senden
balu
ConPresso-Entwickler


Anmeldungsdatum: 01.01.1970
Beiträge: 1745

BeitragVerfasst am: 01.02.2006 10:06    Titel: Beispiel 4: Nur eine Unternavigation Antworten mit Zitat


 Beispiel 4: Nur eine Unternavigation
Natuerlich sollte man nicht vergessen, auch eine Unternavigation auszugeben Smile.



Die Funktion printNavigation() erlaubt das Setzen eines vierten Parameters. Dieser Parameter entspricht der ID der uebergeordneten Navigationselementes. Es werden dann nur die Unterpunkte dieses Elementes ausgegeben.

Ueblicherweise moechte man dieses abhaengig vom gewaehlten Haupt-Navigationspunkt ausgeben. Hierzu ist die Benutzung einer neuen Funktion von ConPresso noetig: getActiveElements(). Diese Funktion liefert ein Array der aktiven Ebenen zurueck.

Allerdings hat diese Funktion eine Einschraenkung: Die gerade aktive Ebene kann nur anhand der Rubrik-ID herausgefunden werden. Wird eine Rubrik in der Navigation mehrfach verwendet, wird nur das erste Auftreten dieser Rubrik gefunden. Sollte eine Navigation also dieses Feature nutzen wollen, ist darauf zu achten, dass jede Rubrik nur ein mal in der Navigation verwendet wird. Ein moeglicher Workaround hierfuer ist die Nutzung einer "externen URL" in der Navigation, die als einfacher Link auf die Rubrik zeigt.

php:
 <div id="navigation4">
     <div id="unter">
     <?php
         $ae 
getActiveElements();
         if (isset(
$ae[1])) {                        // nur ausgeben, wenn es eine aktive erste Ebene gibt
             
printNavigation(''01$ae[1]); // es wird wieder nur eine Ebene ausgegeben (die zweite)
         
}
         
?>
     </div>
 </div>


Der dazugehoerige CSS-Code:

php:
 <style>
    #navigation4 {border: 1px solid #000; padding: 1em;}

    #navigation4 ul {margin: 0; padding: 0; list-style-type: none;}
 </style>

Nach oben
Benutzer-Profile anzeigen Private Nachricht senden
balu
ConPresso-Entwickler


Anmeldungsdatum: 01.01.1970
Beiträge: 1745

BeitragVerfasst am: 01.02.2006 10:08    Titel: Beispiel 5: Kombination horizontale Haupt- + vertikale Unter Antworten mit Zitat


 Beispiel 5: Kombination horizontale Haupt- + vertikale Unternavigation
Dieses Beispiel ist eine einfache Kombination von Beispiel 3 und 4:



php:
 <div id="navigation5">
     <div id="haupt">
         <?php printNavigation(''01); ?>

         <!-- noetig, damit es unterhalb der mit "float" formatierten LI-Elemente weitergeht -->
         <div style="clear: both;"> </div>
     </div>

     <div id="unter">
         <?php
         
/* Hier wird getActiveElements() benutzt, um bei der Unternavigation
          * nur die Unterpunkte der aktiven "erste Ebene" ($ae[1]) auszugeben.
          *
          * Verantwortlich hierfuer ist der vierte Parameter von printNavigation()
          */
         
$ae getActiveElements();
         if (isset(
$ae[1])) { // nur ausgeben, wenn es eine aktive erste Ebene gibt
             
printNavigation(''01$ae[1]); // es wird wieder nur eine Ebene ausgegeben (die zweite)
         
}
         
?>
     </div>
 </div>


Der dazugehoerige CSS-Code:
php:
 <style>
    #navigation5 {border: 1px solid #000; padding: 1em;}

    #navigation5 ul {margin: 0; padding: 0; list-style-type: none;}

    /* Ebene 1 */
    #navigation5 #haupt li {margin: 0; padding: 0; float: left; display: inline; margin-right: 1em;}

    /* Ebene 2 - fast ohne Formatierung */
    #navigation5 #unter {margin-top: 1em;}
 </style>

Nach oben
Benutzer-Profile anzeigen Private Nachricht senden
balu
ConPresso-Entwickler


Anmeldungsdatum: 01.01.1970
Beiträge: 1745

BeitragVerfasst am: 01.02.2006 10:10    Titel: Beispiel 6: Ein Kessel buntes + Hover-Effekt Antworten mit Zitat


 Beispiel 6: Ein Kessel buntes + Hover-Effekt
Ein wenig "buntes" gefaellig, das nebenbei auch noch mit einem kleinen Hover-Effekt ausgestattet ist - ohne jegliches Javascript?



Code:

php:
 <div id="navigation5">
     <?php printNavigation(''01); ?>
 </div>


CSS:

php:
 <style>
    #navigation6 {border: 1px solid #000; padding: 1em;}

    #navigation6 ul {margin: 0; padding: 0; list-style-type: none;}

    #navigation6 a {
        padding: 0.5em;
        margin: 0.5em 0;
        display: block;
        width: 200px;
        background: #00c;
        color: #fff;
        border-left: 1em #ee0 solid;
        text-decoration: none;
    }
    #navigation6 a:hover {
        border-left: 1em #0ee solid;
    }
 </style>

Nach oben
Benutzer-Profile anzeigen Private Nachricht senden
Claudia
Gast





BeitragVerfasst am: 11.03.2006 18:59    Titel: Navigations-div-anweisung wird ignoriert Antworten mit Zitat

Hallo zusammen,

könnte mir jemand mitteilen, weshalb meine div-anweisung ignoriert wird? in der 'printnavigation.inc.php' werden keine zusätzlichen styles zugewiesen.


<div style="list-style-type:none">

<?php
include_once(CPO_BASEDIR.'_include/printnavigation.inc.php');

$aE = getActiveElements(getNavigation(), $cpoRubric['id']);
foreach ($aE as $k=>$v) {
if ($k=='X') continue;
}
printNavigation('', 0, 99, 93, true);
?>

</div>


Viele Grüße
Claudia
Nach oben
MarkusR
Handbuchversteher


Anmeldungsdatum: 01.01.1970
Beiträge: 6994

BeitragVerfasst am: 11.03.2006 19:09    Titel: Antworten mit Zitat

Vielleicht weil ein DIV-Tag dieses Attribut nicht kennt?

Du könntest aber dem DIV eine id geben (wie in den obenstehenden Beispielen, z.B. id="navigation") und dann die im Style-Sheet entsprechend defineren

#navigation ul { list-style-type: none; }

siehe auch Beispiel 2, 3, 4, 5 und 6

_________________
Ciao Markus
ConPresso-Module
ConPresso und PHP 7
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden Website dieses Benutzers besuchen
Claudia
Gast





BeitragVerfasst am: 11.03.2006 19:18    Titel: jau Antworten mit Zitat

Danke Very Happy

Gruß,
Claudia
Nach oben
Claudia
Gast





BeitragVerfasst am: 12.03.2006 23:42    Titel: Antworten mit Zitat

Hallo,

nun habe ich brav abgeschrieben, was in Beispiel zwei steht, nur etwas verändert. Dennoch wird meine aktive Ebene nicht rot dargestellt. Woran könnte das liegen?

Über Eure Hilfe würde ich mich sehr freuen.

VG,
Claudia


CSS:

#navigation3_lila {border: 0px solid #000; padding: 1em; top:o; font-family: verdana; font-size: 8pt; font-weight: bold; line-height: 12pt; text-align: left;}

#navigation3_lila ul {margin: 0; padding: 0; list-style-type: none;}
#navigation3_lila li {margin: 0; padding: 0; text-decoration: none;}

#navigation3_lila li a {margin: 0; padding: 0; text-decoration: none; color: #663366;}

#navigation3_lila li li {padding-left: 1em; text-decoration: none;} /* erst die zweite Ebene einruecken*/

#navigation3_lila li.active a {color: #CD0000;}
#navigation3_lila li.active li.active a {color: #CD0000;}
#navigation3_lila li.active li.active li.active a {color: #CD0000;}
Nach oben
MarkusR
Handbuchversteher


Anmeldungsdatum: 01.01.1970
Beiträge: 6994

BeitragVerfasst am: 12.03.2006 23:57    Titel: Antworten mit Zitat

Taucht die Klasse denn auf Deiner Seite auf?
_________________
Ciao Markus
ConPresso-Module
ConPresso und PHP 7
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden Website dieses Benutzers besuchen
Claudia
Gast





BeitragVerfasst am: 13.03.2006 00:01    Titel: Antworten mit Zitat

ich denke ja, sobald ich auf den navigationspunkt klicke und der entsprechende content aufgerufen wird.

http://www.schuleonline.org/

benutzer: hallo
Passwort: neugiernase

(wegen seltsamer reaktionen musste ich die seite kurzfristig sperren. sorry wegen der umstände)
Nach oben
Gast






BeitragVerfasst am: 13.03.2006 00:03    Titel: Antworten mit Zitat

Während meiner Tests habe ich die CSS nochmal umgestellt, doch das müsste theoretisch auch funktionieren, oder?

#navigation3_lila {border: 0px solid #000; padding: 1em; top:o; font-family: verdana; font-size: 8pt; font-weight: bold; line-height: 12pt; text-align: left;}

#navigation3_lila ul {margin: 0; padding: 0; list-style-type: none;}

#navigation3_lila li a:link {margin: 0; padding: 0; text-decoration: none; color: #663366;}
#navigation3_lila li a:visited {margin: 0; padding: 0; text-decoration: none; color: #663366;}
#navigation3_lila li a:focus {margin: 0; padding: 0; text-decoration: none; color: #CD0000;}
#navigation3_lila li a:hover {margin: 0; padding: 0; text-decoration: none; color: #ff6400;}
#navigation3_lila li a:active {margin: 0; padding: 0; text-decoration: none; color: #CD0000;}
/* erst die zweite Ebene einruecken*/
#navigation3_lila li li {padding-left: 1em; text-decoration: none;}
Nach oben
MarkusR
Handbuchversteher


Anmeldungsdatum: 01.01.1970
Beiträge: 6994

BeitragVerfasst am: 13.03.2006 00:08    Titel: Antworten mit Zitat

Also ich sehe hier drin kein class="active"
Code:
<ul>
<li><a href="http://web74.kserver04.de/schuleonline/conpresso-4.0.1/lea_4_3_archiv/index.php?rubric=LEA4.3.3+Protokolle">Protokolle</a></li>
<li><a href="http://web74.kserver04.de/schuleonline/conpresso-4.0.1/lea_4_3_archiv/index.php?rubric=LEA4.3.2+Pressespiegel">Pressespiegel</a></li>
<li><a href="http://web74.kserver04.de/schuleonline/conpresso-4.0.1/lea_4_3_archiv/index.php?rubric=LEA4.3.1+Newsletter">Newsletter</a></li>
</ul>

_________________
Ciao Markus
ConPresso-Module
ConPresso und PHP 7
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden Website dieses Benutzers besuchen
Beiträge der letzten Zeit anzeigen:   
Neue Antwort erstellen    ConPresso Community Foren-Übersicht -> ConPresso 4 Alle Zeiten sind GMT + 1 Stunde
Gehe zu Seite 1, 2, 3, 4, 5  Weiter
Seite 1 von 5

 
Gehe zu:  
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst deine Beiträge in diesem Forum nicht bearbeiten.
Du kannst deine Beiträge in diesem Forum nicht löschen.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
Du kannst Dateien in diesem Forum nicht posten
Du kannst Dateien in diesem Forum herunterladen