dynamisches Menü mit HTML+CSS - bitte Testen

STARGÅTE · Beitrag von **STARGÅTE** » 13.11.2008 23:57

Tachchen,

habe hier mal einen HTML+CSS Code für ein dynamisches Klappmenü welches halt nur mit CSS auskommt und somit kein JS oder Flash braucht.

Nun möchte ich gerne wissen ob es bei allen möglichen Browsern bugfrei funzt, und wenn nicht, bitte ich euch einen Screen vom BUG zu machen, danke.

Code: Alles auswählen

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 //EN">
<html>
 <head>
  <title>CSS-MENU</title>
  <meta name="generator" content="HTML Studio">
 </head>
 <style type="text/css">

  .HoverBox
   { display:block;
     height:21px; width:150px;
     overflow:hidden;
     float:left; }
  .SubHoverBox
   { display:block;
     height:21px; width:150px;
     overflow:hidden; }
  .HoverBox:Hover, .SubHoverBox:Hover
   { overflow:visible; }
  .SubBox
   { width:150px;
     overflow:visible;
     margin:-21px 150px; }

  .Title
   { border:solid #000000 1px;
     display:block; height:19px;
     background-color:#8090A0;
     padding: 0px 4px;
     cursor:default; }
  .Title:hover
   { background-color:#90B0D0 }
   
  .SubTitle
   { border: solid #000000 1px;
     display:block; height:19px;
     background-color:#90A0B0;
     padding: 0px 4px;
     cursor:default;}
  .SubTitle:hover
   { background-color:#A0C0E0 }
   
  .Item
   { border: solid #000000 1px;
     display:block; height:19px;
     background-color:#A0B0C0;
     padding: 0px 4px;
     color: #000000; text-decoration: none;
     cursor:default;}
  .Item:hover
   { background-color:#A0C0F0 }
   
 </style>
 <body>
  <div class="HoverBox">
   <div class="Title">Title 1</div>
   <a class="Item" href="">Item 1.1</a>
   <a class="Item" href="">Item 1.2</a>
   <div class="SubHoverBox">
    <div class="SubTitle">SubTitle 1.3</div>
    <div class="SubBox">
     <a class="Item" href="">SubItem 1.3.1</a>
     <a class="Item" href="">SubItem 1.3.2</a>
     <a class="Item" href="">SubItem 1.3.3</a>
     <a class="Item" href="">SubItem 1.3.4</a>
    </div>
   </div>
   <a class="Item" href="">Item 1.4</a>
   <a class="Item" href="">Item 1.5</a>
   <a class="Item" href="">Item 1.6</a>
  </div>
  <div class="HoverBox">
   <div class="Title">Title 2</div>
   <div class="SubHoverBox">
    <div class="SubTitle">SubTitle 2.1</div>
    <div class="SubBox">
     <a class="Item" href="">SubItem 2.1.1</a>
     <a class="Item" href="">SubItem 2.1.2</a>
     <a class="Item" href="">SubItem 2.1.3</a>
     <a class="Item" href="">SubItem 2.1.4</a>
    </div>
   </div>
   <a class="Item" href="">Item 2.2</a>
   <a class="Item" href="">Item 2.3</a>
  </div>
  <div class="HoverBox">
   <div class="Title">Title 3</div>
   <a class="Item" href="">Item 3.1</a>
   <a class="Item" href="">Item 3.2</a>
   <div class="SubHoverBox">
    <div class="SubTitle">SubTitle 3.3</div>
    <div class="SubBox">
     <a class="Item" href="">SubItem 3.3.1</a>
     <a class="Item" href="">SubItem 3.3.2</a>
     <div class="SubHoverBox">
      <div class="SubTitle">SubSubTitle 3.3.3</div>
      <div class="SubBox">
       <a class="Item" href="">SubSubItem 3.3.3.1</a>
       <a class="Item" href="">SubSubItem 3.3.3.2</a>
      </div>
     </div>
     <a class="Item" href="">SubItem 3.3.4</a>
    </div>
   </div>
   <div class="SubHoverBox">
    <div class="SubTitle">SubTitle 3.4</div>
    <div class="SubBox">
     <a class="Item" href="">SubItem 3.4.1</a>
     <a class="Item" href="">SubItem 3.4.2</a>
    </div>
   </div>
  </div>
 </body>
</html>

Kevin · Beitrag von **Kevin** » 14.11.2008 00:10

bei mir geht es
mein browser ist der internet explorer 8

Fluid Byte · Beitrag von **Fluid Byte** » 14.11.2008 00:12

Keine Probleme mit IE7 und FF 3.0.3.

Little John · Beitrag von **Little John** » 14.11.2008 00:15

Getestet hab ich's nicht, aber es sollte heißen:

Code: Alles auswählen

<style type="text/css">

Danach geht dann auch die Prüfung mit dem CSS validator klar.
Der HTML validator meckert noch ein bißchen.

Gruß, Little John

Kukulkan · Beitrag von **Kukulkan** » 14.11.2008 09:23

Hi Stargate,

Dieser Code ist sehr gut. Ich wusste gar nicht, dass das alleine mit CSS machbar ist. Danke für das Beispiel!

Ach ja: Geht super mit Opera 9.62 unter Windows XP SP2.

Grüsse,

Volker

STARGÅTE · Beitrag von **STARGÅTE** » 14.11.2008 12:31

Danke an die Tester,

ich selber habe eben auch noch mal unter Google Chrome getestet, dort gehts auch.

@Volker Schmid
jo hatte es früher auch immer nur mit JS, aber gestern hatte ich die "zündene" Idee.

Mit sicherheit ist noch ein bisschen "Spam" drin, welches man löschen könnte sodass der code immer noch geht.
Ein paar echte Hintergrundbilder noch für die Items unter fertig ist ein guten Menü ^^

Beitrag von **bobobo** » 14.11.2008 13:17

ähnliches hab ich in meiner lokalen browser start-html-datei

eigentlich vier div-layers voll mit links von denen aber immer
nur eine beim überfahren bestimmter felder mit der maus
angezeigt wird.

ich scheue mich immer sowas "regulär" einzusetzen, da es am markt
eben sehr viele leute mit browsern, die veraltet sind und css nicht richtig
umsetzen können, gibt.

wie sieht es denn aus mit eigentlich veralteten browsern ?

dass der code in opera unter winxpsp3 läuft kann ich bestätigen

tyty · Beitrag von **tyty** » 14.11.2008 14:25

Naja, mit den oben genannten Browser hast du ja schonmal den Grossteil des Marktes abgefasst und bei Opera, Firefox und Safari wuerde ich so wie der Code aussieht sagen, (ich garantiere fuer nichts, hab nichts getestet) dass das in (etwas) aelteren Versionen auch noch funktioniert. Mit dem IE6 wirst du definitiv noch den groessten Anteil haben, wo es nicht funktioniert, weil die :hover Pseudoklasse nur fuer <a> Elemente funktioniert. Laut http://www.w3schools.com/browsers/browsers_stats.asp hat der 6er noch einen Anteil von 20%. Ob das wirklich stimmt und ob dich das interessiert musst du selber entscheiden (mir waeren die egal, wenn ichs so machen wuerde :P ). Im Vergleich haben nur 5% Javascript aktiviert, was also evtl. fuer eine solche Loesung sprechen wuerde.

Prinzipiell wuerde ich aber versuchen, bei so wichtigen Sachen wie der Navigation eine moeglichst ueberall funktionierende Loesung zu nehmen. Wenn auf der Seite im IE6 dann mal ein CSS-Tooltip ueber :hover, der irgendeine Abkuerzung etc. erlaeutert nicht angezeigt wird, da kann man schon eher drueber hinwegsehen.

STARGÅTE · Beitrag von **STARGÅTE** » 14.11.2008 14:51

hmm leider habe ich auf keinem rechner mehr IE 6

nur IE 7 und 8

vllt gibs ja hier einem im Forum der mal sagen kann was im IE 6 zu sehen ist, würde mir sehr helfen...

milan1612 · Beitrag von **milan1612** » 14.11.2008 15:32

STARGÅTE hat geschrieben:hmm leider habe ich auf keinem rechner mehr IE 6

nur IE 7 und 8

vllt gibs ja hier einem im Forum der mal sagen kann was im IE 6 zu sehen ist, würde mir sehr helfen...

Guck mal hier: http://browsershots.org/

EDIT: Ups - das macht ja gar keinen Sinn für ein dynamisches Menü