DHTML Menü

Gesperrt
ulisteinle
Beiträge: 53
Registriert: Sa 13. Mär 2004, 21:59
Wohnort: D -> BW -> HN
Kontaktdaten:

DHTML Menü

Beitrag von ulisteinle » So 21. Mär 2004, 16:34

Hallo Zusammen,

Ich wollte nun auch mal was beitragen:

Ich habe auf der Basis des von d2mac hier im Forum veröffentlichten Moduls und eines neuen Menü - Scripts da mal was zusammengestrickt:

Im <head> eures Layouts benötigt ihr Folgende Zeilen:

Code: Alles auswählen

<!-- JScript Menü-->
<script type="text/javascript" src="js/doiMenuDOM.js"></script>
<!-- JScript Menü -> Menüpunkte: -->
<script language="JavaScript"> 
<!-- 
CMS_CONTAINER[X] 
//--> 
</script>
<!-- JScript Menü -> Einstellungen -->
<script type="text/javascript" src="js/menu_settings.js">
</script>
Das X sollte natürlich ersetzt werden.

An der Stelle an der Später das Menü erscheinen soll dann:

Code: Alles auswählen

<div align="left"><!--DHTML NAVI--><script language="JavaScript">menue.Build();</script></div>
Das Modul sieht dass so aus:
INPUT:

Code: Alles auswählen

// Auswahl Kategorie --> Beginn
/*********************************************** 
* CONTENIDO MODUL - INPUT 
* 
* Modulname   :     DHTML-Menü
* Author      :     Uli Steinle / D2MAC 
* Copyright   :     stonecore media
* Created     :     21-03-2004 
* Modified    :     bestimmt bald
************************************************/ 
// selected category 
$selected = "CMS_VALUE[0]"; 

echo "<table cellspacing=\"0\" cellpadding=\"10\" border=\"0\"> 
        <tr valign=\"top\"> 
          <td>Kategorie wählen:</td> 
          <td> 
            <select name=\"CMS_VAR[0]\">"; 
            if($selected!="0" && $selected!=""){ 
             echo"<option value=\"0\">--- kein ---</option>"; 

            }else{ 
            echo"<option selected=\"selected\" value=\"0\">--- kein ---</option>"; 
            } 

            // fetch all categorys 
            $query = "SELECT A.idcat, A.level, 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 C.idlang='$lang' AND B.idclient='$client' ". 
                     "AND C.visible=1 ORDER BY A.idtree"; 
            // execute query 
            $db->query($query); 

            // loop result and build the options 
            while ($db->next_record()) { 

              // indent spacer 
              $spaces = "|"; 

              // how many levels 
              $levels = $db->f("level"); 

              for ($i = 0; $i < $levels; $i ++) { 
                // add 2 spaces for every level 
                $spaces = $spaces . "--"; 

              } // end for 
              
              $spaces .= ">"; 


              if ($selected == $db->f("idcat")) { 
                // selected category 
                echo "<option selected=\"selected\" value=\"". $db->f("idcat") ."\">". $spaces . $db->f("name") ."</option>"; 

              } else { 
                // category 
                echo "<option value=\"". $db->f("idcat") ."\">". $spaces . $db->f("name") ."</option>"; 

              } // end if 

            } // end while 

echo "      </select>"; 

echo "    </td> 
        </tr> 
      </table>"; 
// Auswahl Kategorie <-- Ende 
Der Output:

Code: Alles auswählen

<?php 
/*********************************************** 
* CONTENIDO MODUL - OUTPUT
* 
* Modulname   :     DHTML-Menü
* Author      :     Uli Steinle / D2MAC 
* Copyright   :     stonecore media
* Created     :     21-03-2004 
* Modified    :     bestimmt bald
************************************************/ 
include_once($cfg["path"]["contenido"].$cfg["path"]["includes"]."functions.con.php"); 

$catStart = "CMS_VALUE[0]"; 
 
echo "var menue = new TMainMenu('menue','horizontal');\n";

