Neues Modul: vpNavigation

Huhnduluk
Beiträge: 32
Registriert: Mo 25. Jun 2007, 10:58
Kontaktdaten:

Beitrag von Huhnduluk » Di 3. Jul 2007, 10:02

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

motion7
Beiträge: 9
Registriert: Mi 30. Mai 2007, 16:08
Kontaktdaten:

Beitrag von motion7 » Di 21. Aug 2007, 16:41

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); 

?>

frytux
Beiträge: 21
Registriert: Mi 6. Aug 2003, 16:12
Kontaktdaten:

Beitrag von frytux » Fr 7. Sep 2007, 16:12

"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:

winston
Beiträge: 35
Registriert: Di 30. Okt 2007, 12:20
Kontaktdaten:

Beitrag von winston » Di 30. Okt 2007, 12:25

ich möchte die gesamte navigation gerne zentrieren. wie ist das möglich?

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

Jojoweb
Beiträge: 29
Registriert: Do 21. Apr 2005, 14:59
Kontaktdaten:

Beitrag von Jojoweb » Fr 2. Nov 2007, 12:57

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

mko
Beiträge: 123
Registriert: Di 1. Feb 2005, 10:26
Wohnort: Österreich
Kontaktdaten:

Beitrag von mko » Di 6. Nov 2007, 22:06

Gibt es eine Möglichkeit den 1 Menüpunkt (bei mir Home) auszublenden und erst die weiteren Kategorien anzuzeigen?

Vielen Dank...

marphin
Beiträge: 196
Registriert: Mo 24. Nov 2003, 13:01

Beitrag von marphin » Fr 9. Nov 2007, 09:52

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

Dodger77
Beiträge: 3625
Registriert: Di 12. Okt 2004, 20:00
Wohnort: Voerde (Niederrhein)
Kontaktdaten:

Beitrag von Dodger77 » Fr 9. Nov 2007, 10:02

@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.

slecram
Beiträge: 54
Registriert: Do 1. Nov 2007, 16:05
Kontaktdaten:

Beitrag von slecram » Di 20. Nov 2007, 21:45

moin,
kann mir einer sagen, wie ich alle kategorien ausgege, egal ob ein startartikel vorhanden ist, oder nicht?

Gruß

stefkey
Beiträge: 556
Registriert: Mi 19. Okt 2005, 16:10
Wohnort: Heidelberg
Kontaktdaten:

Beitrag von stefkey » So 25. Nov 2007, 23:34

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

Dodger77
Beiträge: 3625
Registriert: Di 12. Okt 2004, 20:00
Wohnort: Voerde (Niederrhein)
Kontaktdaten:

Beitrag von Dodger77 » Di 27. Nov 2007, 21:30

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.

stefkey
Beiträge: 556
Registriert: Mi 19. Okt 2005, 16:10
Wohnort: Heidelberg
Kontaktdaten:

Beitrag von stefkey » Di 27. Nov 2007, 21:43

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

Matz82
Beiträge: 191
Registriert: Fr 26. Mai 2006, 13:10
Wohnort: Ilmenau
Kontaktdaten:

Beitrag von Matz82 » Fr 14. Dez 2007, 23:29

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!! : )
Viele Grüße,
Mathias


======================
Der letzte macht das Netz aus ! ;)
======================

stefkey
Beiträge: 556
Registriert: Mi 19. Okt 2005, 16:10
Wohnort: Heidelberg
Kontaktdaten:

Beitrag von stefkey » Sa 15. Dez 2007, 12:58

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

Matz82
Beiträge: 191
Registriert: Fr 26. Mai 2006, 13:10
Wohnort: Ilmenau
Kontaktdaten:

Beitrag von Matz82 » Sa 15. Dez 2007, 18:25

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!
Viele Grüße,
Mathias


======================
Der letzte macht das Netz aus ! ;)
======================

Gesperrt