CSS-Menü mit JavaScript unterstützen

[NewJava]

Hallo,

ich möchte die Ein- und Ausblendefunktion in einem CSS-Menü durch Javascript absichern. Ich habe so etwas allerdings noch nicht gemacht und benötige daher etwas Hilfe, denn die meisten Sites, die ich im Internet gefunden habe, sind für mein Problem deutlich zu aufgeblasen.

Meine Idee:
1. Abfragen des Browsers + Version
2. Auswerten, welche Varianten CSS nicht unterstützen und Menüs ggf. ein -/ausblenden, wenn JavaScript unterstützt wird.

Das Einblenden der DIV-Bereiche wollte ich mit getElementById realisieren.
--> Klappt auch bereits ganz gut (Verbesserungsvorschläge würde ich aber trotzdem gerne hören).

Problem: Wenn der Mauszeiger aus dem Bereich des jeweiligen Hauptmenü-Buttons herausgezogen wird, verschwindet das Untermenü, so dass ich die Submenü-Einträge nicht erreichen kann.
Wie kann ich das verändern?

Quellcode-Auszug:
<div id="bottomnavi">
     <ul id="navlist_bottom">
      <li><a href="#" onmouseover="javascript:popupmenu(2,'subnavlist_6')"
           onmouseout=" javascript:closemenu(2,'subnavlist_6')">Partner</a>
       <ul id="subnavlist_6">
        <li><a href="#">AAA</a></li>
        <li><a href="#">BBB</a></li>
        <li><a href="#">CCC</a></li>
        <li><a href="#">DDD</a></li>
       </ul>
      </li>
      <li><a href="#">News</a>
      <li><a href="#">Downloads</a></li>
      <li><a href="#">Kontakt</a></li>
      <li><a href="#">Sitemap</a></li>
      <li><a href="#">Impressum</a></li>
     </ul>
   </div>

***********************************************************************
var isIE;
var isOP;
//
var appVers;

// *****************************************************************************
// Diese Funktion ermittelt den Namen des verwendeten Browsers
// *****************************************************************************
function getBrowser() {
 var agent =  navigator.userAgent.toLowerCase();
 //
 isIE = (agent.indexOf("msie") > -1 && navigator.indexOf("opera") == -1);
 isOP = (agent.indexOf("opera") > -1);
 //
 appVers = navigator.appVersion;
}

// *****************************************************************************
// Öffne Menü (panel = oberes o. unteres Menü)
//            (menu  = index zum Untermenü)
// *****************************************************************************
function popupmenu(panel, menuname) {
 //if(ie5){
  //menu[obj].style.filter = myEffect; // set your effect from one of the top 25 differents effects
  //menu[obj].filters[0].Apply();
 //menu[menuname].style.visibility = visibility;
  //menu[menuname].filters[0].Play();
 //}
 document.getElementById(menuname).style.visibility = "visible";
// document.getElementsByName(String(menuname)).style.top=0;
// document.getElementsByName(String(menuname)).style.left=0;
}

function closemenu(panel, menuname) {
 document.getElementById(menuname).style.visibility = "hidden";
}

[afra]

Hallo!

Problem: Wenn der Mauszeiger aus dem Bereich des jeweiligen Hauptmenü-Buttons herausgezogen wird, verschwindet das Untermenü, so dass ich die Submenü-Einträge nicht erreichen kann.
Wie kann ich das verändern?

Indem Du den mouseout auf das Submenu legst? Weiterhin benötigen Deine Eventhandler (so ziemlich alles was mit on... anfängt) kein vorgestelltes Pseudoprotokoll "Javascript".

Schönen Gruß

Afra

[NewJava]

Hallo Afra,

könntest du mal bitte erklären/zeigen wie genau das funktioniert?

vielen dank.

[afra]

Hallo!

könntest du mal bitte erklären/zeigen wie genau das funktioniert?

Was war daran so schwer? Du legst den mouseout weg vom übergeordneten Menu zum Submenu...

Schönen Gruß

[NewJava]

Ich habe das noch nicht gemacht und weiß nicht wo ich ansetzen soll.

[afra]

Hallo!

var isIE;
var isOP;

function getBrowser() {
var agent =  navigator.userAgent.toLowerCase();
//
isIE = (agent.indexOf("msie") > -1 && navigator.indexOf("opera") == -1);
isOP = (agent.indexOf("opera") > -1);
//
appVers = navigator.appVersion;
}

Im Übrigen kennt Dein "Browsererkennungsscript" nur zwei Browser.

Schönen Gruß

Afra

[Kai345]

Grütze .. äh ... Grüße!

// *****************************************************************************
// Diese Funktion ermittelt den Namen des verwendeten Browsers
// *****************************************************************************
function getBrowser() {

  
var isIE = ( (document.all) && (window.offscreenBuffering) ) ? true : false;  
var isNN = ( (document.captureEvents) && (!document.getElementById) ) ? true : false;  
var isMOZ = ( (document.getElementById) && (!document.all) && (document.documentElement) ) ? true : false;  
var isOP = ( (document.getElementById) && (navigator.userAgent.indexOf('Opera') != -1) ) ? true : false;  

Gibt es damit potentielle Probleme?

Cü
Kai

[Alexander (HH)]

// Diese Funktion ermittelt den Namen des verwendeten Browsers

Falsch, das macht navigator.userAgent.

// *****************************************************************************
function getBrowser() {

var isIE = ( (document.all) && (window.offscreenBuffering) ) ? true : false;
var isNN = ( (document.captureEvents) && (!document.getElementById) ) ? true : false;
var isMOZ = ( (document.getElementById) && (!document.all) && (document.documentElement) ) ? true : false;
var isOP = ( (document.getElementById) && (navigator.userAgent.indexOf('Opera') != -1) ) ? true : false;

  
Dieses Herumgerate versucht aufgrund von ganzen vier Eigenschaften, alle Browser der Welt zu klassifizieren. So etwas muß schon im Ansatz scheitern. Dieses Stück Cargo Cult mag vor Jahren mal funktioniert haben, als nur zwei oder drei Browser überhaupt Javascript implementiert hatten und in nur je zwei oder drei Versionen exisitierten. Um nur mal zwei Probleme dieses Scriptes anzukratzen: Safari wird überhaupt nicht "erkannt", und aktuelle Netscape-Browser werden nicht als Netscape-Browser "erkannt".  
  
Der saubere Weg ist, diejenigen Browserfähigkeiten zu testen, die man wirklich braucht. Im dümmsten Fall:  
  
~~~javascript
  
if (!document.getElementById || !window.disableAllSecurityChecks) {  
  alert("Sorry, dieser Browser unterstützt document.getElementById() bzw. window.disableAllSecurityChecks() nicht.");  
  return;  
}  
window.disableAllSecurityChecks();  
var e=document.getElementById("haha");  
e.style.display="block";  

Alexander

[Jeena Paradies]

Hallo,

Hi, ich komm nicht so ganz mit deinem Script zurecht und hab jetzt auch nicht wirklich die Zeit dafür, aber ich hatte das gleiche mal mit dieser funktion ein bischen anders gelöst:

function navi() {  
 if(document.getElementById("navi")) {  
  var li = document.getElementById("navi").getElementsByTagName("li");  
  for(var i=0; i<li.length; i++) {  
   li[i].onmouseover = function() {  
    var those = this;  
    if(typeof those.timeout === "undefined") those.timeout = false;  
    clearTimeout(those.timeout);  
    those.timeout = setTimeout( function() {  
     if(those.className.search('(^|\\s)show(\\s|$)') === -1) those.className += " show";  
    }, 100 );  
   }  
   li[i].onmouseout = function() {  
    var those = this;  
    if(typeof those.timeout === "undefined") those.timeout = false;  
    clearTimeout(those.timeout);  
    those.timeout = setTimeout( function() {  
     those.className = those.className.replace(new RegExp('(^|\\s)show(\\s|$)'), RegExp.$1+RegExp.$2);  
    }, 400 );  
   }  
   li[i].onfocus = li[i].onmouseover;  
   li[i].onblur = li[i].onmouseout;  
  }  
 }  
}

Der HTML-Code dazu sieht so aus:

<div id="navi">
 <ul>
  <li><a href="#">foo</a></li>
  <li><a href="#">bar</a>
   <ul>
    <li><a href="#">baz</a></li>
   </ul>
</div>

Das kann aber auch beliebig tief verschachtelt werden.

ich mache das dann so, dass ich dann mit CSS alles ab dem zweiten Level mit display: none; verstecke, aber wenn es die klasse "show" hat, dann zeige ich es (entsprechen positioniert) dennoch an.

Man könnte das jetzt dann so bauen, dass man das genau so auch mit puren CSS baut und die Klasse "show" genau so anwendet wie :hover, dieses aber bei eingeschaltetem JavaScript unterdrückt.

Jeena

[Struppi]

if(those.className.search('(^|\s)show(\s|$)') === -1) those.className += " show";

das führt zumindest in manchen Browsern zu einem Fehler, wenn nicht explizit eine CSS Klasse gesetzt wurde, da className ansonsten undefined ist und folglich keine Funktion search hat.

if(typeof those.timeout === "undefined") those.timeout = false;
    clearTimeout(those.timeout);

Wenn ich das richtig sehe, hat kein Browser Probleme damit clearTimeout mit undefined zu füttern, ich würde wenn man schon so eine Prüfung macht, dann im positiven.

if(those.timeout )clearTimeout(those.timeout);

Halte ich auch für übersichtlicher und verständlicher.

Struppi.

[Jeena Paradies]

Hallo,

Danke für die Hinweise, werde ich bei Glegenheit mal ändern.

Jeena