Dropdown verhält sich komisch

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Dropdown verhält sich komisch

    Hallo,

    habe gerade ein dropdown menü nach "suckerfish-art" gemacht.

    Nun habe ich 2 Probleme:

    Unter FF klappt das Menü auch schön auf, aber ich kann nicht über die Untermenüs fahren, da es sich sofort wieder zuklappt.

    Unter IE7 passiert beim Überfahren Toplevel-links gar nichts.

    Könnt ihr mir da weiterhelfen? Ich stehe so ziemlich auf dem Schlauch...

    Die CSS-Datei die ich verwende ist hier gespeichert...

    Das Menü ist hier zu sehen: www.dilectro.com/eubiq

    Ich danke euch im voraus!
    Zuletzt geändert von maggus; 02.01.2008, 14:54.

  • #2
    li:hover gibt es nicht, die Pseudoklasse hover existiert nur für a-Tags.
    Wenn man dein a-Tag hovert, wird das Submenü zwar richtig positioniert (aufgeklappt), aber um die Maus auf das Submenü zu bewegen, muß man das a-Tag verlassen. Damit verliert es die Pseudoklasse hover wieder und das Submenu verschwindet.

    Entweder packst du das Submenu komplett in das a-Tag (nicht ratsam) oder positionierst es mittels onmouseover-Event (das geht dann auch am li-Tag).

    Kommentar


    • #3
      Danke dir erstmal für die schnelle Antwort.

      Ich habe nun gelesen, dass dieses Script noch eingefügt werden muss:

      PHP-Code:
       <script type="text/javascript">
          <!--
            
      sfHover = function() {
              var 
      sfEls document.getElementById("mainlevel-down").getElementsByTagName("li");
              for (var 
      i=0i<sfEls.lengthi++) {
                
      sfEls[i].onmouseover = function() {
                  
      this.className += " sfhover";
                }
                
      sfEls[i].onmouseout = function() {
                  
      this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
                }
              }
            }
            if (
      window.attachEventwindow.attachEvent("onload"sfHover);
          
      //-->
        
      </script>
        <!-- ... --> 
      da wird ja schon gemacht, was du vorschlägst, oder?

      Nach dem einfügen sieht man nun auch unterm IE7 das Menü, nur verschwindet es immer noch.

      Muss ich ein weiteres JS einfügen?

      P.S: li:hover habe ich jetzt aber schon mermals gesehen, z.B. unter http://css.maxdesign.com.au/listamat...rizontal04.htm
      Handelt es sich da um etwas anderes als das von dier beschriebene?
      Zuletzt geändert von maggus; 02.01.2008, 15:28.

      Kommentar


      • #4
        li:hover habe ich jetzt aber schon mermals gesehen
        funzt aber nicht im ie 6.

        gruß
        peter
        Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
        Meine Seite

        Kommentar


        • #5
          Hach ja, immer diese Kompatibilitätsprobleme ^^...

          Und wie steht es mit dem von mir eingefügten JS und meiner diesbezüglichen Frage?

          Kommentar


          • #6
            Hallo maggus,

            ich nutze für meine Seiten etwas ähnliches - das JavaScript benötigst du für den IE. Das schreibt beim Eintreten von OnMouseOver eine zusätzliche CSS Klasse und entfernt diese auch wieder beim Verlassen.

            Was in deinem CSS unter li:hover steht müsste auch für sfhover gelten - sfhover wird vom JavaScript in den jeweiligen li-Tag geschrieben.

            Gruß
            Patrick

            Kommentar


            • #7
              Hallo Patrick,

              und bei dir funktioniert das Ganze mit ähnlichem Aufbau ohne Probleme?

              Kommentar


              • #8
                ja - und zwar ab IE5 aufwärts und im FF

                Wichtig ist, dass du über das obige JS eine zusätzliche Klasse in die LIs schreiben lässt wenn onMouseOver eintritt. Die LI erhalten dann die F ormatierung über die Klasse sfhover (IE) bzw. LI:hover (restliche Browser). Im CSS etwa so:
                Code:
                #menu li:hover ul, #menu li.iehover ul{
                    left:auto;
                }
                #menu ist bei mir das div für die Menüzeile, die Klasse für den IE habe ich iehover - bei dir sfhover - genannt. Allerdings habe ich das Menü horizontal und nicht vertikal - sollte jedoch egal sein, das Prinziep bleibt das gleiche ...

                Vielleicht gehst du den Aufbau von CSS und HTML noch einmal nach dem Beispiel von suckerfish durch - nach deinen ganzen Versuchen ist evtl. etwas durcheinander geraten?

                Gruß
                Patrick

                Kommentar


                • #9
                  Hmm, ja sieht so aus wie das, was ich in meiner CSS stehen habe:

                  PHP-Code:
                  /**
                   * Show the submenus on mouse-over (.hover class)
                   */
                  #mainlevel-down li:hover ul {
                    
                  leftauto;
                  }

                  /**
                   * IE fix ... Javascript Fix
                   */
                  #mainlevel-down li.sfhover ul {
                  leftauto;

                  Habe jetzt noch einmal die CSS angesehen, aber es hängt immer noch daran, dass, wie onemorenerd sagt, die hover condition nicht mehr da ist, sobald ich auf das untere Feld gehe...

                  //Edit:

                  Ich habe mir jetz einmal den ausgeworfenen Quellcode angesehen.

                  PHP-Code:
                  <div id="topmenu">



                  <
                  ul  id="mainlevel-down">
                  <
                  li><a href="index.php" class="mainlevel-down" title="Accueil">Accueil</a>
                  <
                  ul >
                  <
                  li>
                  <
                  a href="index.php?option=com_contact&amp;Itemid=3" class="sublevel-down" title="Nous contacter">Nous contacter</a>
                  </
                  li>
                  <
                  li>
                  <
                  a href="gaga.html" class="sublevel-down" title="Test 1">Test 1</a>
                  </
                  li>
                  <
                  li>
                  <
                  a href="gaga.html" class="sublevel-down" title="Test 2">Test 2</a>
                  </
                  li>
                  </
                  ul>
                  </
                  li>
                  <
                  li>
                  <
                  a href="gaga.html" class="mainlevel-down" title="Test Level 1">Test Level 1</a>
                  </
                  li>
                  </
                  ul>


                  </
                  div
                  Nach
                  PHP-Code:
                  title="Accueil">Accueil</a
                  kommt ein neues <ul>, und zwar ohne ID-Angabe... hängt es vielleicht damit zusammen?

                  Ich weiß nur nicht wie ich es wegbekomme, das Menü wird per joomla generiert...
                  Zuletzt geändert von maggus; 03.01.2008, 14:59.

                  Kommentar


                  • #10
                    Ich habe jetzt sogar mein Menü durch eine 1:1 Kopie vom Tutorial ersetzt:

                    http://www.htmldog.com/articles/suck...le/bones2.html

                    Auch den CSS Inhalt. Es passiert das gleiche... Schon komisch. Also ich bin mit meiner kleinen Weisheit leider am Ende. Jetzt kann ich nur noch auf euch Profis hoffen

                    Kommentar

                    Lädt...
                    X