Lars Gusewski: Menü erstellen

Hallo,

ich wurde gebeten für den Lehrstuhl, an dem ich arbeite, eine neue Homepage zu erstellen. Die Seiten sollen am Kopf eine Navigationsleiste mit ca. 6-8 Punkten haben. Wenn man mit der Maus darüber geht, soll sich der Hintergrund ändern, bei einem Klick soll darunter, falls nötig, eine zweite Navigationsleiste sichtbar werden, oder einfach der Link. Jetzt habe ich mir überlegt das ich das ganze am besten wohl mit dem DOM "System" mache. FÜr die erste Leiste könnte ich doch eine Tabelle nehmen und die Links mit onMouse (oder so ähnlich) versehen. Per DOM könnten dann doch die Inhalte der zweiten Tabelle sichtbar und/oder verändert werden. Der restliche Inhalt ist statisch und wird per xhtml beschrieben. Aus den Beispielen und Texten der SelfHTML bin ich noch nicht 100% schlau geworden. Daher nun meine Fragen: Sind meine Grundsatzüberlegungen soweit in Ordnung, oder habe ich da etwas grundsätzlich nicht verstanden? Ist das, wie ich es vorhabe, praktikabel, oder gibt es einfachere Möglichkeiten? Wo kann man noch etwas nachlesen oder weitere Beispiele finden.

