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

[brans]

hat letzendlich eigentlich jemand von euch das Menu verlangsamen können für die IE Nutzer ?!?

[brans]

schade, kann mir da wirklich niemand helfen ?!?

[Windgeflüster]

ich hoffe ihr könnt mir dabei helfen schaut es euch einfach an (kanns nicht erklären) ich habs jetzt mit IE und forefox geschaut wie es funkt und bei beiden funktioniert es nicht! ich weiß es nicht was ich falsch gemacht habe, ich hoffe ihr könnt mir hier helfen:

http://www.wackelnasen.net/test.php
hier ist der code vom menü:

<ul id="nav" class="dropdown">
   
		         <li> <a href="#" class="has_submenu">Start</a>
              
    <ul>
      <li><a href="#">Startseite</a></li>
      <li><a href="#">das Team</a></li>
      <li><a href="#">Danke!</a></li>
    </ul>
         </li>

<li> <a href="#" class="has_submenu">Allgemeines</a>
              
    <ul>
      <li><a href="#">Tipps vor dem Kauf</a></li>
      <li><a href="#" class="has_submenu">zum Kaninchen</a> 
        <ul>
          <li><a href="#">Herkunft</a></li>
          <li><a href="#">Stubenreinheit</a>
        </ul>
      </li>
      <li><a href="#"  class="has_submenu">zum Meerschweinchen</a>
        <ul>
          <li><a href="#" >Hitze</a>
            </ul>
         </li>
      <li><a href="#">die Sprache</a></li>
    </ul>
         </li>
		 


<li> <a href="#" class="has_submenu">Haltung</a>
              
    <ul>
      <li><a href="#">Einzelhaltung</a></li>
      <li><a href="#" class="has_submenu">Käfighaltung</a> 
        <ul>
          <li><a href="#">Eigenbau</a></li>
          <li><a href="#">Aussenhaltung</a></li>
          <li><a href="#">Käfigeinrichtung</a> 
        </ul>
      </li>
    </ul>
<li> <a href="#" class="has_submenu">Ernährung</a>   
    <ul>
      <li><a href="#">Futterliste</a></li>
      <li><a href="#">richtige Ernährung</a> 
      </li>
      <li><a href="#">Heu</a></li>
      <li><a href="#">Snacks</a></li>
    </ul>
         </li>
		 


<li> <a href="#" class="has_submenu">Krankheiten</a>
              
    <ul>
	  <li><a href="#">Tierarztliste</a></li>
      <li><a href="#" class="has_submenu">Kaninchen</a> 
        <ul>
          <li><a href="#">Chinaseuche</a></li>
          <li><a href="#">Myxtomatose</a></li>
		  <li><a href="#">Zahnprobleme</a></li>
          <li><a href="#">Epilepsie</a></li>
          <li><a href="#">Durchfall</a></li>
          <li><a href="#">Milben</a></li>
          <li><a href="#">Haarlinge</a></li>
		  <li><a href="#">Blähbauch</a>
        </ul>
      </li>
      <li><a href="#" class="has_submenu">Meerschweinchen</a> 
        <ul>
          <li><a href="#" >Durchfall</a></li>
          <li><a href="#" >Haarlinge</a></li>
		  <li><a href="#" >Milben</a></li>
		  <li><a href="#" >Erkältung</a></li>
		  <li><a href="#" >Osteodystrophie</a></li>
		  <li><a href="#" >Eierstocksysten</a></li>
		  <li><a href="#" >Gewichtsverlust</a></li>
		  <li><a href="#" >Blähbauch</a>
	   </ul>
          </li>
	  <li><a href="#">Notfallapotheke</a></li>
	  <li><a href="#" class="has_submenu">Medikamente</a>
	<ul>
	  <li><a href="#">Critical Care</a>
    </ul>
         </li>
	      <li><a href="#">Checkliste</a></li>
 </ul>
         </li>
		 

<li> <a href="#" class="has_submenu">Sexualität</a>
              
    <ul>
      <li><a href="#">Scheinschwangerschaft</a></li>
      <li><a href="#">Nachwuchs</a></li>
    </ul>
         </li>
		 
		 

<li> <a href="#" class="has_submenu">Interaktives</a>
              
    <ul>
      <li><a href="#">Doanloads</a></li>
      <li><a href="#">Linksliste</a></li>
      <li><a href="#">Kontakt</a></li>
      <li><a href="#">Unser Banner</a></li> 
      <li><a href="#">Gesetzliches</a>
    </ul>
         </li>

