✔ fly out menü / class="hide"

Status
Nicht offen für weitere Antworten.
E

EdgarZ

Grünschnabel
Hallo!

Ich habe hier schon viel gelesen und in einem der Beitraäge auch ein wundervolles Script für eine Navigation gefunden. Habe allerdings ein Problem wo ich einfach nicht weiterkomme und mir keinen Rat mehr weiß, vielleicht könnt Ihr mir helfen.

Ich habe ein Scrip von Stu Nicholls ausprobiert.... eigentlich läuft es auch problemlos. Mein Problem ist nur, dass durch class="hide" die Navigation in Fifefox nicht zu sehen ist, aber unter IE6 ganz wunderbar läuft. Wenn ich das hide nun rausnehme, läuft die Navigation unter Firexox super, aber im IE6 habe ich die Menüpunkte der ersten Ebene doppelt angelegt, diese zusätzlichen Buttons haben allerdings kein Flyout.

Sicherlich ist die Änderung ganz simpel.. nur komme ich leider nicht drauf und auch meine Suche blieb bisher erfolglos.


Hier die CSS

Code: 
/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/flyoutt.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
/* common styling */
.menu { width:120px; height:200px; position:relative; margin:0; font-size:13px; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 30px; margin:50px 0; }
.menu ul li a, .menu ul li a:visited { display:block; text-decoration:none; color:#fde7c7; width:120px; height:auto; text-align:left; border-width:1px 1px 0 0; line-height:30px; font-size:13px; font-weight: bold; background-repeat: repeat; background-attachment: scroll; background-position: 0 0; text-indent: 10px; border-color: #fff; border-style: solid; }
.menu ul { padding:0; margin:0; list-style-type: none; }
.menu ul li { background-color: #ed9c71; float:left; margin-right:1px; position:relative; }
.menu ul li ul {display: none;}

/* specific to non IE browsers */
.menu ul li:hover a { color:#fde7c7; background-color: #dc6220; background-repeat: repeat; background-attachment: scroll; background-position: 0 0; }
.menu ul li:hover ul {display:block; position:absolute; top:0; left:120px; width:120px;}
.menu ul li:hover ul li a.hide {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover a.hide {width:120px;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a { display:block; color:#fde7c7; background-color: #ed9c71; background-repeat: repeat; background-attachment: scroll; background-position: 0 0; width:120px; }
.menu ul li:hover ul li a:hover { color:#fde7c7; background-color: #dc6220; background-repeat: repeat; background-attachment: scroll; background-position: 0 0; }
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:120px; top:0; color:#000;}
.menu ul li:hover ul li:hover ul li a {display:block; width:120px; background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul li a:hover {background:#bd8d5e; color:#fff;}



Hier der code für die Navigation

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Navigation</title>
		<link href="css/nav1.css" rel="stylesheet" type="text/css" media="all" />
		<style type="text/css">
/* style the outer div to give it width */

/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible;
}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{
visibility:hidden;
}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{
visibility:hidden;
}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{
visibility:visible;
}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul {
visibility:visible;
}
#Ebene1 { width: 133px; position: relative; visibility: visible; }
#Ebene2 { width: 180px; position: relative; visibility: visible; }
</style>
</head>

<body>
		<a name="Anchor-51943" id="Anchor-51943"></a>
		<table border="0" align="left" align='top' width="120" height="200">
			<tr height="120"><td align='center' width="120" height="200"><div class="menu">

 <ul>
  <li><a class="hide" href="">Home</a>
    <!--[if lte IE 6]>
  <a href="">Home
  <table><tr><td>
  <![endif]-->
    <!--[if lte IE 6]>
  </td></tr></table>
  </a>
  <![endif]-->
  </li>

  
  
  <li><a class="hide" href="">Aktion</a>
  <!--[if lte IE 6]>
  <a href="">Aktion
  <table><tr><td>
  <![endif]-->
   <ul>
    <li><a href=""</a></li>
    <li><a href="">"Karte"</a></li>
   </ul>
  <!--[if lte IE 6]>
  </td></tr></table>
  </a>
  <![endif]-->
  </li>




  <li><a class="hide" href="">Infos</a>

  <!--[if lte IE 6]>
  <a href="">Infos
  <table><tr><td>
  <![endif]-->

   <ul>
    <li><a href="">Unsere Ziele</a></li>
    <li><a href="">Wir über uns</a></li>
    <li><a href="">Kinderlos</a></li>
    <li><a href="">Warum?</a></li>
    <li><a href="">Angehörige</a></li>
    <li><a href="">Wörterbuch</a></li>
    <li><a href="">Links</a></li>
    </ul>

  <!--[if lte IE 6]>
  </td></tr></table>
  </a>
  <![endif]-->

  </li>

  <li><a class="hide" href="">Interaktiv</a>

  <!--[if lte IE 6]>
  <a href="">Interaktiv
  <table><tr><td>
  <![endif]-->

   <ul>
    <li><a href="">Umfrage</a></li>
    <li><a href="">Gästebuch</a></li>
    <li><a href="">eintragen</a></li>
    </ul>

  <!--[if lte IE 6]>
  </td></tr></table>
  </a>
  <![endif]-->

  </li>

  <li><a class="hide" href="">Presse</a>

  <!--[if lte IE 6]>
  <a href="">Presse
  <table><tr><td>
  <![endif]-->

   <ul>
    <li><a href="">Presse</a></li>
    <li><a href="">Antworten</a></li>
    <li><a href="">Meilensteine</a></li>
    </ul>

  <!--[if lte IE 6]>
  </td></tr></table>
  </a>
  <![endif]-->

  </li>

  <li><a class="hide" href="">Verein</a>

  <!--[if lte IE 6]>
  <a href="">Verein
  <table><tr><td>
  <![endif]-->

   <ul>
    <li><a href="">Vereinsleben</a></li>
    <li><a href="">Log in</a></li>
  </ul>

  <!--[if lte IE 6]>
  </td></tr></table>
  </a>
  <![endif]-->

  </li>

  <li><a class="hide" href="">Kontakt</a>

  <!--[if lte IE 6]>
  <a href="">Kontakt
  <table><tr><td>
  <![endif]-->

  <ul>
  <li><a href="">Spenden</a></li>
  <li><a href="">Kontakt</a></li>
  <li><a href="">Impressum</a></li>
  </ul>

  <!--[if lte IE 6]>
  </td></tr></table>
  </a>
  <![endif]-->

  </li>
 </ul>

</div> </td></tr>
		</table>

</body>
</html>


Die Sache, das dieses Problem nur auftritt, wenn ich die Nav über Komponente oder direkt einfüge, lässt mich daran zweifeln, dass das eigentliche Problem bei dem hide zu suchen ist. Prüfe ich die Nav alleine in einer Seite oder binde ich sie über iframes ein, läuft sie in allen getesteten Browsern einwandfrei. Da ich aber keine iframes nutzen möchte, habe ich hier ein Problem.... und weiß einfach nicht weiter!

Ich danke Euch schon jetzt für Eure Mühe!

Liebe Grüße
Barbara
 
Zuletzt bearbeitet:
Hi,

ich nehme jetzt mal an, dass du dich an dem Beispiel http://www.cssplay.co.uk/menus/flyoutt.html orientiert hast, in dem das Menü trotz der verwendeten Klasse .hide im Firefox angezeigt wird.

Ich frag mich nämlich, was es mit dem nachfolgenden CSS-Code für die Listennavigation .menu im style-Element auf sich hat, denn diese CSS-Regeln stammen nicht aus dem Menü bzw. gehören nicht dazu.

Stattdessen muss mit einem "Conditional Comment" für den IE6 (und älter) das Stylesheet http://www.cssplay.co.uk/menus/css/flyout_ie.css in das Dokument eingebunden werden:

http://www.cssplay.co.uk/menus/flyoutt.html hat gesagt.:
Code: 
<link rel="stylesheet" media="all" type="text/css" href="css/flyout.css" />

<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="css/flyout_ie.css" />
<![endif]-->
Zum Vergrößern anklicken....
Ansonsten kann ich mit deinem gezeigten Quellcode keine Probleme im FF feststellen.
 
Lieber Maik,

vielen Dank für Deine rasche Antwort! Aber leider komme ich damit nicht weiter....

ich habe jetzt die Seite noch mal Schritt für Schritt neu aufgebaut und mußte feststellen, dass die Navigation bis zu dem Punkt gut funktioniert wo ich aus meiner "Probe-Seite" dann eine Musterseite mache, um die restlichen Seiten zu aktualisieren.

Ich kann da aber nicht finden, wo der Fehler liegt und so werde ich jetzt versuchen, die einzelnen Seiten per Hand zu aktualisieren... vielleicht komme ich dann sp weiter!


Nochmals vielen Dank für Deine Unterstützung!

Liebe Grüße
Barbara
 
Vielleicht hab ich dein Anliegen auch missverstanden und solltest du deine Musterseite mit den weiteren Seiten online stellen, damit man sich diese "Version" mal direkt anschauen kann.
 
Lieber Maik,

kann es sein, dass ich ein riesen Nahshorn bin und der Fehler einfach nur darin gelegen hat, dass ich die Seiten nicht online getestet habe? :confused: Denn ich habe sie jetzt hochgeladen um sie hier einzustellen und es läuft problemlos.... was bin ich ein Dämel.... ich mache mir seit Wochen gedanken wie ich ein Problem lösen kann welches es gar nicht gibt... das kann auch echt nur mir passieren!


Dir vielen Dank für Deine Mühe, Du hast mir sehr geholfen und ich beneide Deine Ruhe...!

Werde das ganze jetzt noch mal vernünftig hochladen und dann hoffe ich sehr, dass es auch läuft und ich mich nicht getäuscht habe!

Die Seiten sind bei weitem noch nicht fertig und es müssen noch viele Fehler ausgebessert werden.... aber wenn die Nav jetzt läuft kann ich mich da endlich dran geben!

http://versuch.aktion-kinderwunsch.net

Liebe Grüße
Barbara
 
EdgarZ hat gesagt.:
Werde das ganze jetzt noch mal vernünftig hochladen und dann hoffe ich sehr, dass es auch läuft und ich mich nicht getäuscht habe!

aber wenn die Nav jetzt läuft kann ich mich da endlich dran geben!
Zum Vergrößern anklicken....
Bei mir funktioniert das verlinkte Menü in allen mir zur Verfügung stehenden Browser einwandfrei. ;)
 
Maik hat gesagt.:
Bei mir funktioniert das verlinkte Menü in allen mir zur Verfügung stehenden Browser einwandfrei. ;)
Zum Vergrößern anklicken....


Ich bin ein wenig sprachlos... vor allen Dingen, wenn ich darüber nachdenke wie ich mir da den Kopf zerbrochen habe!

Naja... ^^ die Nav läuft und das ist die Hauptsache und in Anbetracht dessen, dass ich vor zwei Monaten noch nicht mal wusste was php, css und co. überhaupt ist, kann man mir diesen groben Schnitzer vielleicht verzeihen....


Vielen Dank!

Liebste Grüße
Barbara
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück