Seite 1 von 1

Warum funktioniert dieses Menü...

Verfasst: 26.12.2007 12:40
von terminatorx120
Hallo und Froooooohe Weihnachten,

Ich habe leztens Popfly ausprobiert.
Und habe mich gefragt, wie die das Dropdown Menü machen, also habe ich erstmal in meinem Browser (Firefox) Javascript deaktiviert, aber es funktionierte trotzdem!
Dann war es klar, dass es mit CSS geschafft wurde, dies hatte ich auch einmal probiert, aber in IE funktionierte es nicht!
Also testete ich die Seite mit IE und es ging trotzdem!
Nun habe ich den Quellcode der Navigation kopiert und ich versuche heraus zufinden woran es liegt, dass es funktioniert...
im Code wird ein extra Stylesheet eingefügt:

Code: Alles auswählen

<link href="http://www.popfly.ms/styles/main_IE7_FF.css?v=1.0.21205.1" rel="stylesheet" type="text/css" />
Ich habe es mir durchgelesen, aber ich verstehe es einfach nicht!

Vielleicht könnt ihr mir helfen...

Nun der kurzgefasste Code der Navigation:

Code: Alles auswählen

<html>
  <head>
    <title>New Document</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <link id="ctl00_ctl00_mainTheme" rel="stylesheet" type="text/css" href="http://www.popfly.ms/Styles/main.css?v=1.0.21205.1" /><link href="http://www.popfly.ms/styles/main_IE7_FF.css?v=1.0.21205.1" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="fluid-navbar">

            

<ul id="main-navigation" class="menunavigation">
    <li class="menu"><a href="#" onclick="return false;">Create Stuff <img class="menu-dropdown" src="/Images/spacer.gif" alt="Mashup" /></a>
        <ul>
            <li><a href="/shell.aspx?projectType=mashup">Mashup</a></li>
            <li><a href="/shell.aspx?projectType=web">Web Page</a></li>
            <li><a href="/shell.aspx?projectType=block">Block</a></li>
            <li><a href="/Overview/Explorer.aspx">Popfly Explorer</a></li>

        </ul>
    </li>
</ul>
<div style="clear:left;"></div>
        </div>

  </body>
</html>

Guten Rutsch und frohe Weihnachten! :D

Verfasst: 26.12.2007 14:05
von gn#36
Der IE interpretiert die Pseudo Elemente :hover usw. nur bei Links (also <a href="...). Ich nehme stark an, dass es im IE deswegen funktioniert, weil hier Links zu reinen Stilelementen missbraucht wurden. Firefox und Opera interessiert es nicht an welchen Objekten die Pseudoelemente genutzt werden, daher funktioniert es hier auch bei <div> <span> ...

Verfasst: 27.12.2007 01:27
von terminatorx120
Danke, aber das beantwortet meine Frage nicht ganz, denn ich frage mich auch besonders, warum diese css datei dabei hilft:

Code: Alles auswählen

<link href="http://www.popfly.ms/styles/main_IE7_FF.css?v=1.0.21205.1" rel="stylesheet" type="text/css" />
Und andere Menüs arbeiten auch mit link, aber funktionieren auch nicht...
siehe hier,z.B.:
http://www.cssmenumaker.com/