Menu gefunden, aber ein Problem beim umsetzen

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Menu gefunden, aber ein Problem beim umsetzen

    Hallo zusammen,

    nach längerem Suchen habe ich ein Menü gefunden, das, bis auf eine Kleinigkeit, dem entspricht was ich brauche. Es muss zwar vom Design und anderen Aspekten her noch angepasst werden, aber die Basis stimmt.

    Nun mein Problem. Wenn man mit der Maus drüber fährt, blenden sich die Ebenen ein. Soll auch so sein. Wenn ich einen Link anklicke, wird dieser auch entsprechend dargestellt. Auch das soll so sein.
    Wenn ich aber nun mit der Maus vom Menü runter gehe, blended sich alles wieder aus. Ziel ist es, dass das Menü "offen" bleibt wenn die Maus runterbewegt wird. So das man immer sieht welcher Menüpunkt aktiv ist.
    Ich bin der Held in jscript. Daher post ich mal das was ich habe. Vielleicht kann mir ja jemand weiterhelfen.

    Besten Dank im voraus ! ! !


    Gruß

    Michael


    Die Menüstruktur:
    HTML-Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>2D-Ausklappmenu</title>
    
    <link rel="stylesheet" type="text/css" href="2d-nav.css">
    
    <!--[if IE]>
    <style type="text/css" media="screen">
     #menu ul li {float: left; width: 100%;}
    </style>
    <![endif]-->
    
    <!--[if lt IE 7]>
    <style type="text/css" media="screen">
    body {behavior: url(csshover.htc); font-size: 100%;}
    #menu ul li a {height: 1%;} 
    }
    </style>
    <![endif]-->
    </head>
    
    <body>
    
    <div id="menu">
    
    <ul>
      <li><h2>Titel 1</h2>
        <ul>
    		<li><a href="#">eins</a></li>
    		<li><a href="#">zwei ...</a>
    			<ul>
           			<li><a href="#">zwei a</a></li>
    
           			<li><a href="#">zwei b</a></li>
           			<li><a href="#">zwei c</a></li>
    				<li><a href="#">zwei d</a></li>
     			</ul>
    		</li>
           <li><a href="#">drei ...</a>
    	   		<ul>
    
           			<li><a href="#">drei a</a></li>
           			<li><a href="#">drei b ...</a>
    					<ul>
           					<li><a href="#">drei b i</a></li>
           					<li><a href="#">drei b ii</a></li>
           					<li><a href="#">drei b iii</a></li>
    
    					</ul>
    					</li>
           			<li><a href="#">drei c</a></li>
     			</ul>
    	   </li>
        </ul>
      </li>
     </ul>
    
    <ul>
      <li><h2>Titel 2</h2>
        <ul>
    		<li><a href="#">eins</a></li>
    		<li><a href="#">zwei ...</a>
    			<ul>
           			<li><a href="#">zwei a</a></li>
    
           			<li><a href="#">zwei b</a></li>
           			<li><a href="#">zwei c</a></li>
    				<li><a href="#">zwei d</a></li>
     			</ul>
    		</li>
           <li><a href="#">drei ...</a>
    	   		<ul>
    
           			<li><a href="#">drei a</a></li>
           			<li><a href="#">drei b ...</a>
    					<ul>
           					<li><a href="#">drei b i</a></li>
           					<li><a href="#">drei b ii</a></li>
           					<li><a href="#">drei b iii</a></li>
    
    					</ul>
    					</li>
           			<li><a href="#">drei c</a></li>
     			</ul>
    	   </li>
        </ul>
      </li>
     </ul>
    
    <ul>
      <li><h2>Titel 3</h2>
        <ul>
    		<li><a href="#">eins</a></li>
    		<li><a href="#">zwei ...</a>
    			<ul>
           			<li><a href="#">zwei a</a></li>
    
           			<li><a href="#">zwei b</a></li>
           			<li><a href="#">zwei c</a></li>
    				<li><a href="#">zwei d</a></li>
     			</ul>
    		</li>
           <li><a href="#">drei ...</a>
    	   		<ul>
    
           			<li><a href="#">drei a</a></li>
           			<li><a href="#">drei b ...</a>
    					<ul>
           					<li><a href="#">drei b i</a></li>
           					<li><a href="#">drei b ii</a></li>
           					<li><a href="#">drei b iii</a></li>
    
    					</ul>
    					</li>
           			<li><a href="#">drei c</a></li>
     			</ul>
    	   </li>
        </ul>
      </li>
     </ul>
    
    </div>
    </body>
    </html>

    Das zugehörige css:
    Code:
     #menu { width: 80px; background: #eee; } 
    
        #menu ul { list-style: none; margin: 0; padding: 0; } 
    
        #menu a, #menu h2 {
          font: bold 11px/16px arial, helvetica, sans-serif;
          display: block;
          border-width: 1px; border-style: solid; border-color: #ccc #888
        #555 #bbb;
          margin: 0; padding: 2px 3px; }
    
        #menu h2 { color: #FF8635; background: #96D12C; text-transform: uppercase;
        } 
    
        #menu a { color: #000; background: #efefef; text-decoration: none; } 
    
        #menu a:hover { color: #a00; background: #fff; } 
        
        #menu a:active { color: #f00; background: #00f; } 
        
        
        
        
         #menu li { position: relative; }
    
        #menu ul ul ul {position: absolute; top: 0; left: 100%; width: 100%; }
    
        div#menu ul ul ul, div#menu ul ul li:hover ul ul {display: none;} 
    
        div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul {display: block;}

    Und noch das jscript dazu:
    Code:
    <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>
    Gruß

    Michael

  • #2
    Hi.

    Hab ich Dich richtig verstanden: du willst ein Menü, dass beim überfahren z.B. ein Submenü einblendet und bei klick auf selbiges, dieses erhalten bleibt (aufgeklappt)? Oder willst du beim überfahren ein Submenü, dass auch beim verlassen des Menüs noch eingeblendet ist? Wenn ja, wann soll es wieder ausgeblendet werden??)?!

    mfg streuner
    Erst wenn der letzte FTP Server kostenpflichtig, der letzte GNU-Sourcecode verkauft, der letzte Algorithmus patentiert,
    der letzte Netzknoten verkommerzialisert ist, werdet Ihr merken, dass Geld nicht von alleine programmiert.

    "Diese Software verdient die 3 großen GGG: --- Gesehen --- Gelacht --- Gelöscht ---"

    Kommentar


    • #3
      Hi,

      am besten wäre es folgendermassen:
      Man klickt auf einen Titel. Ist dieser mit einem Link versehen, wird dieser Link aufgerufen UND da dazugehörige Untermenü angezeigt. Hat der Titel keinen Link, wird nur das Untermenü angezeigt.
      Sollte es noch eine Ebene tiefer gehen, soll es genauso funktionieren, nur dass das Untermenü der aufrufende Punkt ist und nicht der Titel.
      Zusammengeklappen soll es beim nächsten Klick auf den Titel oder das Untermenü (je nachdem wo man gerade ist)

      Ich hoffe das was halbwegs verständlich und ihr könnt mir helfen.


      Gruß

      Michael
      Gruß

      Michael

      Kommentar

      Lädt...
      X