if ($catStart != "") { 
  $catIds = conDeeperCategoriesArray($catStart); 

  if ( is_array($catIds) ) { 
$tmp_counter = 0;

    foreach($catIds as $key=>$val) { 

      if ($key != 0) { 

        $sql = "SELECT 
                    CAT.idcat AS idcat, name ,parentid, level 

                FROM 
                    ".$cfg["tab"]["cat"]." AS CAT, 
                    ".$cfg["tab"]["cat_lang"]." AS CATLANG, 
                    ".$cfg["tab"]["cat_tree"]." AS CATLEVEL 

                WHERE 
                    CAT.idcat        = ".$val." AND 
                    CAT.idcat        = CATLANG.idcat AND 
                    CATLANG.idlang   = '$lang' AND 
                    CATLANG.visible  = '1' AND 
                    CAT.idcat        = CATLEVEL.idcat"; 

        $db->query($sql); 

//echo "/* \n".$sql."*/ \n";

while ( $db->next_record() ) { 

          $level    = $db->f("level"); 
          $name     = $db->f("name"); 
          $parent   = $db->f("parentid"); 
          $cat      = $db->f("idcat"); 
          $url      = "front_content.php?idcat=$cat&lang=$lang"; 

          switch ($level) 
          { 

           //level1 
           case (1): 
                unset($count2); 
                unset($count3); 
                unset($count4); 
                unset($count5); 
                unset($count6); 
                unset($count7); 
                unset($count8); 
                unset($count9); 
                $levels1 = 1+$count1++; 

                echo "var Menue_".$levels1." = new TPopMenu('".$name."','5','a','".$url."','".$name."');\n";
                echo "menue.Add(Menue_".$levels1.");\n\n";
                
                break; 

           //level2 
           case (2): 
                $levels2=1+$count2++; 
              
    		echo "  var Menue_".$levels1."_".$levels2." = new TPopMenu('".$name."','5','a','".$url."','".$name."');\n";
                echo "  Menue_".$levels1.".Add(Menue_".$levels1."_".$levels2.");\n\n";
    		
           break; 

           //level3 
           case (3): 

                $levels3=1+$count3++; 
                
                echo "    var Menue_".$levels1."_".$levels2."_".$levels3." = new TPopMenu('".$name."','5','a','".$url."','".$name."');\n";
                echo "    Menue_".$levels1."_".$levels2.".Add(Menue_".$levels1."_".$levels2."_".$levels3.");\n\n";
           break; 

           //level4 
           case (4): 
                $levels4=1+$count4++; 
                echo "      var Menue_".$levels1."_".$levels2."_".$levels3."_".$levels4." = new TPopMenu('".$name."','5','a','".$url."','".$name."');\n";
                echo "      Menue_".$levels1."_".$levels2."_".$levels3.".Add(Menue_".$levels1."_".$levels2."_".$levels3."_".$levels4.");\n\n";
           break; 

           //level5 
           case (5): 
                $levels5=1+$count5++; 
                echo "         var Menue_".$levels1."_".$levels2."_".$levels3."_".$levels4."_".$levels5." = new TPopMenu('".$name."','5','a','".$url."','".$name."');\n";
                echo "	       Menue_".$levels1."_".$levels2."_".$levels3."_".$levels4.".Add(Menue_".$levels1."_".$levels2."_".$levels3."_".$levels4."_".$levels5.");\n\n";
           break; 

           //level6 
           case (6): 
                $levels6=1+$count6++; 
                echo "           var Menue_".$levels1."_".$levels2."_".$levels3."_".$levels4."_".$levels5."_".$levels6." = new TPopMenu('".$name."','5','a','".$url."','".$name."');\n";
                echo "           Menue_".$levels1."_".$levels2."_".$levels3."_".$levels4."_".$levels5.".Add(Menue_".$levels1."_".$levels2."_".$levels3."_".$levels4."_".$levels5."_".$levels6.");\n\n";
           
           break; 
          } 
        } // end while 
      } // if 
    }  // end foreach 
  } // end if (is_array) 

} 
?> 
Im Script Verzeichnis erstellt ihr dann eine Datei Namens: menu_settings.js
Darin könnt ihr dann das Aussehen und verhalten der Navigation anpassen.
Beispiel:

Code: Alles auswählen

menue.SetPosition('relative',0,0);
menue.SetCorrection(0,0);
menue.SetCellSpacing(0);
menue.SetItemDimension(90,15);

menue._pop.SetItemDimension(90,15);
menue._pop.SetPaddings(2);
menue._pop.SetSeparator(125,'right','gray','');
menue._pop.SetExpandIcon(true,'',6);
menue._pop.SetFont('tahoma,verdana,arial','8pt');
menue._pop.SetBorder(1,'gray','solid');
menue._pop.SetDelay(500);
Das Menü-Script (doiMenuDOM.js) und die zugehörige Doku findet ihr hier: http://www.donnaiwan.com/doiMenu/

