Zweizeilige dynamische Navi

[Jörg]

Hallo,

ich möchte eine Navigation die bei Bedarf eine zweite Zeile einblendet.
Das per Mouseover und rein CSS ohne JavaScript oder ähnliches.
Gelöst habe ich das so:

<!-- Erste Menuezeile -->
 <a href="#" onmouseover="philosophie.style.display='inline';standorte.style.display='none';">Philosophie</a>
 <a href="#" onmouseover="philosophie.style.display='none';standorte.style.display='inline';">Standorte</a>

<!-- Zweite Menuezeile -->
    <br>
    <span id="philosophie" style="display:none">
      <a href="#">Unternehmen</a>
      <a href="#">Leitung</a>
    </span>
    <span id="standorte" style="display:none">
      <a href="#">Eins</a>
      <a href="#">Zwei</a>
      <a href="#">Drei;</a>
    </span>

Funktioniert, ist aber nicht so schön, wenn das Menü mehr Punkte bekommt... :(
Hat jemand eine andere Lösung für micht?
Ein Problem ist auch, das dieses Menü am unteren Rand eines Frames hängt und damit ein DropDown nicht läuft, weil es ja nicht in den unteren Frame hineinreichen kann.

Danke.

[small-step]

Hallo Jörg,

Das per Mouseover und rein CSS ohne JavaScript oder ähnliches.
Gelöst habe ich das so:
<a href="#" onmouseover="philosophie.style.display='inline';standorte.style.display='none';">Philosophie</a>

So so, ohne JavaScript. Und onMouseOver ist was genau?

Gruß,
small-step

[Jörg]

So so, ohne JavaScript. Und onMouseOver ist was genau?

Hups... ;)
Naja, ich habe mich ein wenig verleiten lassen...
Lt. http://de.selfhtml.org/javascript/sprache/eventhandler.htm#allgemeines
sinds auch HTML-Attribute, aber leider keine die ohne JavaScript funktionieren! :(
Aber gibt es eine Alternative?

[David]

Es gibt be "a list apart" mehrere gute artikel zum Thema, hier zwei ausgewählte:
Suckerfish Dropdowns
Hybrid CSS Dropdowns

[Jörg]

Es gibt be "a list apart" mehrere gute artikel zum Thema, hier zwei ausgewählte:
Suckerfish Dropdowns
Hybrid CSS Dropdowns

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

Der Code von HowToCreate kommt meiner Suche schon näher... bin nur gespannt, ob ich Ihn auf zweizeilig umgemodelt bekomme...
Die meisten Horizontalen Menüs die ich gegooglet habe arbeiten halt mit DropDowns und nicht mit einer kompletten zweiten Zeile...

Bevor ich mich selbst versuche, hat wer vielleicht "zufällig" ein entsprechenden Code für mich? ;-)

[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>  

[David]

Das:

#nav dfn, #nav .dot {
     width: 0;
     height: 0;
}

muss natürlich so aussehen, damit height und width interpretiert werden:  
~~~css
  
#nav dfn, #nav .dot {  
     display: block;  
     width: 0;  
     height: 0;  
}  

Falls Du kein php hast, kannst Du den php-Kram auch aus der .htc Datei löschen und sie ohne die Endung .php speichern.
Dann brauchst Du eine .htaccess, in der folgendes steht:

<IfModule mod_mime.c>
     AddType text/x-component .htc
</IfModule>

[Jörg]

Wow, das etwas mehr, als ich bisher gemacht habe...
Werde mal testen, ob mir meine erste Lösung reicht oder ich den Code von  David einsetze.
Danke bis dahin...

[small-step]

Hallo Jörg,

Lt. http://de.selfhtml.org/javascript/sprache/eventhandler.htm#allgemeines
sinds auch HTML-Attribute, aber leider keine die ohne JavaScript funktionieren! :(

OK, unentschieden...

Aber gibt es eine Alternative?

Doch.

Schau mal auf diese Seite. Ziemlich hässlich, aber wenn ich Dein Posting richtig verstanden habe suchst Du so etwas, oder? Und am Aussehen kannst Du ja dann auf Deiner Seite feilen.

Gruß,
small-step

[wahsaga]

hi,

Schau mal auf diese Seite. Ziemlich hässlich,

Und ziemlich ge-/verlogen.

"does NOT use any JavaScript" - und dann kommt "The behaviour file IEmen.htc is defined as follows" mit jeder Menge Javascript.

gruß,
wahsaga

[Jörg]

Jau! Das ist ja das Problem... :-(