Navigation mit 1. Ebene und unterschiedlicher Einrückung

cardman · Beitrag von **cardman** » Di 20. Jul 2004, 00:34

Hallo,

Ich mal wieder.
Ich bin dabei meine Page umzudesignen, dazu ist erforderlich, das ich eine neue Navigation brauche. Diese sollte folgende Eigenschaften haben:

1. eine Ebene reicht, da die Unterkategorien über die Service Navigation an anderer Stelle angezeigt. Die anzeige mehrerer Ebenen kann ich noch unterdrücken, indem ich einfach keine Unterkategorien anlege.

2. Das ist das schwierigere, und zwar sollte die Navigation die möglichkeit haben, das jede einzelne Zeile eine individuelle Einrückung haben. Das neue Design ist am Rand geschwungen und daran wollte ich eine Navigation anlehnen.

Leider fehlt mehr bisher der entsprechende Geistesblitz um dieses Problem dynamisch in einem Modul zu lösen. Zur Zeit habe ich dafür zwar auch ein Modul, allerdings ist das statisch. Ich habe nämlich alle links statisch in ein Modul geschrieben und dann die entsprechenden Verlinkung gemacht. Das ist aber meines erachtens nicht sinn der Sache, das ich etwas statisch Programmiere.

Vielleicht fällt euch was ein, wie man das elegant in einem Modul löst.

Vielen Dank

Gruß Kai

Karin Dähne · Beitrag von **Karin Dähne** » Di 20. Jul 2004, 00:39

Hallo cardman,

hast Du mal eine visuelle Beschreibung?
Screenshot des neuen Layouts oder eine Url mit Deinem bisherigen Ansatz.

Grüße,
Karin.

cardman · Beitrag von **cardman** » Di 20. Jul 2004, 15:26

Das ist das Konzept meiner Seite, so sollte es etwa aussehen.

Karin Dähne · Beitrag von **Karin Dähne** » Di 20. Jul 2004, 22:19

Hallo cardman,

Uff, das ist eine Herausforderung, aber spannend, ob es umzusetzen ist.

Um den folenden ansatz auszuprobieren fehlen mir leider (noch) die nötigen php-Kenntnisse:

Wenn Du die erste Ebene (die anderen werden ja abgeschaltet) der Navigation so umgeschrieben bekommst, dass bei jedem erzeugten Link eine id-Nummer automatisch hochgezählt vergeben wird, kannst Du das ganze mit css in den Griff bekommen.

Also die Navigation sollte dann so aussehen:
<div id="navi-left">
<div id="nav01"><a class="current-left-off" target="_self" href="?idcat=#">Aktuelles</a></div>
<div id="nav02"><a class="current-left-off" target="_self" href="?idcat=#">Das Unternehmen</a></div>
<div id="nav03"><a class="current-left-off" target="_self" href="?idcat=#">Ihr Platz im Internet</a></div>
<div id="nav03"><a class="current-left-off" target="_self" href="?idcat=#">Unsere Produkte</a></div>
<div id="nav04"><a class="current-left-off" target="_self" href="?idcat=#">Domain Check</a></div>
<div id="nav05"><a class="current-left-off" target="_self" href="?idcat=#">FAQs</a></div>
<div id="nav06"><a class="current-left-off" target="_self" href="?idcat=#">Sonderangebote</a></div>
<div id="nav07"><a class="current-left-off" target="_self" href="?idcat=#">Gästebuch</a></div>
<div id="nav08"><a class="current-left-off" target="_self" href="?idcat=#">Kunden-Login</a></div>
<div id="nav09"><a class="current-left-off" target="_self" href="?idcat=#">Kunden-Login</a></div>
<div id="nav10"><a class="current-left-off" target="_self" href="?idcat=#">Impressum</a></div>
<div id="nav11"><a class="current-left-off" target="_self" href="?idcat=#">AGB's</a></div>
</div>