Viel Spass!
Uli

maTTos
Beiträge: 130
Registriert: Fr 27. Jun 2003, 14:14
Kontaktdaten:

Beitrag von maTTos » So 21. Mär 2004, 18:10

Hallo Uli! Schönes Modul, vielen Dank. Mein Feedback:

+ Die Auslagerung der Konfigurationsdatei ist top
+ Alle Zellen sind nun gleichmäßig breit
- Das Problem mit dem Gästebuch bleibt weiterhin bestehen. So sieht es aus, wenn das DTHML-Menü auf der Eingabeseite des GB eingesetzt wird:
Bild
Also, auf dieser Seite nicht verwendbar. Jemand eine Idee? :idea:

- Die doiMenuDOM.js ist jetzt ca. 50 KB groß, beim alten Menü nur ca. 12 KB. Wenn diese 50 Kb tatsächlich komplett geladen werden und man dazu noch eigenen Queltext und Bilder reinhaut, ist das für ISDN/Modem-User kaum tragbar. Wird die Datei bei jedem Aufruf neu geladen?

Ansonsten ne schöne Sache! Besten Gruß, maTTos

ulisteinle
Beiträge: 53
Registriert: Sa 13. Mär 2004, 21:59
Wohnort: D -> BW -> HN
Kontaktdaten:

Beitrag von ulisteinle » So 21. Mär 2004, 18:43

Ich hatte ein ähnliches Problem mit einem Input-Feld des Newsletters.
Dort wurde die Variable $name verwendet. diese wird auch im Menü verwendet...

Wenn also z.B. so was vorliegt:

Code: Alles auswählen

<input name="name" type="text" value="<?php echo $name ?>">
wird der inhalt von $name halt auch in das INPUT Feld geschrieben...

In deinem Fall scheint das die Variable $url zu sein.

Du hast 3 Möglichkeiten:
1. Das Input Feld Feld nicht füllen. ("value" leer lassen/löschen)
2. Die Variable im Gästebuch umbenennen
3. Die Variable im NaviModul umbenennen

