CSS-Only-Pulldown-Menü (mit JS-"Hilfsmotor" für IE)

  • Aloah nochmal ...


    ... hat sich alles erledigt :D ... hab die Seite nochmal neu geschrieben, und jetzt ist der Fehler irgendwie nich mehr da *freude*


    thx nochmal


    gruß heschii :D

    Denke nie gedacht zu haben, denn das Denken der Gedanken ist Gedankenloses denken! Denkst du, du denkst, dann denkst du nur du denkst, aber denken tust du nicht ...


    »» DerHeger

  • Halo Leute, also ich hab jetzt auch mal das Menü bei mir eingebaut, allerdings gibts da einkleines Problem (BUG) das bisher noch nicht besprochen wurde....


    In meinem neuen Layout werde ich versuchen meine gesamt HP ohne Tabellen (oder nur mit einer ganz außenrum) zu Layouten...


    jetzt hab ich das Menü eingebaut und es tut auch alles ohne Probleme (Firefox), allerdings hab ich es jetzt mal auf dem IE getestet und da tat auch fast alles, nur sind die Submenüs immer nur bis zum 3. Eintrag aufgeblieben. Nach dem 3. sind sie einfach wieder zu gegangen, ich konnte also nur Submenüs mit maximal 3 Einträgen machen.
    Das Menü liegt in einem <div id="menu"> das die Attribute top, left, position, border u.s.w. hat


    Jetzt kommt das verwunderliche :


    Wenn ich mein #menu mit top: 130px z.b. Positioniere kann IE wie gesagt nur 3 Submenueintrage öffnen, wenn ich aber die Zeile entferne und mein Menü dann oben in meinem Div festhängt (statt unten wie es eigntlich sein sollte) dann funktioniert das Menü einwandfrei....


    Das ganze Problem ist natürlich nur bei IE, bei Firefox klappt alles ganz wunderbar.....


    PLEASE HELP ME !


    http://www.qgabi.de/web/mit_top.php // die Seite mit top: 130px;


    http://www.qgabi.de/web/ohne_top.php // die Seite ohne top, da funktioniert alles

  • Hallo,


    benutze für das Menü nun folgende Codes


    CSS:


    menu.html


    Nun würde ich aber Menu1 eine andere Farbe als Menu2 zuweisen
    wie kan ich das realisieren ?


    Gruss und Danke Alf

  • Hallo,


    ich habe nun schon alles ausprobiert aber scheinbar bin ich blö ...... :-)
    Ich schaffe es nicht einmal die einzelnen Menüpunkte in eine Tabelle
    zu packen, da wenn ich mit <td></td> arbeite sich die Menüstruktur
    ( nebeneinander ) auflöst und auch die noch offene Frage mit den verschiedenen Farben klappt nicht.


    Für Hilfe wäre ich super dankbar und wenn es nur das mit der Tabelle ist.


    Gruss und Danke Alf

  • Hi, ...


    »» Nun würde ich aber Menu1 eine andere Farbe als Menu2 zuweisen



    geb dem <a> von Menu 2 doch einfach nen CLASS name ... un dann weis diesem ne andere Farbe zu.


    warum du das in ne Tabelle paken willt kapier ich nicht ...


    gruß heschii

    Denke nie gedacht zu haben, denn das Denken der Gedanken ist Gedankenloses denken! Denkst du, du denkst, dann denkst du nur du denkst, aber denken tust du nicht ...


    »» DerHeger

  • danke fü die Antwort,


    das mit dem extra css habe ich schon probiert,
    wenn ich immer die Zeile :

    PHP
    <ul id="nav" class="dropdown" style="padding:0;margin:0;">


    vor der <li><a .........> einfügen benötigt es ewigkeiten zum laden
    obwohl ich die css nicht als externe Datei habe sondern mit in die
    Hauptseite eingefügt.


    Warum das <table> ...?
    ... wenn ich dieses nicht mache habe ich z.B. Fünf-Menüpunkte
    direkt nebeneinander und ich möchte gerne das sich das Menü von
    den Abständen der einzelnen Menü's auf 100% aufteilen,
    also über die komplette Zeile und nicht nur in der Mitte oder Links.


    Gruss und Danke Alf

  • Hi, ... ich weis nicht ob ich dich richtig verstanden habe, aber du sollst ja nicht für jedes <li> von dem Menu2 eine neue Liste beginnen ...


    <li class="menu2"><a href="#">Menu2</a>
    <ul>
    <li><a href="#">Menu2</a></li>
    <li><a href="#">Menu2</a></li>
    </ul>
    </li>


    und nun müsstest du doch für li.menu2 die Farbe nach Belangen anders wählen können ....


    Zu deiner Tabelle ... du kannst doch auch die Breite der LI's Pprozentual angeben ....


    <ul>
    <li style="width: 33%; float: left; text-align: center;"><a href="#">asd1</a></li>
    <li style="width: 33%; float: left; text-align: center;"><a href="#">asd2</a></li>
    <li style="width: 33%; float: left; text-align: center;"><a href="#">asd3</a></li>
    </ul>



    gruß heschii

    Denke nie gedacht zu haben, denn das Denken der Gedanken ist Gedankenloses denken! Denkst du, du denkst, dann denkst du nur du denkst, aber denken tust du nicht ...


    »» DerHeger

  • einen kleinen IE 5.5 Bug gibt es da noch, das Menü ist damit wegen des Abstandes zum nächsten Feld nicht benutzbar. Wie kann man das beheben ???


    Außerdem hätte ich noch gerne einen weißen Trennstrich zwischen den Menüpunkten habs mit border-top:1px; border-color: #fff; probiert, hat aber nicht funktioniert :( (wo muss ich das einsetzen ?)


    CSS


    edit:


    sobald das miteingebaut wird:


    ul.dropdown li * li
    { filter:Alpha(opacity=90);
    -moz-opacity: .90


    hackt es beim IE bei der weitervertschachelung ??? (siehe DEMO: Sytem -> Benutzermanager -> NIX MEHR ZUSEHEN)

  • warum ist in der .css ein styletext drin, und von den befehlen identischer in der .html??


    kann ich das net alles einfach in die .css reinschieben?
    sieht dann besser aus auch der code, außerdem will ich alle funktionen zentral in einer datei haben!

  • Ich hoffe dass hier im Post noch einer zwischendurch reinschaut.
    Ich bin seit Tagen absolut am verzweifeln und weis nicht mehr weiter.


    Ich habe das Menü mal folgendermassen aufgebaut.



    HTML :

    PHP
    <div id="menu">
    <ul id="nav" class="dropdown" style="padding:0;margin:0;">
    <li><a href="*">Onlinetools</a></li>
    <ul>
    <li><a href="*">HTML-Editor</a></li>
    <li><a href="*">Webseitensperre</a></li>
    <li><a href="*">PDF-Rechnung</a></li>
    </ul>
    </ul>
    </div>


    CSS :


    Nun wollte ich noch ein 2. Untermenü unterbringen was jedoch nicht funktioniert, wenn ich im CSS im Abschnitt

    PHP
    ul.dropdown li * li {
    .....
    position: relative;
    .....
    }


    die ->position:relativ;<- stehen lasse, dann wird gar kein zweites angezeigt.
    Wenn ich es rausnehme wird es zwar angezeigt, fängt aber von oben an und nicht am Menüpunkt an dem es aktiviert wird.


    Ich habe mal auf meiner Seite ( www.online2day.de ) im Menü ein 'testmenü' reingemacht um es zu veranschaulichen. Hier auch mal den HTML für das Testmenü.



    Für Hilfe wäre ich super dankbar :-)


    Gruss und Danke

  • Ein schickes Menü! Lob an den Programmierer. Hier noch etwas, was mir aufgefallen ist bzgl. Timeout beim Internet Explorer.


    Ich habe festgestellt, dass das Menü NUR zu schnell zufährt, wenn die Inhalte des Menüs über einem anderen Link liegen. Ich habe mir den Kopf zerbrochen, wie dies zu verhindern sei. Schlußendlich war die Lösung recht simpel:


    Der Haken liegt anscheinend an der dropdownmenu.css.


    Code
    ul.dropdown li * li
    {
    border:1px solid #fff;
    float:none;
    position: relative;
    }


    Wenn der border-Eintrag nicht mehr da ist, macht der IE auch keine Probleme mehr. Anscheinend? ist der IE der Meinung dass dieser Bereich ausgespart ist und man somit darunterliegende Links erreichen kann.


    Ich hoffe ich habe mich mit meiner Lösung nicht "blamiert" und andere können das hier bestätigen?


    MfG
    frankblack

  • Das Menu ist wirklich klasse - hab das gleich mal mit meinem lästigen Javascript Dings ausgetauscht - nur läuft es im IE wieder mal nicht korrekt ..


    http://port11.de/bastelecke/test.htm
    Die CSS ist hier zu finden:
    http://port11.de/bastelecke/conf/style.css
    und der ausgefallene Hilfsmotor
    http://port11.de/bastelecke/conf/css_dropdown.js


    Unter dem Punkt Hilfe gibt es eigentlich den Unterpunkt Info... - dieser wird aber bei MouseOver nicht angezeigt..
    Hier einmal der Quellcodeauszug:


    edit OK nun läuft es - nehme alles zurück und schiebe die Schuld auf meine eigene Schusseligkeit -.---hatte das schliessende </ul> Tag vergessen



    Wenn ich das Javascript für den IE richtig verstanden habe, müsste das Teil doch eigentlich laufen ?
    Es wäre klasse, wenn Ihr euch das mal anschauen könntet ..
    Schonmal allen Lesern ein schönes Osterfest :)


    SteffenR

  • SteffenR - die links sind tot, daher kann auch keiner gucken.


    Ich habe ein z-index-Problem, wenn unter dem Menü comboboxen sind. Alle Versuche per css den z-index zu beeinflussen haben nicht geklappt. (alles IE)


    Ebenfalls habe ich das Abstandsproblem, das man mit der Maus sehr flink sein muss, sonst klappt das Menü gleich wieder zu (auch IE)

  • Quote from St@eff.en


    Ich habe ein z-index-Problem, wenn unter dem Menü comboboxen sind. Alle Versuche per css den z-index zu beeinflussen haben nicht geklappt. (alles IE)


    Die Select Felder sind IE System Widgets, die immer über der Internetseite schweben. Soweit ich weiß, kann man nicht über diesen Formularfeldern positionieren.

  • Quote from fettmme

    Die Select Felder sind IE System Widgets, die immer über der Internetseite schweben. Soweit ich weiß, kann man nicht über diesen Formularfeldern positionieren.


    Hier ist ein Lösungsansatz:
    http://www.coding-board.de/boa…ive/index.php/t-7679.html

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!