Durch die Zuweisung durch ID's kannst Du jedes Element direkt ansprechen und positionieren und eine Schriftgrösse zuweisen.
Die Klasse "current-left-off" , bzw. bei einem aktiven Link current-left-on" steuert das Farbverhalten bei link, visited, hoover, active.
Die dicken gelben Balken kannst Du über "border-left: viele Pixel dick" zuweisen.
Den Hintergrund würde ich dann als komplettes Hintergrundbild laden. Das erspart Dir viel Tabellenschnipselei.
Ich würde bei diesem Layout auch ganz auf tabellen verzichten und alles in Divs anlegen.
Mache ich nur noch. Wenn man die css im Griff hat, ist man sogar viel freier.
Lass mal wissen, wie es klappt.

Grüße,
Karin.

cardman · Beitrag von **cardman** » Mi 21. Jul 2004, 01:11

Danke Karin,

Ich schaue mal, wie sich das ganze umsetzen läßt.

Werde dir natürlich bescheid geben,ob es klappt

cardman · Beitrag von **cardman** » Mi 21. Jul 2004, 01:46

Das Modul konnte ich relativ schnell umprogrammieren. Jetzt muß ich nur noch das mit dem CSS schaffen.

Falls interesse besteht, hier der Quellcode:

Input:
Bleibt wie bei der normalen Haupnavigation

Output:

Code: Alles auswählen

<?php

/***********************************************
* CONTENIDO MODUL - OUTPUT
*
* Modulname   :     Navigation 1.1
* Author      :     Jan Lengowski
* Copyright   :     Contenido - four for business
* Created     :     15-05-2003
* Modified    :     26-05-2003
************************************************/

if ( !is_object($db2) ) {
    $db2 = new DB_Contenido;
}

/**
 * Check if a category is child
 * of another category
 *
 * @return boolean true/false
 * @author Jan Lengowski <Jan.Lengowski@4fb.de>
 * @copyright four for business AG 2003
 */
function catIsChildOf($id, $idparent) {

    global $cfg, $client, $lang;

    $db = new DB_Contenido;

    $parent = $id;

    while ( $parent != 0 ) {

        $sql = "SELECT
                    a.parentid
                FROM
                    ".$cfg["tab"]["cat"]." AS a,
                    ".$cfg["tab"]["cat_lang"]." AS b
                WHERE
                    a.idclient  = '".$client."' AND
                    b.idlang    = '".$lang."' AND
                    a.idcat     = b.idcat AND
                    a.idcat   = '".$parent."'";

        $db->query($sql);
        $db->next_record();

        $parent = $db->f("parentid");

        if ($parent == $idparent) {
            return true;
        }

    }

    return false;

}

if ( catIsChildOf($idcat, CMS_VALUE[0]) ) {
    $sel_idcat = $idcat;
} else {
    $sel_idcat = CMS_VALUE[0];
}

/* Include Template Class */
include_once($cfg["path"]["contenido"] . 'classes/class.template.php');

/**
 * Array storing alle the
 * navigation data
 */
$navitems = array();


/* Template Instance */
$tpl = new Template;

/**
 * Recursive function for creating
 * the navigation array
 * @param Int $idcat Category id
 */