LG Nicole

[paul123]

Hallo Nicole.

Also wie man sooo viele meta-angaben für Kaninchen finden kann... das müssen hunderte sein.
Also, ich hab das menü zwar noch nicht eingebaut und weis jetzt auch nicht, welche Fehler du direkt meinst. Aber grundlegend, was jetzt vielleicht direkt nicht mit der Menü zu tun hat, aber wichtig ist:

</table>
</div>

</body>
</html>
</td>
</tr>

</table></td>
<td rowspan="4"> <img src="index-bilder/wackelnasen1_07.gif" width="2" height="359" alt=""></td>
<td background="index-bilder/menu1.gif" width="140" height="200" valign="top"><table width="95%" border="0">
<tr>
<td valign="top"><html>
<head>

In deinem Code öffnest du ein paarmal den body und schließt den wieder ... das ist recht "chaotisch" da drin...

Das Menü ist absolut positioniert und richtet sich nach dem Elternelement. Hier gibt es dazu Infos: http://home.arcor.de/terrikay/tutori...ionierung.html

Könnte es sein - bei deinem recht umfangreichen code erkenn ich das jetzt nicht - das du hier u.a. was falsch hast... irgendwie ist die ul nicht geschlossen..?

----------------------
Wenn ich das richtig sehe, sollte in der verlinkten Testversion ein kleiner Fehler drin sein, oder überseh ich da was?:

<li> <a href="#" >first Level menu</a></a>
</ul>

das ist die letzte Zeile vom Menü. Sollte da das letzte schliesende </a> nicht ein li sein???

[heschii]

Servus Leudde,

... ich hab auf meiner HP auch so ein CSS Menu eingebaut.

Ich habe eine Main <div> in der das Menu ist un daruner noch eine <div> für den inhalt... wenn ich nun die Höhe der Inhalt-Div genau festlege, funktioniert das menu optimal. Möchte ich aber nun das die Höhe der Inhalt-Div sich automatisch dem Inhalt anpasst und ihr keine Höhe zuweisen dann funktioniert das Menu zwar in FF Netscape etc. aber im IE kommt nur das SubMenu aber ich kann ich darauf, da es sobald ich mit der Maus darauf möchte verschwindet.
Sitz schon den ganzen nachmittag drann und bastel rum aber komm zu nichts...

wisst ihr maybe ne Lösung ...

thx

heschii

P.S.: die URL von der angefangenen HP .. http://home.arcor.de/heschii/out-of-scene/

[paul123]

Hi heschii. Um ehrlich zu sein, weis ich nicht was du meinst... Im IE6 und FF kommen unter 2 Punkten jeweils 2 Subnavis. aber mehr nicht. Also grundlegend in beiden gleich.

Aber was bitte schön hast du überhaupt eingebaut?
Ausser das du einige Fehler im Code hast (z.B. hat dein Headerbild keine Größenangaben, keinen alt-text,...)

Im Original-script sind keine onmouseovers... drin:

<li><a href="#">third Level menu 1</a></li>
<li><a href="#">third Level menu 1</a></li>
<li><a href="#">third Level menu 1</a>
</ul>
</li>
<li><a href="#">second Level menu</a></li>
<li><a href="#" class="has_submenu">second Level menu</a>
<ul>
<li><a href="#" >third Level menu 2</a></li>
<li><a href="#" >third Level menu 2</a></li>
<li><a href="#" class="has_submenu">third Level menu 2</a>

Bei dir sieht es so aus:

<ul id="nav" class="dropdown">
<li><a href="#" onmouseover="window.status='[»» out of scene | BandPage ] home';return true;" onmouseout="window.status='';">home</a></li>
<li><a href="#" class="has_submenu" onmouseover="window.status='[»» out of scene | BandPage ] the band';return true;" onmouseout="window.status='';">the band</a>
<ul>
<li><a href="#" onmouseover="window.status='[»» out of scene | BandPage ] bio';return true;" onmouseout="window.status='';">bio</a></li>

<li><a href="#" onmouseover="window.status='[»» out of scene | BandPage ] pics';return true;" onmouseout="window.status='';">pics</a></li>
</ul>

Das ist alles etwas anders. Hier die nochmal die Demo:
http://www.rotblind.de/cssdropdown/dropdownmenu.html

[seb]

Eieiei...hier hab ich ja ewig nicht mehr reingeschaut.

Da offensichtlich reges Interesse an diesem Menü besteht, hab ich mal eine neue Demo hochgeladen.

