Seite 5 von 11

Verfasst: Di 3. Jul 2007, 10:02
von Huhnduluk
ich hab noch ein kleines problemchen mit diesem modul:

1. es werden bei mir navigationselemente angezeigt, welche keine inhalte haben, aber nicht ausgeblendet sind. hat jemand einen schnippsel parat, welcher das unterbindet oder einen guten gedankenanstoss, wie ich das löse (zimelicher noob was contenido angeht)?

2. irgendwie läuft es bei mir im ie7 nicht. hinweise, woran das liegen könnte?

dank und gruss
huhn

Verfasst: Di 21. Aug 2007, 16:41
von motion7
hallo,

hab die ganze navigation unter 4.6 laufen, und es funktioniert alles.
hat einer eine variante welche mit bildern funktioniert?

also keine text navigation sonder eine grafische navigation.
oder wie könnte man sowas realisieren.

mein output code für 4.6:

Code: Alles auswählen

<?php 
/*********************************************** 
* CONTENIDO MODUL - OUTPUT 
* 
* Modulname   :       vpNavigation 0.2 
* Author      :     Ingo van Peeren 
* Copyright   :     Ingo van Peeren (ingo@van-peeren.de) 
* Created     :     30-03-2005 
* Modified    :     16-07-2005 
************************************************/ 


#Includes 
cInclude("frontend", "includes/functions.navigation.php"); 
cInclude("classes", "class.frontend.permissions.php"); 
cInclude("classes", "class.frontend.groups.php"); 
cInclude("classes", "class.frontend.users.php"); 


$hauptkategorie = "CMS_VALUE[0]"; 

$navitems = array(); 

function nav_feld ($cat) { 
global $client, $lang, $cfg, $idcat; 

        if (!is_object($db)) { 
            $db = new DB_Contenido; 
        } 
        $sql = "SELECT 
                     A.idcat, 
                     B.parentid, 
                     C.name, 
                     C.public, 
                     C.idcatlang 
                   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  = '$cat' 
                  ORDER BY 
                     A.idtree"; 

         $db->query($sql); 

         while ( $db->next_record() ) { 
                     $visible = checkCatPermission($db->f("idcatlang"),$db->f("public")); 
      if ($visible) { 
            $aktiv = ""; 
            $sub_feld = nav_feld($db->f("idcat")); 
            if ($db->f("idcat") == $idcat) $aktiv = "active"; 
            elseif ($sub_feld["activepath"]) $aktiv = "activepath"; 
            $nav_feld[] = array("idcat"      => $db->f("idcat"), 
                                "name"       => $db->f("name"), 
                                "active"     => $aktiv, 
                                "sub"        => $sub_feld); 
            if ($aktiv != "") $activepath = $aktiv; 

         } 
         } 
         $rv = array("feld"          => $nav_feld, 
                     "activepath"    => $activepath); 

         return $rv; 

} 

function liste ($array, $indent = "  ") 
{ 

global $first; 

       if (is_array($array["feld"])) { 
         if ($first) { 
           echo $indent . "<ul id=\"nav\">\n"; 
           $first = 0; 
         } 
         else echo $indent . "<ul>\n"; 
         foreach ($array["feld"] as $menupunkt) { 

           if ($menupunkt["active"] == "active") echo $indent . $indent . "<li id=\"active\">\n"; 
           elseif ($menupunkt["active"] == "activepath") echo $indent . $indent . "<li class=\"activepath\">\n"; 
           else echo $indent . $indent . "<li>\n"; 
           if (is_array($menupunkt["sub"]["feld"])) { 
             echo $indent . $indent . $indent . "<a class=\"daddy\" href=\"front_content.php?idcat=" . $menupunkt["idcat"] . "\">" . $menupunkt["name"] . "</a>\n"; 
             liste($menupunkt["sub"], $indent."    "); 
           } 
           else echo $indent . $indent . $indent . "<a href=\"front_content.php?idcat=" . $menupunkt["idcat"] . "\">" . $menupunkt["name"] . "</a>\n"; 
           echo $indent . $indent . "</li>\n"; 

         } 
         echo $indent . "</ul>\n"; 
       } 
} 

/* Create Navigation Array */ 
$navitems = nav_feld($hauptkategorie); 

$first = 1; 

liste($navitems); 

?>

Verfasst: Fr 7. Sep 2007, 16:12
von frytux
"vpNavigation läßt sich auch mit einer splitted navigation kombinieren.
wo der baum an anderer stelle erscheinen soll, einfach navigation nochmal einbauen (modul: "geteilte navigation" hier aus dem forum, weiß gerade die genaue bezeichnung nicht) aufrufen und erste ebene mit nem <div style="display:none"></div> umgeben."