Zur Grösse:
Ja, die wird, sofern sie nicht im Cache gespeichert wird, immer mitgeladen. - Man könnte versuchen im Code alle Kommentare und Zeilenumbrüche zu entfernen, ich bezweifle allerdings, ob das nennenswerte Ersparnisse bringt :-(
Um ehrlich zu sein. Ich habe das total übersehen.

ixepter
Beiträge: 65
Registriert: So 11. Jan 2004, 12:08
Kontaktdaten:

Beitrag von ixepter » So 21. Mär 2004, 20:46

Erstmals echt cooles Modul! :D
Nur habe ich noch ein Problem, ist es auch möglich die Ganze Naviagtion darin auszugeben. Wenn ich nämlich unter der Konfiguration nichts auswähle verhält sich das ganze nicht gleich wie die Hauptnavi, dann wird nämlich garnichts ausgegeben. Was mache ich faltsch? Nur wen ich eine Kategorie auswähle funkt. das ganze?!
Danke für eure Hilfe.

ixepter
Beiträge: 65
Registriert: So 11. Jan 2004, 12:08
Kontaktdaten:

Beitrag von ixepter » Di 23. Mär 2004, 16:24

ach bitte helft mir doch :cry:

peters
Beiträge: 4
Registriert: Fr 4. Jul 2003, 17:35
Wohnort: Blackburn, UK
Kontaktdaten:

DHTML menu Live

Beitrag von peters » Di 23. Mär 2004, 19:30

Uli,

köntest du ein URL geben wo man dein menu live sehen kann? Ich finde es interesant würde es aber gerne mal echt erleben.
Don't work harder, work smarter!
Pura vida!

ixepter
Beiträge: 65
Registriert: So 11. Jan 2004, 12:08
Kontaktdaten:

Beitrag von ixepter » Di 23. Mär 2004, 20:02

Ja sicher doch

http://www.ixept.com/cms/cms/front_cont ... 1&client=1

Hier ist nun eine Kategorie in der Konfiguration ausgewählt.
Mein ziel wäre es aber die ganze navi wie hier--> www.ixept.com damit wiederzugeben.

ulisteinle
Beiträge: 53
Registriert: Sa 13. Mär 2004, 21:59
Wohnort: D -> BW -> HN
Kontaktdaten:

Beitrag von ulisteinle » Mi 24. Mär 2004, 15:08

@peters: siehe ixepter´s seite. bei mir dauert´s noch, ich hab grade ziemlich viel um die ohren... - sorry.

@ixepter: ich werde mich - so gott will - erst am wochenende wieder mit der Thematik befassen können. Dann werde ich mal versuchen, ob ich da was gebacken bekomme. - Aber Bitte verlass dich nicht drauf...

Schappo
Beiträge: 26
Registriert: Mo 19. Jan 2004, 08:47
Wohnort: Nordwalde NRW
Kontaktdaten:

DHTML-Menue

Beitrag von Schappo » Mo 29. Mär 2004, 17:09

Hallo ulisteinle,

habe das Modul bei mir integriert und funktioniert wunderbar.
:lol:
Dennoch eine Frage:

Wie bekomme ich das hin, dass die Seiten auf der 1. Ebene der Hauptnavigation angeklickt werden können.
Sobald Unterebenen vorhanden sind, kann ich nicht die Hauptseite (1. Ebene) öffnen.
Muß ich dann extra eine Einleitungsseite einrichten?

Gruß Schappo und danke im voraus!

ulisteinle
Beiträge: 53
Registriert: Sa 13. Mär 2004, 21:59
Wohnort: D -> BW -> HN
Kontaktdaten:

Beitrag von ulisteinle » Mo 29. Mär 2004, 17:44

Hi Schappo,

Dieses "Feature" der Navigation is mir leider auch erst nach dem Einbau in das Modul aufgefallen...

Ist keine Unterkategorie angelegt So wird der Startartikel auch verlinkt.
Sobald aber eine Unterkategorie angelegt ist (und das Menü ein Pulldown erzeugt) wird die 1. Ebene nicht verlinkt :-(

Der Entwicker des Menüs hat sich hier leider etwas zu genau an das Windows Vorbild gehalten.

Gruß
Uli

smeusel
Beiträge: 53
Registriert: Do 18. Mär 2004, 11:27
Kontaktdaten:

Beitrag von smeusel » Do 1. Apr 2004, 00:39

ich habe das modul auch eingebaut und muss sagen, es gefällt mir sehr gut! kompliment an den programmierer.

ich habe nur eine frage: ist es möglich die größe (breite und höhe) der einzelnen mouseover-bereiche der links in der ebene 0 so anzupassen, dass sie sich der breite des textes automatisch anpassen? es gibt sonst wirklich hässliche abstände, die, gerade wenn man keine farbflächen verwendet, sehr willkürlich aussehen.

ich habe zwar das längste wort genommen und entsprechend die größe angepasst, aber das kleinste wort schaut nun aus, als hätte ich es in der menüführung verloren und nicht gewollt plaziert :-)


vielen dank,
is

ixepter
Beiträge: 65
Registriert: So 11. Jan 2004, 12:08
Kontaktdaten:

Beitrag von ixepter » Do 1. Apr 2004, 21:36

kannst du mal dieurl posten?
du kannst aber auch nur eine einzelne kategorie damit ausgeben und nicht mehrere hauptkategoriene miteinander?

smeusel
Beiträge: 53
Registriert: Do 18. Mär 2004, 11:27
Kontaktdaten:

Beitrag von smeusel » Fr 2. Apr 2004, 17:07

ixepter hat geschrieben:kannst du mal dieurl posten?
du kannst aber auch nur eine einzelne kategorie damit ausgeben und nicht mehrere hauptkategoriene miteinander?
falls du mich damit meinst :-)

leider ist die seite noch nicht online, nur auf einen internen testserver (noch).

ixepter
Beiträge: 65
Registriert: So 11. Jan 2004, 12:08
Kontaktdaten:

Beitrag von ixepter » Sa 3. Apr 2004, 10:13

schade :cry:
aber schafst du es wircklich alle kategorien auszugeben damit diese Modul die Hauptnavi erstetzt? Ich kann nämlich nur einzelne Kategorien damit ausgeben :(

smeusel
Beiträge: 53
Registriert: Do 18. Mär 2004, 11:27
Kontaktdaten:

Beitrag von smeusel » Mo 5. Apr 2004, 15:14

alle kategorien bis auf die "haupt-start-kategorien". aber wenn man das weiss, dann schreibt man halt keinen startartikel in die kategorie level 0 sondern fängt bei level 1 an :-)

Gesperrt