function nav($idcat) {

        global $navitems, $client, $lang, $cfg;

        $db  = new DB_Contenido;
        $db2 = new DB_Contenido;

        $sql = "SELECT parentid FROM ".$cfg["tab"]["cat"]." WHERE idcat = '$idcat'";

        $db->query($sql);
        $db->next_record();

        $parentid = $db->f("parentid");

        if ( $parentid == 0 ) {

           if ( $idcat != CMS_VALUE[0] ){

                $navitems = array();
              
                $sql = "SELECT
                            A.idcat,
                            C.name
                        FROM
                            ".$cfg["tab"]["cat_tree"]." AS A,
                            ".$cfg["tab"]["cat"]." AS B,
                            ".$cfg["tab"]["cat_lang"]." AS C
                        WHERE
                            A.idcat     = B.idcat   AND
                            B.idcat     = C.idcat   AND
                            B.idclient  = '$client' AND
                            C.idlang    = '$lang'   AND
                            C.visible   = '1'       AND
                            B.parentid  = 'CMS_VALUE[0]'
                        ORDER
                            BY A.idtree";

                      $db->query($sql);

                      while ($db->next_record()) {

                            /* Check for external redirects... */
                            $sql = "SELECT
                                        a.external_redirect AS ext
                                    FROM
                                        ".$cfg["tab"]["art_lang"]." AS a,
                                        ".$cfg["tab"]["cat_art"]." AS b,
                                        ".$cfg["tab"]["cat"]." AS c
                                    WHERE
                                        b.idcat     = '".$db->f("idcat")."' AND
                                        b.is_start  = '1' AND
                                        c.idclient  = '".$client."' AND
                                        c.idcat     = b.idcat AND
                                        a.idart     = b.idart AND
                                        a.idlang    = '".$lang."'";

                            $db2->query($sql);
                            $db2->next_record();

                            $target = ( $db2->f("ext") == 0 ) ? '_self' : '_blank';

                            $navitems[$db->f("idcat")] = array("idcat"      => $db->f("idcat"),
                                                                "name"      => $db->f("name"),
                                                                "target"    => $target);
                      }

           }
           
           return true;
        }

        $sql = "SELECT
                    A.idcat,
                    C.name
                FROM
                    ".$cfg["tab"]["cat_tree"]." AS A,
                    ".$cfg["tab"]["cat"]." AS B,
                    ".$cfg["tab"]["cat_lang"]." AS C
                WHERE
                    A.idcat     = B.idcat   AND
                    B.idcat     = C.idcat   AND
                    B.idclient  = '$client' AND
                    C.idlang    = '$lang'   AND
                    C.visible   = '1'       AND
                    B.parentid  = '$parentid'
                ORDER BY
                    A.idtree";

        $db->query($sql);

        while ($db->next_record()) {

                /* Check for external redirects... */
                $sql = "SELECT
                            a.external_redirect AS ext
                        FROM
                            ".$cfg["tab"]["art_lang"]." AS a,
                            ".$cfg["tab"]["cat_art"]." AS b,
                            ".$cfg["tab"]["cat"]." AS c
                        WHERE
                            b.idcat     = '".$db->f("idcat")."' AND
                            b.is_start  = '1' AND
                            c.idclient  = '".$client."' AND
                            c.idcat     = b.idcat AND
                            a.idart     = b.idart AND
                            a.idlang    = '".$lang."'";

                $db2->query($sql);
                $db2->next_record();

                $target = ( $db2->f("ext") == 0 ) ? '_self' : '_blank';
                
                $tmp_nav[$db->f("idcat")] = array("idcat"   => $db->f("idcat"),
                                                  "name"    => $db->f("name"),
                                                  "target"  => $target);
        }

        $tmp_nav[$idcat]["sub"] = $navitems;
        $navitems = $tmp_nav;

        /* Function call */
        nav($parentid);

}  // end function

$sql = "SELECT
            A.idcat,
            C.name
        FROM
            ".$cfg["tab"]["cat_tree"]." AS A,
            ".$cfg["tab"]["cat"]." AS B,
            ".$cfg["tab"]["cat_lang"]." AS C
        WHERE
            A.idcat     = B.idcat   AND
            B.idcat     = C.idcat   AND
            B.idclient  = '$client' AND
            C.idlang    = '$lang'   AND
            C.visible   = '1'       AND
            B.parentid  = '$sel_idcat'
        ORDER BY
            A.idtree";

$db->query($sql);

while ( $db->next_record() ) {

        /* Check for external redirects... */
        $sql = "SELECT
                    a.external_redirect AS ext
                FROM
                    ".$cfg["tab"]["art_lang"]." AS a,
                    ".$cfg["tab"]["cat_art"]." AS b,
                    ".$cfg["tab"]["cat"]." AS c
                WHERE
                    b.idcat     = '".$db->f("idcat")."' AND
                    b.is_start  = '1' AND
                    c.idclient  = '".$client."' AND
                    c.idcat     = b.idcat AND
                    a.idart     = b.idart AND
                    a.idlang    = '".$lang."'";

        $db2->query($sql);
        $db2->next_record();

        $target = ( $db2->f("ext") == 0 ) ? '_self' : '_blank';

        $navitems[$db->f("idcat")] = array("idcat"  => $db->f("idcat"),
                                           "name"   => $db->f("name"),
                                           "target" => $target);
}