Eingesetzt hier: http://www.steppan-dentallabor.de/cms/f ... p?idcat=20

Genau wie das Menü dort ist versuche ich es bei mir gerade umzusetzen. Im oberen Menü habe ich die vpNavigation integriert und diese zeigt mir 2 Ebenen an. Klicke ich nun auf einen Link der zweiten Ebene werden mir die Unterpunkte nicht angezeigt. Ich hab versucht die "Geteilte Navigation" dazu einzusetzen - ging nicht... Welche Navigation muss denn nochmals eingebaut werden und an welcher Stelle muss ich die erste Ebene ausblenden?! :cry:

Verfasst: Di 30. Okt 2007, 12:25
von winston
ich möchte die gesamte navigation gerne zentrieren. wie ist das möglich?

mit <div align=center> funktioniert es leider nicht :(

Verfasst: Fr 2. Nov 2007, 12:57
von Jojoweb
Huhnduluk hat geschrieben:
2. irgendwie läuft es bei mir im ie7 nicht. hinweise, woran das liegen könnte?
Hast du folgenden Quelltext in den Head-Bereich eingefügt?

Code: Alles auswählen

<script type="text/javascript"><!--//--><![CDATA[//><!--

  sfHover = function() {
	  var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	  for (var i=0; i<sfEls.length; i++) {
		  sfEls[i].onmouseover=function() {
			  this.className+=" sfhover";
	  	}
		  sfEls[i].onmouseout=function() {
		  	this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
	  	}
  	}
  }
  if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>


Gruß
Jojoweb

Verfasst: Di 6. Nov 2007, 22:06
von mko
Gibt es eine Möglichkeit den 1 Menüpunkt (bei mir Home) auszublenden und erst die weiteren Kategorien anzuzeigen?

Vielen Dank...

Verfasst: Fr 9. Nov 2007, 09:52
von marphin
Hallo,

tolles Modul. Kann man es auch so konfigurieren - und wenn dann wie - dass sich die Schriftgröße je nach länge des Textes an die Navi anpasst?

Also wenig Text wie "Home" steht groß in der Navi und auf der gleichen Fläche soll dann z.B. "Unsere Leistungen" in kleinerer Schrift mit zeilenumbruch erscheinen.

Beispiel:
Bild

Gruß, Martin

Verfasst: Fr 9. Nov 2007, 10:02
von Dodger77
@marphin

Nein, per CSS ist das m.W. nicht möglich. Evtl. ließe sich natürlich etwas per JavaScript machen oder man baut die Navigation in Flash.

Verfasst: Di 20. Nov 2007, 21:45
von slecram
moin,
kann mir einer sagen, wie ich alle kategorien ausgege, egal ob ein startartikel vorhanden ist, oder nicht?

Gruß

Verfasst: So 25. Nov 2007, 23:34
von stefkey
Hallo,

ich würde gerne die vpnavigation nutzen, jedoch sollten die Hover-Unterpunkte sichtbar bleiben wenn ein Unterpunkt aktiv ist.

Das müsste doch mit CSS zu lösen sein. Ich habe schon mit :active vesuche gemacht, jedoch muss ich jetzt aufgeben und um Hilfe bitten. Ich stehe mit meinen Kenntissen an der Wand :?

Hat jemand einen Tip?

Es muss doch mit dieser tollen Navi ganz einfach zu lösen sein?!


Danke für die Hilfe und Mühe!


Grüße,
stefkey

Verfasst: Di 27. Nov 2007, 21:30
von Dodger77
stefkey hat geschrieben:Es muss doch mit dieser tollen Navi ganz einfach zu lösen sein?!
Ob das so einfach ist, kann ich dir nicht genau sagen. Vom Ansatz her sollte das per CSS lösbar sein. Dabei dürften die ID "activepath" und die Klasse "active" als Ansatz interessant sein, z.B.:

Code: Alles auswählen

#vpnavigation li.activepath ul,
#vpnavigation li#active ul {
  left: auto;
}
Je nachdem, ob das auch für weitere Ebenen gehen soll, muss man evtl. anpassen. Ausprobieren musst du das aber selbst.

Verfasst: Di 27. Nov 2007, 21:43
von stefkey
ohh man, das wars!

Wenn ich dir sage dass ich mich heute damit 7 Stunden!!!! beschäftigt habe, kannst du dir denken wieviel Ahnung ich habe! So ein misst, ich sollte es einfach lassen und spazieren gehen, das ist gesünder!


Danke und schönen Abend!
stefkey

Verfasst: Fr 14. Dez 2007, 23:29
von Matz82
hallo,

