Zweizeilige dynamische Navi

[David]

Danke für die Tipps, aber leider baut gerade 'A list apart' auf JavaScript... hier sogar auf extra Funktionen.

Das Javascript ist bei beiden Beispielen nur für den Internet Explorer vonnöten, da dieser ':hover' nur für das <a>-Element unterstützt. Das ist traurig, aber ich nehme das in Kauf...

Code für das "Hybrid CSS Dropdowns"-Beispiel:

HTML:

  
<ul id="nav">  
     <li ><a href="./"><dfn>1 </dfn>Startseite<span class="dot">.</span></a></li>  
     <li><a href="/projekt.html"><dfn>2 </dfn>Projekt<span class="dot">.</span></a>  
          <ul>  
               <li><a href="/downloads.html"><dfn>2.1 </dfn>Downloads<span class="dot">.</span></a></li>  
               <li><a href=/fr.html"><dfn>2.2 </dfn>Feature reqests<span class="dot">.</span></a></li>  
               <li><a href="/bugs.html"><dfn>2.3 </dfn>Bugs<span class="dot">.</span></a></li>  
          </ul>  
     </li>  
</ul>  

CSS: - habe ich jetzt nur aus einer älteren Projektdatei kopiert, keine Ahnung ob's geht. Der erste Punkt ist für den IE. Proprietär und häßlich, aber dafür funktioniert es. Das Listing der entsprechenden Datei weiter unten.

  
* html body { /* nur für den IE */  
     behavior: url("csshover.htc.php");  
}  
  
/* das gibt in allen Browsern einen zentrierten Body mit der Breite 65em, mit dem IE habe ich nur Version 6 getestet.*/  
body {  
     width: 65em;  
     margin: 0 auto;  
}  
#nav {  
     position: relative;  
     height: 2.5em;  
     line-height: 2.5em;  
     font-size: 1.5em;  
     margin: 0;  
     padding: 0;  
     background: #a00 url('style/rot.gif') left top repeat;  
     width: 65em;  
}  
  
#nav li ul {  
     margin: 0;  
     padding: 0;  
}  
  
#nav li {  
     float: left;  
     display: block;  
}  
  
#nav li:hover {  
     background-position: left -60px;  
}  
  
#nav li a {  
     display: block;  
}  
  
#nav li:hover a {  
}  
  
#nav li ul {  
     display: none;  
}  
  
#nav li ul  {  
     position: absolute;  
     top: 2.5em;  
     left: 0;  
     background: #fdd;  
     height: 2em;  
     line-height: 2em;  
     width: 65em; /*hier muss die Breite der Navigation stehen*/  
}  
  
#nav li.current ul {  
    background: #ddf;  
    display: block;  
}  
  
#nav li:hover ul {  
     display: block;  
     z-index: 9999;  
}  
  
#nav dfn, #nav .dot {  
     width: 0;  
     height: 0;  
}  

Listing von csshover.htc.php
Den header sende ich per php mit, weil der IE unter Win XP SP2 .htc-Dateien nur mit diesem MIME-Type akzeptiert.
lässt sich aber wahrscheinlich auch über eine .htaccess regeln.
Das Skript sorgt dafür, dass die hover-Pseudoklasse auch im Internet-Explorer funktioniert

  
<?php  
header ('Content-type: text/x-component');  
header ('Content-Disposition: inline; filename=csshover.htc');  
?>  
  
<attach event="ondocumentready" handler="parseStylesheets" />  
<script>  
/**  
 *  Whatever:hover - V1.41.050927 - hover & active  
 *  ------------------------------------------------------------  
 *  (c) 2005 - Peter Nederlof  
 *  Peterned - http://www.xs4all.nl/~peterned/  
 *  License  - http://creativecommons.org/licenses/LGPL/2.1/  
 *  
 *  Whatever:hover is free software; you can redistribute it and/or  
 *  modify it under the terms of the GNU Lesser General Public  
 *  License as published by the Free Software Foundation; either  
 *  version 2.1 of the License, or (at your option) any later version.  
 *  
 *  Whatever:hover is distributed in the hope that it will be useful,  
 *  but WITHOUT ANY WARRANTY; without even the implied warranty of  
 *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU  
 *  Lesser General Public License for more details.  
 *  
 *  Credits and thanks to:  
 *  Arnoud Berendsen, Martin Reurings, Robert Hanson  
 *  
 *  howto: body { behavior:url("csshover.htc"); }  
 *  ------------------------------------------------------------  
 */  
  
