# Drop-Downmenü über Iframe hinaus



## mikkele (18. November 2008)

Hallo Leute,

okay...wie erkläre ich das jetzt am besten...

Ich habe eine Drop-Downmenü, das ich auf über 50 Seiten haben möchte. In das Menü werden (wahrscheinlich) fortlaufend neue Einträge gemacht. Deshalb möchte ich das Dropdownmenü über einen Iframe darstellen, damit ich es nur einmal ändern muss, und dann nicht 100 x über copy/paste auf den anderen Seiten einfügen muss.

Jetzt habe ich im ganz oben auf der Seite einen Iframe (25 px hoch), wo ich die HTML mit dem DD-Menü einbinde. Das Problem ist, dass das Menü nicht über den Iframe hinausgeht.
Gibt es mit folgendem Code eine einfache Möglichkeit, dass das Menü über die Seite drübergeht?


```
<head>
<style type="text/css">
        body                    { font: normal 11px/13px Verdana; }
        img                     { border: none; height: 12px; float: left; padding-right: 5px; clear:left; }
        #menu ul.select         { width: 200px; vertical-align: middle; border: solid 1px #CCC; list-style-type: none; }
        #menu ul li.item        { display: none; border-top: dotted 1px #CDCDCD; padding: 1px 0; }
        #menu ul li.item:hover  { display: block; }
        #menu ul li.item a      { display: block; width: 200px; height: 15px; background: #CCCCCC; }
        #menu ul li.item a:hover { /* background: #CCC; */ }
        #menu ul li.top         { background: transparent url(DropArrow.gif) no-repeat left; width: 195px; line-height: 18px; padding-left: 5px; color: #FFFFFF;}
        #menu ul:hover .item    { display: block; }
    </style>

</head>

<body>
<table width="950" height="20" border="0" cellspacing="0" cellpadding="0">
  <tr>
     <td width="270">
      <div id="menu">
        <ul class="select">
          <li class="top"> worldwide </li>
          <li class="item"><a href="#"><img src="../language/fahne1.gif" width="23" height="12"/> link1 </a></li>
          <li class="item"><a href="#"><img src="../language/fahne2.gif" width="23" height="12"/> link2 </a></li>
          <li class="item"><a href="#"><img src="../language/fahne3.gif" width="23" height="12"/> link3 </a></li>
        </ul>        
    </div>
    </td>
    </tr>
</table>
</body>
</html>
```

Bin für jeden Ratschlag dankbar

lg
Michael


----------



## Maik (18. November 2008)

Hi,

da muß ich dich leider enttäuschen - ein Öffnen der Submenüs aus/über dem iFrame hinaus ist mit  CSS-Dropdown-Menüs nicht möglich.

Schau dir mal als Alternative http://www.dhtmlcentral.com/new/scripts/42-dhtml-scripts/69-coolmenus an.

mfg Maik


----------



## Sven Mintel (18. November 2008)

Moin Michael,

da gäbe es Workarounds mit Javascript, welche ich aber nicht empfehlen möchte 

Da ich annehme, dass du kein PHP oder dergleichen verfügbar hast, könntest du erstmal abklären, ob du u.U. SSI zur Verfügung hast, damit wäre es kein Problem, das Menu in einer separaten Datei zu verwalten und in alle Dateien einzubinden.

Andernfalls bliebe wiederum nur JS, aber dann ohne iFrame, bspw. ein Einbinden des Menues per AJAX.


----------



## Security (18. November 2008)

Wirklich für jeden Ratschlag?

Also wie wäre es die Idee mit dem Iframe gleich wieder zu verwerfen und dich lieber einer serverseitigen Programmiersprache wie PHP zu zuweden.

ein IFrame hat unglaublich viele Nachteile, dass ich sie garnicht alle auflisten will, aber ganz Praktisch ist es schonmal für den Pagerank schlecht, also lass es lieber.
Außerdem verstehe ich nicht, warum du ein menu mit li, nohcmal in eine einen div und schlimmer noch in einen table packst, das ist irgendwie nicht ganz Sinnvoll.