Danke für Eure Hilfe, Lars

  1. hi

    ich wurde gebeten für den Lehrstuhl, an dem ich arbeite, eine neue Homepage zu erstellen. Die Seiten sollen am Kopf eine Navigationsleiste mit ca. 6-8 Punkten haben. Wenn man mit der Maus darüber geht, soll sich der Hintergrund ändern, bei einem Klick soll darunter, falls nötig, eine zweite Navigationsleiste sichtbar werden, oder einfach der Link. Jetzt habe ich mir überlegt das ich das ganze am besten wohl mit dem DOM "System" mache. FÜr die erste Leiste könnte ich doch eine Tabelle nehmen und die Links mit onMouse (oder so ähnlich) versehen. Per DOM könnten dann doch die Inhalte der zweiten Tabelle sichtbar und/oder verändert werden. Der restliche Inhalt ist statisch und wird per xhtml beschrieben. Aus den Beispielen und Texten der SelfHTML bin ich noch nicht 100% schlau geworden. Daher nun meine Fragen: Sind meine Grundsatzüberlegungen soweit in Ordnung, oder habe ich da etwas grundsätzlich nicht verstanden? Ist das, wie ich es vorhabe, praktikabel, oder gibt es einfachere Möglichkeiten? Wo kann man noch etwas nachlesen oder weitere Beispiele finden.

    ja, grundsätzlich kann man das so machen. allerdings möchte ich doch vorschlagen, das ganze dokument in XHTML zu schreiben, wärend für die menüs natürlich DOM verwendet wird, was sinn macht.

    was hast du am selfhtml-teil dazu nicht verstanden?

    Fabian

    ps: bei dem wort "Lehrstuhl" stutze ich ein wenig: "Sitzt" du auf dem Lehrstuhl oder wie? Ist das wieder so ein "HTML für n00bs"-Kurs?
    Ohne dir zu nahe treten zu wollen, falls das ganze mit professionellem Webdesign zusammenhängt, dann denke ich, dass es dir zuzutrauen sein sollte, so ein Menü _ohne_ Hilfe hinzubekommen, denn sonst hätte ein solcher "Lehrstuhl" wohl kaum Sinn.

    1. Hi!

      ps: bei dem wort "Lehrstuhl" stutze ich ein wenig: "Sitzt" du auf dem Lehrstuhl oder wie? Ist das wieder so ein "HTML für n00bs"-Kurs?
      Ohne dir zu nahe treten zu wollen, falls das ganze mit professionellem Webdesign zusammenhängt, dann denke ich, dass es dir zuzutrauen sein sollte, so ein Menü _ohne_ Hilfe hinzubekommen, denn sonst hätte ein solcher "Lehrstuhl" wohl kaum Sinn.

      Ein Lehrstuhl ist die übliche Bezeichnung für den Lehrkörper an einer Uni welcher für einen sehr speziellen Bereich der universitären Ausbildung verandwortlich ist: zB. der Lehrstuhl für Projektierung am Institut Verarbeitungstechnik der Fakultät Maschinenbau der Tech-Uni DD.

      Gruß Herbalizer

    2. hi

      ja, grundsätzlich kann man das so machen. allerdings möchte ich doch vorschlagen, das ganze dokument in XHTML zu schreiben, wärend für die menüs natürlich DOM verwendet wird, was sinn macht.

      Klar, aber xhtml ist doch in erster Linie statisch, die Version 1.1 sogar noch mal um einige Tags reduziert, z.B. gibt es da ja keine Frames mehr. Ist ja auch nicht weiter schlimm.

      was hast du am selfhtml-teil dazu nicht verstanden?

      Nun, je mehr ich mir das da durchlese, desto weniger blicke ich durch. z.B. die Browserunterschiede. Ich halte mich bei einer anderen Seitensammlung eigentlich recht stur an die xhtml 1.0 Regeln (per Validator auch geprüft) und die meisten aktuellen Browser stellen das auch gut dar. Das will ich hier also auch. Für mich als Einsteiger in die "Dynamische" Materie ist es schwierig die Propitären Sachen von den Offiziellen W3.org zu unterscheiden und erst einmal einen Ansatz zu finden.

      Fabian

      ps: bei dem wort "Lehrstuhl" stutze ich ein wenig: "Sitzt" du auf dem Lehrstuhl oder wie? Ist das wieder so ein "HTML für n00bs"-Kurs?
      Ohne dir zu nahe treten zu wollen, falls das ganze mit professionellem Webdesign zusammenhängt, dann denke ich, dass es dir zuzutrauen sein sollte, so ein Menü _ohne_ Hilfe hinzubekommen, denn sonst hätte ein solcher "Lehrstuhl" wohl kaum Sinn.

      Aehm, schon mal studiert? :-) Lehrstuhl ist die Bezeichnung für Fachbereiche an Hochschulen. Ich bin hier Hiwi an einem dieser Lehrstühle, allerdings kein Informatiker, sondern komme aus dem Artfremden Bereich Bauwesen. Und ich "armer" Kerl soll halt unseren Webauftritt neu programmieren, während die Inhalte vorgegeben werden.

      Gruss, Lars

      1. hi

        ja, grundsätzlich kann man das so machen. allerdings möchte ich doch vorschlagen, das ganze dokument in XHTML zu schreiben, wärend für die menüs natürlich DOM verwendet wird, was sinn macht.

        Klar, aber xhtml ist doch in erster Linie statisch, die Version 1.1 sogar noch mal um einige Tags reduziert, z.B. gibt es da ja keine Frames mehr. Ist ja auch nicht weiter schlimm.

        natürlich ist (X)HTML statisch. für "Dynamik" benötigst du eben zusätzliche Sprachen, ob server- oder client-seitig ist dabei zweckbestimmt.

        was hast du am selfhtml-teil dazu nicht verstanden?

        Nun, je mehr ich mir das da durchlese, desto weniger blicke ich durch. z.B. die Browserunterschiede. Ich halte mich bei einer anderen Seitensammlung eigentlich recht stur an die xhtml 1.0 Regeln (per Validator auch geprüft) und die meisten aktuellen Browser stellen das auch gut dar. Das will ich hier also auch. Für mich als Einsteiger in die "Dynamische" Materie ist es schwierig die Propitären Sachen von den Offiziellen W3.org zu unterscheiden und erst einmal einen Ansatz zu finden.

        ja, deshalb: DOM nehmen. soll der NN4 eben ne statische Seite bekommen.

        ps: bei dem wort "Lehrstuhl" stutze ich ein wenig: "Sitzt" du auf dem Lehrstuhl oder wie? Ist das wieder so ein "HTML für n00bs"-Kurs?
        Ohne dir zu nahe treten zu wollen, falls das ganze mit professionellem Webdesign zusammenhängt, dann denke ich, dass es dir zuzutrauen sein sollte, so ein Menü _ohne_ Hilfe hinzubekommen, denn sonst hätte ein solcher "Lehrstuhl" wohl kaum Sinn.

        Aehm, schon mal studiert? :-) Lehrstuhl ist die Bezeichnung für Fachbereiche an Hochschulen. Ich bin hier Hiwi an einem dieser Lehrstühle, allerdings kein Informatiker, sondern komme aus dem Artfremden Bereich Bauwesen. Und ich "armer" Kerl soll halt unseren Webauftritt neu programmieren, während die Inhalte vorgegeben werden.

        öhm, nö? ich bin vom studium noch genau drei Schuljahre entfernt. ich hoffe, dass meine unwissenheit zu entschuldigen ist ;-)
        da es als "Artsfremder" wahrscheinlich eine Art "Vorstellung" (ich meine nicht Präsentation...)  für das Bauwesen wird wünsche ich dir viel Spass...

        Fabian

  2. Hallo,

    ca. 6-8 Punkten haben

    Die Schriftgröße ist VIEL zu KLEIN! Je nach verwendeter Schriftart ist das fast garnicht zu lesen.

    [...]

    Ja das ist alles möglich. Allerdings muß (sollte!) man dafür nicht auf Tabellen zurückgreifen, ein paar div's und CSS reichen dafür. Und den Rest macht man u.A. mit dem DOM, allerdings solltest du die Navigation nicht allein auf DOM-Manipulation aufbauen, sondern alternativ auch die jenigen denken die Javascript ausgeschaltet haben oder deren Browser zu doof ist.

    Ansonsten steht eigentlich alles in SelfHTML, ein bissel nachdenken muß man aber auch noch.

    Gruß Herbalizer

    1. hi herbalizer

      ca. 6-8 Punkten haben

      Die Schriftgröße ist VIEL zu KLEIN! Je nach verwendeter Schriftart ist das fast garnicht zu lesen.

      oh oh, da winkt der zaunpfal nicht, er erschlägt mich ;-)
      also wirklich, glaubst du ernsthaft, dass jemand 6-8pt schriftgröße verwenden würde? er meinte IMHO die _Anzahl_ der Menüpunkte, was dann durchaus Sinn ergibt...

      Fabian

      ps: nimms nicht persönlich, konnte das halt nicht so stehen lassen ;-)

      1. oh oh, da winkt der zaunpfal nicht, er erschlägt mich ;-)

        Ich winke immer mit Zäunen.

    2. Hallo,

      ca. 6-8 Punkten haben

      Die Schriftgröße ist VIEL zu KLEIN! Je nach verwendeter Schriftart ist das fast garnicht zu lesen.

      Hallo du Scherzkeks.

      Ja das ist alles möglich. Allerdings muß (sollte!) man dafür nicht auf Tabellen zurückgreifen, ein paar div's und CSS reichen dafür. Und den Rest macht man u.A. mit dem DOM, allerdings solltest du die Navigation nicht allein auf DOM-Manipulation aufbauen, sondern alternativ auch die jenigen denken die Javascript ausgeschaltet haben oder deren Browser zu doof ist.

      Da hat er doch keine Probleme mit, wenn er seine Navigation mit DOM Manipulation aufbaut. Er macht einfach für jedes Untermenü ein eigenes Div, die tragen eine Überschrift mit dem Menüpunkt zu dem sie gehören und stehen fein säuberlich unterinander. Und nur wenn JavaScript an ist, dann werden sie nach dem laden versteckt und erst bei Bedarf eingeblendet.

      Ansonsten steht eigentlich alles in SelfHTML, ein bissel nachdenken muß man aber auch noch.

      Wo wär denn sonst der Spaß?

      Schöne Grüße,

      Stefan

    3. Hallo,

      ca. 6-8 Punkten haben

      Die Schriftgröße ist VIEL zu KLEIN! Je nach verwendeter Schriftart ist das fast garnicht zu lesen.

      Menüpunkte! Nicht Schriftgrössenpunkte! :-)

      Gruss, Lars

    4. Hallo,

      Ja das ist alles möglich. Allerdings muß (sollte!) man dafür nicht auf Tabellen zurückgreifen, ein paar div's und CSS reichen dafür. Und den Rest macht man u.A. mit dem DOM, allerdings solltest du die Navigation nicht allein auf DOM-Manipulation aufbauen, sondern alternativ auch die jenigen denken die Javascript ausgeschaltet haben oder deren Browser zu doof ist.

      Wenn ich nun aber den Hintergrund beim Überfahren mit der Maus ändern möchte, das ganze Rechteckig und nebeneinander, statt untereinander, sein soll und ich nicht 30 Grafiken erstellen möchte, zu der es immer ein Gegenstück gibt, dann fällt mir im Moment nur eine Tabelle ein, deren Hintergrundfarbe ich per Event ändere. Eine dafür entsprechende CSS Formulierung kenne ich im Moment nicht.

      Ansonsten steht eigentlich alles in SelfHTML, ein bissel nachdenken muß man aber auch noch.

      Danke, das mache ich auch. Nur stehe ich unter Zeitdruck da die Seite in vier Wochen zu Semesterbeginn fertig sein soll. Und reines (x)html kann ich, das habe ich ausreichend gemacht. Nur noch nie etwas dynamisches.

      Gruss, Lars

      1. Aloha!

        Danke, das mache ich auch. Nur stehe ich unter Zeitdruck da die Seite in vier Wochen zu Semesterbeginn fertig sein soll. Und reines (x)html kann ich, das habe ich ausreichend gemacht. Nur noch nie etwas dynamisches.

        Das ist aber auch sehr einfach.

        Im Prinzip brauchst du zwei Javascript-Funktionen, die dir Layer einblenden. Dazu gibts IIRC im DHTML-Kapitel von SelfHTML Informationen - ansonsten suche im Archiv mal nach "showlayer hidelayer", da dürftest du zwei Funktionen finden, die in allen Browsern Layer ein- und ausblenden kann.

        Dann brauchst du im Prinzip nur noch die entsprechenden <div>-Layer definieren, positionieren und mit CSS anfänglich zu verstecken (visibility:hidden). Und die Links erhalten onmouseover/onmouseout-Eventhandler, die die Layer ein- und ausblenden, wenn man drübergeht. Auf die gleiche Weise veränderst du auch den Hintergrund (ist alles auch im Archiv zu finden - die Fragen kamen schon häufiger).

        - Sven Rautenberg

      2. Hallo,

        Wenn ich nun aber den Hintergrund beim Überfahren mit der Maus ändern möchte, das ganze Rechteckig und nebeneinander, statt untereinander, sein soll und ich nicht 30 Grafiken erstellen möchte, zu der es immer ein Gegenstück gibt, dann fällt mir im Moment nur eine Tabelle ein, deren Hintergrundfarbe ich per Event ändere. Eine dafür entsprechende CSS Formulierung kenne ich im Moment nicht.

        Du nimmst für die Menüleiste ein <div> und packst dort ein paar <a href="#"> rein. Somit hast du schon mal eine horizontale Menüleiste. Das kannst du dann schick mit CSS hinbiegen wie du lustig bist, der Hintergrundwechsel erfolgt via CSS:  a:hover {background: [farbe]} Um die Menüpunkte jeweils in (einigermassen) gleicher Breite zu haben kannst du mit padding-left und padding-right in den <a> herumprobieren.

        Die <div> für die Untermenüs positionierst du absolut entsprechend der Menüpunkte. Innerhalb dieser div's ist es ebenfalls nicht notwendig auf Tabellen zurückzugreifen.

        Das Ein- und Ausblenden bewerkstelligst du dann via document.getElementById('div_id').style.visibility = 'visible|hidden' (Siehe http://selfhtml.teamone.de/javascript/objekte/style.htm und http://selfhtml.teamone.de/javascript/objekte/document.htm#get_elements_by_name)

        Gruß Herbalizer