var csshoverReg = /(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active)/i,  
currentSheet, doc = window.document, hoverEvents = [], activators = {  
    onhover:{on:'onmouseover', off:'onmouseout'},  
    onactive:{on:'onmousedown', off:'onmouseup'}  
}  
  
function parseStylesheets() {  
    if(!/MSIE (5|6)/.test(navigator.userAgent)) return;  
    window.attachEvent('onunload', unhookHoverEvents);  
    var sheets = doc.styleSheets, l = sheets.length;  
    for(var i=0; i<l; i++)  
        parseStylesheet(sheets[i]);  
}  
    function parseStylesheet(sheet) {  
        if(sheet.imports) {  
            try {  
                var imports = sheet.imports, l = imports.length;  
                for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]);  
            } catch(securityException){}  
        }  
  
        try {  
            var rules = (currentSheet = sheet).rules, l = rules.length;  
            for(var j=0; j<l; j++) parseCSSRule(rules[j]);  
        } catch(securityException){}  
    }  
  
    function parseCSSRule(rule) {  
        var select = rule.selectorText, style = rule.style.cssText;  
        if(!csshoverReg.test(select) || !style) return;  
  
        var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1');  
        var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo);  
        var className = (/\.([a-z0-9_-]*on(hover|active))/i).exec(newSelect)[1];  
        var affected = select.replace(/:(hover|active).*$/, '');  
        var elements = getElementsBySelect(affected);  
        if(elements.length == 0) return;  
  
        currentSheet.addRule(newSelect, style);  
        for(var i=0; i<elements.length; i++)  
            new HoverElement(elements[i], className, activators[pseudo]);  
    }  
  
function HoverElement(node, className, events) {  
    if(!node.hovers) node.hovers = {};  
    if(node.hovers[className]) return;  
    node.hovers[className] = true;  
    hookHoverEvent(node, events.on, function() { node.className += ' ' + className; });  
    hookHoverEvent(node, events.off, function() { node.className = node.className.replace(new RegExp('\\s+'+className, 'g'),''); });  
}  
    function hookHoverEvent(node, type, handler) {  
        node.attachEvent(type, handler);  
        hoverEvents[hoverEvents.length] = {  
            node:node, type:type, handler:handler  
        };  
    }  
  
    function unhookHoverEvents() {  
        for(var e,i=0; i<hoverEvents.length; i++) {  
            e = hoverEvents[i];  
            e.node.detachEvent(e.type, e.handler);  
        }  
    }  
  
function getElementsBySelect(rule) {  
    var parts, nodes = [doc];  
    parts = rule.split(' ');  
    for(var i=0; i<parts.length; i++) {  
        nodes = getSelectedNodes(parts[i], nodes);  
    }   return nodes;  
}  
    function getSelectedNodes(select, elements) {  
        var result, node, nodes = [];  
        var identify = (/\#([a-z0-9_-]+)/i).exec(select);  
        if(identify) return [doc.getElementById(identify[1])];  
  
        var classname = (/\.([a-z0-9_-]+)/i).exec(select);  
        var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '');  
        var classReg = classname? new RegExp('\\b' + classname[1] + '\\b'):false;  
        for(var i=0; i<elements.length; i++) {  
            result = tagName? elements[i].all.tags(tagName):elements[i].all;  
            for(var j=0; j<result.length; j++) {  
                node = result[j];  
                if(classReg && !classReg.test(node.className)) continue;  
                nodes[nodes.length] = node;  
            }  
        }   return nodes;  
    }  
</script>