Da gibt es nettere Varianten, die du einfach mal googlen kannst, ich kann dir aber auch gerne ein wenig helfen, das ist kein Problem.


----------



## mikkele (18. November 2008)

okay, das sind klare Ansagen, das habe ich mir fast gedacht, dass das nicht t

Da ich jedoch von PHP, SSi und AJAX keine Ahnung habe und die budgetäre Situation des Projektes nicht so hoch ist, werde ich auf die Variante zurückgreifen, das Menü in den HTMLs einzubauen. Im Dreamweaver kann ich dann ja mit der Suchen/Erzetzten-Funktion die Neueinträge leichter einfügen.

Aber das bestehende Menü ist aber nach eueren Angaben auch nicht das optimale, da werde ich dann mal nach etwas Besserem n 
Mir hat es einfach gefallen, da es sehr einfach aufgebaut war und ich als Designer auch den Durchblick hatte :suspekt:

@Security: danke für dein Angebot zur Weiterhilfe, aber mir fehlen in den oben genannten Bereichen schon das Basiswissen, somit könnte ich dich nur um einen fertigen Code anfragen, was aber lt. Nettiquette ja nicht Sinn des Forums ist 

lg
Michael


----------



## Loomis (18. November 2008)

Also das mit PHP, da müsstest du eigendlich nur einen Einzeiler schreiben:

```
<?php
include( 'dropdowndatei.html' );
?>
```
So müsstest du zwar immernoch dieses Menü in jede Seite einbinden, hättest dann aber Ruhe. Da du ja geschrieben hast, dass da fortlaufend neue Einträge hinzukommen. So musst du dann nurnoch eine Datei ändern.


----------



## Sven Mintel (18. November 2008)

Mit SSI ähnlich einfach 

```
<!--#include file="dropdowndatei.html" -->
```


----------



## mikkele (18. November 2008)

Jungs, ich glaube, ihr stellt euch das zu einfach vor mit mir :suspekt:

Voller neuer Eifer habe ich euere Nachricht(en) vernommen, und das so ausprobiert - ohne Erfolg

Ich habe in die Tabelle (wo vorher der Iframe war) den Code reingeschrieben, (SSi und PHP versucht), hochgeladen, aber es ist nichts passiert.

Muss beim Provider mal anfragen, ob der Webspace PHP oder SSI unterstützt?!
Vielleicht liegt es ja daran.


----------



## Loomis (18. November 2008)

Ja der Webspace sollte das schon unterstützen, sonst wird das nichts leider.


----------



## Maik (18. November 2008)

Wenn PHP oder SSI nicht zur Verfügung stehen sollten, kannst du ja auf meinen empfohlenen Link zurückgreifen 

mfg Maik


----------



## mikkele (18. November 2008)

Habe gerade mit dem Provider telefoniert, PHP steht zur Verfügung.
Aber wenn's mich noch länger ärgert, greife ich auf deinen Link zurück, Maik

Hab mir den Link vorher schon angesehen, wunderschöne Farben


----------



## Sven Mintel (18. November 2008)

mikkele hat gesagt.:


> Habe gerade mit dem Provider telefoniert, PHP steht zur Verfügung.



Dann solltest du PHP nutzen, man kauft sich ja auch kein Auto, weil man den Rückspiegel zum Schminken benötigt(mal bildlich gesprochen) :suspekt:


----------



## mikkele (19. November 2008)

alsooo...auf ein Neues

ich habe die Dateien mal auf das wesentliche reduziert:

Datei 1:

```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
    <table width="950" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><?php
include( '2.html' );
?> </td>
      </tr>
    </table>
</body>
</html>
```

Datei 2:

```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</style>
<style type="text/css">
        body                    { font: normal 11px/13px Verdana; }
        img                     { border: none; height: 12px; float: left; padding-right: 5px; clear:left; }
        #menu ul.select         { width: 200px; vertical-align: left; border: solid 1px #000000; list-style-type: none; }
        #menu ul li.item        { display: none; border-top: solid 1px #444444; padding: 1px 0; }
        #menu ul li.item:hover  { display: block; }
        #menu ul li.item a      { display: block; width: 200px; height: 15px; background: #111111; }
        #menu ul li.item a:hover { /* background: #CCC; */ }
        #menu ul li.top         { background: transparent url(../iframes/DropArrow.gif) no-repeat left; width: 170px; line-height: 18px; padding-left: 5px; color: #FFFFFF;}
        #menu ul:hover .item    { display: block; }
    </style>
</head>

<body>
<table width="950" height="20" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="450">&nbsp;</td>
    <td width="244">
      <div id="menu">
        <ul class="select">
          <li class="top"> worldwide </li>
          <li class="item"><a href="#"><img src="../language/flags_africa/africa_clip_image002.gif" width="23" height="12"/> Albania </a></li>
          <li class="item"><a href="#"><img src="../language/flags_africa/africa_clip_image006.gif" width="23" height="12"/> Austria </a></li>
          <li class="item"><a href="#"><img src="../language/flags_africa/africa_clip_image008.gif" width="23" height="12"/> Dominikanische Republik </a></li>
        </ul>        
    </div>
    </td>
    <td width="256">&nbsp;</td>
  </tr>
</table>
</body>
</html>
```

Datei 2 soll in der Tabelle von Datei 1 dargestellt werden - tut es aber nicht, ich habe den Monitor schon angebrüllt, aber er macht es immer noch nicht.
Wo habe ich hier bitte den Knoten drin.

Also ich habe euch gewarnt, ein absolut Unwissender in PHP zu sein, aber ihr habt gesagt "da musste nur'n Satz hinschreiben" ...und jetzt habt ihr den Salat, jetzt gebe ich keine Ruh mehr bis das klappt


----------



## Maik (19. November 2008)

Hi,

liegt denn "Datei 1" als PHP-Datei vor (z.B. "datei1.php"), damit der enthaltene PHP-Code auch vom PHP-Interpreter geparst wird? 

Ansonsten müsstest du serverseitig dafür sorgen, dass ".htm/.html"-Dateien durch den PHP-Parser geschickt werden.

Anwendungsbeispiel mit Hilfe einer .htaccess-Datei, falls es sich um einen Apache-Server handelt:


```
AddType application/x-httpd-php .htm .html
```


Und beachte, dass beim Includen keine vollständige HTML-Datei in das Hauptdokument geladen wird, sondern nur das, was sich im Dokumentkörper (*<body> ... </body>*) befindet. Die darin genannte Tabelle sollte überflüssig sein, da sie ja schon im Hauptdokument existiert - somit bleibt für "Datei 2" nur noch diese Syntax übrig:


```
<?php
echo"<div id=\"menu\">
        <ul class=\"select\">
          <li class=\"top\"> worldwide </li>
          <li class=\"item\"><a href=\"#\"><img src=\"../language/flags_africa/africa_clip_image002.gif\" width=\"23\" height=\"12\"/> Albania </a></li>
          <li class=\"item\"><a href=\"#\"><img src=\"../language/flags_africa/africa_clip_image006.gif\" width=\"23\" height=\"12\"/> Austria </a></li>
          <li class=\"item\"><a href=\"#\"><img src=\"../language/flags_africa/africa_clip_image008.gif\" width=\"23\" height=\"12\"/> Dominikanische Republik </a></li>
        </ul>        
    </div>";
?>
```


```
<td><?php
include( '2.php' );
?> </td>
```


mfg Maik


----------



## Security (20. November 2008)

Naja, include ist ja schonmal die Falsche idee, das ist fuer frameworks gedacht und greift auf ein php include direcktory zurueck, zumindest in der Regel.

requiere() waere da schon angebrachter, fuernktioniert auch genau gleich.


Und bitte spar dir den table, das macht man nicht, weil Tabellen ebend Tabellen sind und nur zur tabellarischen Darstellung von Inhalt gedacht sind und nicht um irgendwelche Styleangaben zu machen.

LG John

Achso und wenn du's einfach haben willst, dann stuetz dich doch einfach auf was fertiges mit einer guten Dokumentation.

Ich wuerde gerne mal wissen, fuer was du eine Internetseite machen willst, denn fuer einen Kunden… naja, das wuerde ich lieber nicht machen, fuer mich als Repaesentation… noch weniger.