/* Create Navigation Array */
nav($sel_idcat);

/* Start Output buffer */
ob_start();

//Reihenfolgen-ID
$navid=0;

echo '<div id="navi-left">';

foreach ($navitems as $key => $data) {

    /* 1. Navigations Ebene */
    $tpl->reset();
	$tpl->set('d', 'NAME',  $data['name']);
    $tpl->set('d', 'TARGET', $data['target']);
    $tpl->set('d', 'HREF',  $sess->url('front_content.php?idcat='.$data['idcat']));
	$tpl->set('d', 'NAVID', 'NAV'.$navid);
    $tpl->next();

if ($idcat == $data['idcat'] || is_array($data['sub'])) {
    $tpl->generate('templates/navfirst_on.html');
    } else {
        $tpl->generate('templates/navfirst_off.html');
    }
$navid++;

} // end foreach

echo '</div>';

/* Read out buffer */
$html = ob_get_contents();

/* Clean buffer */
ob_end_clean();

/* Output buffer-contents */
echo $html;

?>

navfirst_on.html

Code: Alles auswählen

<!-- BEGIN:BLOCK -->
      <div id="{NAVID}"><a class="current-left-on" target="_self" href="{HREF}">{NAME}</a></div> 
<!-- END:BLOCK -->

navfirst_off.html

Code: Alles auswählen

<!-- BEGIN:BLOCK -->
      <div id="{NAVID}"><a class="current-left-off" target="_self" href="{HREF}">{NAME}</a></div> 
<!-- END:BLOCK -->

Die zwei Dateien findet Ihr, falls Ihr es nicht wisst, im Templates Verzeichnis

Denn entsprechenden CSS-Code liefere ich schnellstmöglich nach.

cardman · Beitrag von **cardman** » Mi 21. Jul 2004, 02:47

Hier noch das CSS:

Code: Alles auswählen

.current-left-off 
	{
	font-size:14px;
	}
	
.current-left-on 
	{
	font-size:14px; border-left-width:100px; border-left-color:#F8CF00;
	}

#NAV0 {position:absolute; left:22px; top:70px; width:200px;}	
#NAV1 {position:absolute; left:12px; top:95px; width:200px; }
#NAV2 {position:absolute; left:6px; top:120px; width:200px;}	
#NAV3 {position:absolute; left:2px; top:145px; width:200px; }
#NAV4 {position:absolute; left:2px; top:170px; width:200px;}	
#NAV5 {position:absolute; left:6px; top:195px; width:200px; }
#NAV6 {position:absolute; left:12px; top:220px; width:200px;}	
#NAV7 {position:absolute; left:22px; top:245px; width:200px; }
#NAV8 {position:absolute; left:32px; top:270px; width:200px;}	
#NAV9 {position:absolute; left:42px; top:295px; width:200px; }

Je nach größe der Navigation müßt Ihr noch mehr Einträge nach dem Schema:
#NAV9 {position:absolute; left:42px; top:295px; width:200px; }

einbauen.

Karin Dähne · Beitrag von **Karin Dähne** » Mi 21. Jul 2004, 07:10

Hallo cardman,
freut mich, daß es so schnell geklappt hat!

)

Ich werde demnächst mal probieren, ob ich mein bestehendes Navigationsmodul (allerdings arbeite ich mit sortierten Listen) auf diese Weise erweitern kann.
Das läßt auf spannende Layoutmöglichkeiten hoffen.

Grüße,
Karin.

cardman · Beitrag von **cardman** » Mi 21. Jul 2004, 11:59

Ich wünsch dir schonmal viel Spass dabei.

Kannst ja mal bescheid geben, wenn du fertig bist. Dann man sich dann ja mal anschauen.

Sobald ich meine Homepage online gestellt habe, poste ich einen Link zu meiner Seite.