Zum Inhalt springen

Menüs basierend auf CSS

Erstellt am 7. März 2006 · 136 Antworten · letzte Antwort am 16. November 2006 · Seite 4 von 7

Tags: Frage

donenik ·
just2b schrieb

Hallo,

donenik schrieb

Boa wie cool bist du denn!!!! Ich habe gerade anfangen mir die Zähne dran auszubeißen das Layermenü XHTML tauglich hinzukriegen!

8-) vielen herzlichen Dank! Veröffentlich doch einen Link dann später zu deiner Umsetzung!

georg

Ja nen kleinen Einblick kann ich schon gewähren denke ich. Funzt noch nicht 100%ig wie das mal soll und Text is auch noch nich drin. Das größte Problem is allerdings das ich den Hintergrund transparent gemacht habe (ich weiß der scheiß ie kann das nich) und das sich das dann beim Mousse Over über die ganze Höhe der Seite erstrecken soll. Und das natürlich ohne Scrollbalken wenns nich sein muss. Scheiß Perfektionismus oder?
Also hier gucken: http://franziska.hensdiek.com

just2b ·

hehe Perfektionismus... sag mir nichts 😉

Sitz jetz 3 Tage am Menü 😃
Neuigkeiten die es bald geben wird:
- Menü schließt nicht sofort wenn die Maus außerhalb
- Version mit Icons
- jeder Menüpunkt kann vom Redakteur anders gestylt werden, dh Schriftgröße, Icon, Hintergrund, whatever, ist eine eigene Extension geworden (die natürlich auch bei anderen Menüs funktioniert.
Preview
Bild: p19156.typo3server.info/…/previewMenu.gif

lg georg

donenik ·

Jaja alles könnte so leicht sein 😃
Mit dem Menü hast du dir ja echt was vorgenommen! Hatte mit Extensions schreiben bis jetzt noch nicht viel am Hut, hab nur mal aus dem Gästebuck ein Bestellformular gemacht, mit Preis ausrechnen und so. Aber es hat funktioniert :-)

just2b ·
donenik schrieb

Mit dem Menü hast du dir ja echt was vorgenommen!

is ja schon fertig 😉)))

nickno ·

Echt vorbildlich, deine Zeit für so ein HowTo zu opfern. Kompliment.

Man sollte nur vllt noch einmal überdenken, wie man diese HowTos sinnvoll ins Forum integriert. Dieses HowTo ist 2 Monate alt, aber der Thread schon dermassen vollgeschrieben, dass Fragen kreuz und quer gestellt werden (müssen).

Wäre eine eigene Sektion "Howtos" nicht vielleicht sinnvoller? Zu jedem Howto kommt ein Link zu einem Thread, wo diskutiert werden kann. So könnte der Hauptthread nur von dem Ersteller genutzt werden um Aktualisierungen u.ä. zu posten und die (für viele uninteressante) Diskussion findet in einem weiteren Thread statt bzw. die Leute sollten lieber das Forum durchsuchen, um bspw. zu wissen, wie man eine CSS oder JS-Datei einbindet. Schliesslich hängen diese Fragen nur indirekt mit dem Menü zusammen.

Nur ein Vorschlag...

Gruß

just2b ·
nickno schrieb

Wäre eine eigene Sektion "Howtos" nicht vielleicht sinnvoller?

Einfach links mal auf "HowTos" klicken 😉

sonst geb ich dir schon recht und ist auch angedacht!

georg

nickno ·
just2b schrieb

Einfach links mal auf "HowTos" klicken 😉

Das hatte ich schon gesehen, aber dort auch die tausend Posts von anderen Nutzern 😉

just2b ·
nickno schrieb

Das hatte ich schon gesehen, aber dort auch die tausend Posts von anderen Nutzern 😉

Sei doch froh dass es mehr werden 😉

Und sonst einfach nen Thread aufmachen und auf ein HowTo verweisen, ist ja keiner böse 😉))

georg

moadin ·

Hallo,

erstmal vielen Dank an just2b für die Programmierung des Menüs! Es ist wirklich klasse!

Hier im Forum wurde schon einmal angesprochen, dass das Menü ab einem bestimmten Punkt nach rechts aufklappen sollte.
Genau das Problem habe ich auch, mir gehen nämlich die Unterpunkte des letzten horizontalen Menüpunktes neben dem Bildschirm rechts am Rand verloren.
Hat jemand eine Idee wie man dafür das JS umprogrammieren muss?