Also fang lieber ganz locker an und lies dir nen paar Basiscs an, das kommt im Endeffect besser.
Ausserdem scheinst du eher der Grafiker typ zu sein. Dann mach dich doch lieber mit Content-Basiertem XML vertraut und guck dir den Aufbau von Systemen wie Typo3 oder Wordpress an.
Dann kannst du Designs machen und das Coden ueberlaesst du anderen. Damit kannst du viel Geld machen, wenn deine Designs gut sind, koennen wir ueber Preise nette Preise reden, aber dafuer muss es schon den anforderuhngen entsprechen.


----------



## mikkele (20. November 2008)

ich habe die Dateien noch als .html gehabt
Das habe ich geändert, und im FF funktioniert es jetzt auch (im IE nicht), allerdings vergrößert er mir den eigebetteten Bereich um die Höhe des Dropdownmenüs, wenn ich darüberfahre. Sozusagen verschiebt er die ganze Seite unterhalb der PHP-Inkludierung nach unten.

Zu meinen Tabellen: ich liebe Tabellen, ich habe es so gelernt, bin mit ihnen aufgewachsen und habe das Gefühl, dass alles ordentlich verräumt ist, wenn ich's in Tabellen packe [Monk hätte Freude mit mir]:suspekt:
Hier ist der Grund: links vom DDMenü sollte noch eine [Login] und [PW] Abfrage kommen, deshalb habe ich hier die Tabellen dafür schonmal vorgesehen.

@Security: ertappt , ja ich bin im grafischen Bereich bei den Farben und Formen zuhause, aber um meinen Lebensunterhalt bestreiten zu können, komme ich an der Programmierung halt auch nicht vorbei, und wurschtle mich so durch...

Von was für Anforderungen sprechen wir hier? Kannst mir vielleicht ein eMail oder eine PN schicken?


----------



## Maik (20. November 2008)

Hi,

ich hab mal ein wenig am Markup des Listenmenüs und seinem Stylesheet gefeilt, damit es a) in allen modernen Browsern gleichermaßen funktioniert, und b) der Anzeigebereich des obersten Listenelements beim Einblenden des Untermenüs nicht vergrößert wird (zu erkennen an seinem schwarzen Rahmen):


```
<?php
echo"<div id=\"menu\">
        <ul class=\"select\">
          <li class=\"top\"><a href=\"#\">worldwide</a>
              <ul>
                  <li class=\"item\"><a href=\"#\"><img src=\"../language/flags_africa/africa_clip_image002.gif\" width=\"23\" height=\"12\"/> Albania </a></li>
                  <li class=\"item\"><a href=\"#\"><img src=\"../language/flags_africa/africa_clip_image006.gif\" width=\"23\" height=\"12\"/> Austria </a></li>
                  <li class=\"item\"><a href=\"#\"><img src=\"../language/flags_africa/africa_clip_image008.gif\" width=\"23\" height=\"12\"/> Dominikanische Republik </a></li>
              </ul>
          </li>
        </ul>
    </div>";
?>
```


```
#menu ul { margin: 0; padding: 0; list-style-type: none; }
#menu ul.select { position: relative; width: 200px; vertical-align: left; border: solid 1px #000000; }
#menu ul.select ul li { border-top: solid 1px #444444; padding: 1px 0; }
#menu ul.select ul { display: none; }
#menu ul.select li:hover ul { display: block; position:absolute; left:0; top:20px; }
#menu ul.select ul li a { display: block; width: 200px; height: 15px; background: #111111; }
#menu ul.select ul li a:hover { /* background: #CCC; */ }
#menu ul.select li.top { background: transparent url(../iframes/DropArrow.gif) no-repeat left; width: 170px; line-height: 18px; padding-left: 5px; color: #000;}
```

Falls du bei der Funktionalität des Menüs(= das Aufklappen der Submenüs) den IE6 berücksichtigen möchtest, empfehle ich dir Suckerfish Dropdowns, oder wenn kein JS zum Einsatz kommen soll, Stu Nicholls' Dropdown-Menüs (Kategorie "Menus - Multi-Level - Dropdown").

mfg Maik


----------