In der neuen Demo sind die für die Funktion des Menüs unbedingt erforderlichen CSS-Angaben getrennt von denen notiert, die lediglich das Aussehen definieren ("Trennung von Business- und Presentation-Logic" würde man das bei den Programmierern nennen ).

Ausserdem habe ich das CSS mittlerweile weiter optimiert, und die Hauptebene wird jetzt horizontal dargestellt, wie es wohl in den meisten Fällen erwünscht ist.

Damit ist die neue Demo (hoffentlich)

1. leichter nachvollziehbar,

2. näher dran an etwas, was man in der Praxis tatsächlich gebrauchen kann und

3. technisch etwas besser gelöst.

Also, viel Spaß

PS.: Die URL ist die gleiche geblieben.

PS. PS.: Wundert euch nicht über die Menü-Links. Das HTML hab ich einfach aus einer dynamisch generierten Admin-Oberfläche herauskopiert, bei euch laufen natürlich alle Links ins Leere.

[heschii]

Hallo nochmal,

... die mouseovers sind nur für den Statustext unten links ... sind unwichtig ...

anhand dieses Beispieles sollte mein Problem jedoch klar werden ...

http://home.arcor.de/heschii/out-of-scene/

mfg
heschii

[seb]

Ich vermute, dass das Problem irgendwie in den Abständen zwischen den Menüeinträgen liegt.

Und unter Opera geht dein Menü überhaupt nicht erst auf.

Probier mal mein das neue Basis-CSS aus, welches ich gestern hochgeladen hab.

[heschii]

... ich hab des gestern auch schon mit dem neuen Menu versucht. Jedoch war dort dasselbe im IE festzustellen.

Opera hab ich leider noch nich gekuggt ...

Ich finde es einfach seltsam, dass wenn ich die Höhe der DIV unter dem menü festlege, alles funktioniert. Und wenn ich die Höhe nicht definiere es nicht funkt ...

... wenn es so nicht klappt »» wie kann ich das noch machn, dass sich die Höhe automatisch dem Inhalt anpasst ...
( mit overflow: scroll könnte man das ganze auch machn . .aber das sieht nicht so schön aus wie wenn ich ganz normal ganz außen scrolle ]

greetz Heschii

[heschii]

Aloah nochmal ...

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

thx nochmal

gruß heschii

[FriederSchueler]

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

[alf]

Hallo,

benutze für das Menü nun folgende Codes

CSS:

ul.dropdown * ul {
	list-style: none;
	margin:0px;
	padding:0px;
	display:none;
	position:absolute;
}

ul.dropdown li {
	list-style:none;
	float:left;
	font-weight:bold;
    	padding:2px;
}

ul.dropdown li * li {
   background-color: #B2C1E0;
   filter:alpha(opacity=75);
   -moz-opacity:0.75;
   opacity: 0.75;
   position: relative;
}

ul.dropdown ul * ul {
	left:98%;
	top:0;
	width:100%;
}

ul.dropdown a {
	display:block;
}


ul.dropdown ul * a {
	width:13em;
}

ul.dropdown li:hover ul ul, ul.dropdown li:hover ul ul ul, ul.dropdown li:hover ul ul ul ul {
	display:none;
}

ul.dropdown li:hover ul, ul.dropdown ul li:hover ul, ul.dropdown ul ul li:hover ul {
	display:block;
}

#nav {
	font:10px verdana;
    	background-color:#f9f9f9;
}

#nav a {
	color:#000;
	padding:3px;
	text-decoration:none;
}

#nav a:hover {
	background-color:#e4faec;
	color:#000;
}

#nav a.is_blind {
	color:#cfcfcf;
}

#nav a.is_blind:hover {
	color:#cfcfcf;
}

menu.html

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

<li><a href="http://www.*.de">START </a></li>

<li><a href="http://www.*.de">Menu1</a>
 <ul>
  <li><a href="http://www.*.de">Menu1</a></li>
  <li><a href="http://www.*.de">Menu1</a></li>
 </ul>
</li>


<li><a href="http://www.*.de">Menu2</a>
 <ul>
  <li><a href="http://www.*.de">Menu2</a></li>
  <li><a href="http://www.*.de">Menu2</a></li>
  <li><a href="http://www.*.de">Menu2</a></li>
  <li><a href="http://www.*.de">Menu2</a></li>
 </ul>
</li>


</ul>
</div>

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

Gruss und Danke Alf

[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

[heschii]

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