Grüße,

moadin

just2b ·

hallo,

vielen dank! das ist eher mit css zu lösen! also mit optionsplit für den letzten punkt eine andere class und dann für dies gezielt ändern...

js is nur fürn IE, dass es auch dort aufgeht, mehr nicht

moadin ·

Hallo just2b,

was aber wenn beispielsweise der vorletzte horizontale Punkt einige Untermenüs hat? Die klappen dann auch immer nach rechts auf und sind dann irgendwann weg...
Oder einer eine höhere Auflösung hat, dann muss ja nicht nach links aufgeklappt werden...

moadin

just2b ·
moadin schrieb

Hallo just2b,

was aber wenn beispielsweise der vorletzte horizontale Punkt einige Untermenüs hat? Die klappen dann auch immer nach rechts auf und sind dann irgendwann weg...
Oder einer eine höhere Auflösung hat, dann muss ja nicht nach links aufgeklappt werden...

moadin

ja schon alles richtig... ist aber denk ich bei den layer-menüs auch nicht anders, oder irr ich mich? naja mal schauen ob mir was einfällt dazu,.. oder wem anderen, hilfe = willkommen 😉

georg

moadin ·

Hi just2b,

auf grainau.de wird bspw. ein DHTML-Menü eingesetzt, das entsprechend der Fensterbreite das Menü nach Links bzw. Rechts aufklappt. Allerdings wird das halt über Javascripts (onmouseover/out)gesteuert und ein Blick in den Quellcode zeigt dass das für TYPO3 nicht unbedingt geeignet ist.
Da gefällt mir deine kompakte Version schon sehr viel besser...!

Wäre ja super wenn es dafür eine Lösung gäbe.
Ich könnte mir vorstellen irgendwie ein JS einzubinden dass entsprechend den margin-right den document.write der CSS-Klasse überschreibt.
Ist bisher aber nur eine Idee.

Viele Grüße,

moadin

MrTwister ·

Hi,
danke just2b für das geile HowTo.
Genau was ich vergeblich gesucht hatte.
Ich hatte mich schon bei der Templateerstellung für ein CSS basiertes Dropdown Menu entschieden.
Bei der Einbindung in Typo wurde die Liste aus den Menüeinträgen im BE einfach nicht korrekt angezeigt; bis ich auf dein HowTo gestoßen bin.
Hab dein Typoscript eingefügt und zack - JUBEL juhuhuhuuhuh - es funktioniert.

Danke dir vielmals!

Hier könnt ihr euch das Menu anschaun:
Die Seite soll später unter http://www.inbits.de erreichbar sein.
Momentan noch unter http://www.inbits.de/home/index.php?id=8

Gruß Andreas

MrTwister ·

Nochmal hi,
das Menü funktioniert jetzt soweit allerdings habe ich noch ein kleines Problem bei der Link Formatierung in den Submenüs.
1.)
Ich würde gerne dem Linktext, zwecks css Formatierung, im <a>-Tag ein <span> Element voranstellen.
So solls aussehn:
-> <a href="#home"><span class="top_nav">Startseite</span></a>
siehe Zeile 4

Hab das mal mit linkWrap probiert, das stellt mir das <span>-Tag aber leider um das <a>-Tag ausenrum (<span><a></a></span>)

2.)
Außerdem soll beim letzten Menüpunkt das Menü weiter links dargestellt werden. Hierzu müsste ich dem letzten <ul> von den Submenüs einen anderen "style" zuweisen - aber wie über ts? siehe Zeile 9

So sollte der Quelltext aussehn:

...
<li><a href="#Beispiel">Unternehmen</a>
  <ul>
    <li><a href="#Beispiel"><span class="navi-sub">Wir über uns</span></a></li>
    <li><a href="#Beispiel"><span ...
  </ul>
</li>
<li><a href="#Beispiel">Referenzen</a>
  <ul style="position: absolute; top: 33px; left: -76px;">
    <li><a href="#Beispiel"><span class="navi-sub">Branchen</span></a></li>
    <li><a href="#Beispiel"><span ...
  </ul>
</li>
...

Edit:
zu 1.)
Hab das ganze noch mit stdWrap getestet - bringt aber leider keine Veränderung - Zeile 23
Der Typoscript-Code sieht folgendermaßen aus:

subparts {
      # Ersetzen von "navigation" Dropdown Menu
    navigation = HMENU
    navigation {
      special = directory
      special.value = 2
      1 = TMENU
      1 {
        expAll = 1
        noBlur = 1
        NO = 1
        NO.wrapItemAndSub = <li>|</li>

        IFSUB = 1
        IFSUB.wrapItemAndSub = <li>|</li>
        ACTIFSUB < .IFSUB
      }
      
      2 < .1	
      2 {
        wrap = <ul>|</ul>

        # NO.stdWrap = <span class="navi-sub">|</span>

      }
      
      3 < .2
      4 < .2
    }

Vielleicht kann mir dabei jemand helfen - Danke
Gruß Andreas

renaade ·

Hallo MrTwister,

was willst du denn erreichen? Ein padding-left für die Links im Untermenü? Das könntest du auch komplett über das CSS lösen, z.B.

ul#navigation li ul li a {
padding-left: 5px;
}

Ansonsten würde ich die Klasse ist das <li> schreiben, z.B. so:

2 {
wrap = <ul>|</ul>
NO.wrapItemAndSub = <li class="top_nav">|</li>
}

CSS dazu:
ul#navigation li ul li.top_nav a {
/* deine Styleangaben für die Subnavi */
}

Vielleicht hilft es.

P.S. Ich benutze statt des Javascript übrigens eine .htc-Datei mit Behaviors. Hier kann man das Skript herunter laden: http://www.xs4all.nl/~peterned/csshover.html. Es löst ausser dem Problem mit den Klappmenüs auch noch das mit dem Farbwechsel bei CSS-Buttons. Und es funktioniert auch dann, wenn Javascript ausgeschaltet sein sollte.

MrTwister ·

Hi,
danke erstmal für deine Antwort.

Zu 1.)
Stimmt, wegen dem padding das könnte ich auch in den link tag schreiben.
Mal schaun ob dann auch "display:block" funktioniert
-> So soll das ganze Feld anwählbar sein nicht nur der Text als Link.

Mit "display:block" im a-Tag funktioniert leider nicht. Ist auch wieder mal nur für den ie :/ Müsste also doch ein <span> außenrum.

Zu 2.)
Aber wie bekomm ich es hin nur dem letzten <ul> des listings einen anderen style zu geben?

renaade ·

Hallo MrTwister,

gern geschehen o.O

zu 1.) Wenn das gesamte Linkfeld klickbar sein soll, muss das display:block auch in die "a"-Formatierungen.

zu 2.) Ich würde versuchen, es über eine IF-Schleife zu lösen, die den letzten Eintrag im Menü ausliest und ihm die alternative Formatierung mitgibt. Aber um das in TypoSkript umzusetzen, bin ich noch viel zu sehr Anfängerin 🙁 .

Über die Lösung würde ich mich aber genauso freuen wie du.

Grüße, Renaade

NetPartyzan ·

Moin Moin, hab mich jetzt ne Weile mit dem Menü beschäftigt, es angepasst, und weitere Schnipsel mit einfließen lassen.

Mein Ziel ist es, das Menu möglichst flexibel in Größe und Position erscheinen zu lassen, und desweiteren eine möglichst genaue, browserübergreifende, Darstellung zu erreichen.

Aber ein Prob. (bis jetzt) ( #evil# ) hab ich da noch!!! (Siehe Anhang)

Hab das ganze mal ein wenig dokumentiert, hier der link:
Download: http://www.pixelcruiser.net/fileadmin/downloads/CSS-MENU.zip

Würd mich freuen, wenn jemand das mal checkn könnte!!!
Und DEN Tip für mich hätte!!!
Vielleicht hab ich da ja auch totalen Schrott fabriziert 😢 .
Naja ganz so schlimm wirds schon net sein #giggle# .
Thx und MfG Joh 8-)

MrTwister ·

Hi,
mmh ich hab mir alles runtergeladen und im IE version 6.0.2900.2180.xpsp_sp2_gdr.050301-1519
angeschaut.
Konnte keinen Fehler feststellen.
Wahrscheinlich ist es nur ein Darstellungsfehler vom IE 7.
Soviel ich weiß befindet sich der IE 7 sowieso noch in der Beta!?

@renaade
bin leider auch noch Anfänger was typoscript betrifft. Hab mich dazu entschieden den letzten Menüpunkt doch erstmal unverändert anzuzeigen. So schlimm siehts ja net aus o.O