auch bei mir schien es am anfang zu klappen, doch leider bin ich am ende meines lateins.

Ich habe leider nicht viel Ahnung vom Anpassen der Navigation in CSS.
Gut - ich hab einige Änderungen erfolgreich gemeistert, dennoch Türmen sich fragen über fragen . Zb. will das Padding nicht so wie ich das will...und und und ....

Hätte evtl. jemand mal ein Beispiel seiner CSS für diese Navigation?
Damit ich mir das mal anschauen kann und den zusammenhang mit dieser tollen Navigation verstehe.

Vieleicht wäre es auch für viele andere eine echte Hilfe.

Schönes Wochenende euch allen!! : )

Verfasst: Sa 15. Dez 2007, 12:58
von stefkey
Hallo,

das Navigationsmodul ist wirklich sehr wichtig für Contenido, ich nutze es sehr gerne und bin immer wieder begeistert! Vielen Dank Dodger77!

Hier mal 2 meiner nav_format.css als Beispiel, ich bin allerdings nicht wirklich sicher ob das sauber programmiert ist, vielleicht doppelte oder widersprüchliche Definitionen??? Aber es funktioniert so wie es soll!

Im Layout steht folgendes:

Im Head (warum - siehe hier im Thread ganz am Anfang):

<!--[if lt IE 7]>
<script type="text/javascript">
<!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls.onmouseover=function() {
this.className+=" sfhover";
}
sfEls.onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
-->
</script>
<![endif]-->

<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/nav_format.css" rel="stylesheet" type="text/css">




Im body:

<div id="navigation"><div id="vpnavigation"><container id="1" name="Hauptnavigation" types="Navigation" mode="optional" default="">Hauptnavigation</container></div></div>


Und in meiner style.css :

#navigation {
position: relative;
float: left;
z-index: 99; /* für IE 6 hover */
}



und in meiner nav_format.css

Beispiel 1:
#vpnavigation, #vpnavigation ul { /* alle Listen */
postition: relative;
float: none;
font-family: verdana, arial, helvetica, sans-serif; text-decoration: none;
font-size: 12px;
list-style: none;
margin:0; padding:0;
padding-left: 10px;
}

#vpnavigation li { /* alle Listenelemente */
float: left;
}


/* Liste 1.Ebene */
#vpnavigation a { display: block; /* width: 113px; */ padding: 13px 15px 13px 15px;color: #BBBBBB; text-decoration: none; }

/* Liste 2.Ebene */
#vpnavigation ul ul a { padding: 3px 15px 4px 3px; color: #BBBBBB; background-color: #990000; }



/* 1. Ebene Aktiv */

#vpnavigation a:hover { color: #FFFFFF; background-color: #B02222; } /* 1.Ebene a:hover*/
li#active a { color: #FFFFFF; background-color: #B02222; } /* 1.Ebene a:activ */



/* 2. Ebene Aktiv */

#vpnavigation li.activepath a { /* Link in 1. Ebene (mit weiteren Unterebenen) */
color: #FFFFFF;
background-color: #B02222;
}
#vpnavigation li.activepath li a { /* 2. Ebene */
color: #BBBBBB;
background-color: #990000;
}
#vpnavigation li.activepath li a:hover { /* 2. Ebene a:hover */
color: #FFFFFF;
background-color: #B02222;
}
#vpnavigation li.activepath li#active a { /* 2. Ebene a:activ */
color: #FFFFFF;
background-color: #B02222;
}


#vpnavigation li ul { /* Listen 2. Ebene */
position: absolute;
background: #990000;
display: block;
width: 118px;
padding: 0;
left: -999em; /* durch "left" außerhalb des sichtbaren Bereichs wird das gleiche erreicht wie durch "display: none", kann aber auch von Textbrowser angezeigt werden */
}

#vpnavigation ul li ul li{ /* Listen 2. Ebene Textblock */
width: 118px;
}
#vpnavigation ul li ul li a{ /* Listen 2. Ebene Textblock */
padding-left:10px;
padding-right:10px;
}

#vpnavigation li li a.daddy { /* Listenelemente mit Unterpunkten */
/* background: url(../images/rightarrow.gif) center right no-repeat; */
}

#vpnavigation li ul ul { /* Listen 3. Ebene und weiter */
margin: -1em 0 0 10em;
}

#vpnavigation li:hover ul ul, #vpnavigation li.sfhover ul ul {
left: -999em;
}

#vpnavigation li:hover ul, #vpnavigation li li:hover ul, #vpnavigation li.sfhover ul, #vpnavigation li li.sfhover ul { /* Listen, die unterhalb von "gehoverten" Menüpunkte liegen */
left: auto;
margin-left: 0px;
padding-bottom: 0px;
margin-left: 5px;
}

#vpnavigation li#active { /* Listen zur aktuellen Kategorie */
font-style: normal!important;
/* background-color: #A00000; */

}

#vpnavigation li li#active { /* Listen zur aktuellen Kategorie */
/* background-color: #B02222; */
}
#vpnavigation li li:hover { /* Listen zur aktuellen Kategorie */
background-color: #B02222;
}



Beispiel 2:

#vpnavigation, #vpnavigation ul { /* alle Listen */
postition: relative;
float: none;
font-family: verdana, arial, helvetica, sans-serif; text-decoration: none;
font-size: 12px;
list-style: none;
margin:0; padding:0;
padding-left: 4px;
}

#vpnavigation li { /* alle Listenelemente */
float: left;
}

#vpnavigation ul ul { /* alle Listenelemente */
width: 562px;
}



/* Liste 1.Ebene */
#vpnavigation a { display: block; /* width: 113px; */ padding: 13px 15px 13px 15px;color: #BBBBBB; text-decoration: none; }

/* Liste 2.Ebene */
#vpnavigation ul ul a { padding: 3px 15px 3px 3px; color: #666666; background-color: #CCCCCC; }



/* 1. Ebene Aktiv */

#vpnavigation a:hover { color: #FFFFFF; background-color: #B02222; } /* 1.Ebene a:hover*/
li#active a { color: #FFFFFF; background-color: #B02222; } /* 1.Ebene a:activ */



/* 2. Ebene Aktiv */

#vpnavigation li.activepath a { /* Link in 1. Ebene (mit weiteren Unterebenen) */
color: #FFFFFF;
background-color: #B02222;
}
#vpnavigation li.activepath li a { /* 2. Ebene */
color: #666666;
background-color: #CCCCCC;
}
#vpnavigation li.activepath li a:hover { /* 2. Ebene a:hover */
color: #FFFFFF;
background-color: #B02222;
}
#vpnavigation li.activepath li#active a { /* 2. Ebene a:activ */
color: #FFFFFF;
background-color: #B02222;
}


#vpnavigation li ul { /* Listen 2. Ebene */
position: absolute;
background: #CCCCCC;
display: block;
/* width: 118px; */
padding: 0;
left: -999em; /* durch "left" außerhalb des sichtbaren Bereichs wird das gleiche erreicht wie durch "display: none", kann aber auch von Textbrowser angezeigt werden */
}

#vpnavigation ul li ul li{ /* Listen 2. Ebene Textblock */
/* width: 118px; */
}
#vpnavigation ul li ul li a{ /* Listen 2. Ebene Textblock */
padding-left:16px;
padding-right:16px;
}

#vpnavigation li li a.daddy { /* Listenelemente mit Unterpunkten */
/* background: url(../images/rightarrow.gif) center right no-repeat; */
}

#vpnavigation li ul ul { /* Listen 3. Ebene und weiter */
margin: -1em 0 0 10em;
}

#vpnavigation li:hover ul ul, #vpnavigation li.sfhover ul ul {
left: -999em;
}

#vpnavigation li:hover ul, #vpnavigation li li:hover ul, #vpnavigation li.sfhover ul, #vpnavigation li li.sfhover ul { /* Listen, die unterhalb von "gehoverten" Menüpunkte liegen */
left: 0;
margin-left: 0px;
padding-bottom: 0px;
margin-left: 8px;
}

#vpnavigation li#active { /* Listen zur aktuellen Kategorie */
font-style: normal!important;
/* background-color: #A00000; */

}

#vpnavigation li li#active { /* Listen zur aktuellen Kategorie */
/* background-color: #B02222; */
}
#vpnavigation li li:hover { /* Listen zur aktuellen Kategorie */
background-color: #B02222;
}

#vpnavigation li.activepath ul,
#vpnavigation li#active ul {
left: 0;
margin-left: 0px;
padding-bottom: 0px;
margin-left: 8px;
}




Die Kommentierung in den nav_format Styles sind eventuel nur für mich verständlich :)


Grüße
stefkey

Verfasst: Sa 15. Dez 2007, 18:25
von Matz82
Hallo stefkey,

ich bin wirklich überrascht über deine Mühe in deinem Post! :) vielen vielen Dank.

Ich werde es gleich morgen alles probieren und ich bin überzeugt, so wie du es dargestellt hast, werde ich es auch begreifen : )

So sieht man wie sich manche dinge verhalten und auch im endeffekt auswirken. Tolle arbeit von dir und doger77.


Euch allen einen schönen 3. Advent!