[JavaScript] Ausklappmenü von Nintendo

Dieses Thema im Forum "Webentwicklung" wurde erstellt von L33do, 1. Januar 2007 .

Schlagworte:
Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 1. Januar 2007
    Ausklappmenü von Nintendo

    Bin auf der Suche nach einem Ausklappmenü. Gut, hab meines schon gefunden, nämlich wäre das von Nintendo.com ideal:

    Country Selector at Nintendo -> Ausklappmenü bei "Fun Vault"

    Nur bring ich es einfach nicht zusammen, dass ich es aus dem Quelltext lesen kann ... wäre super, wenn mir da jemand helfen könnte!

    Bewertung ist natürlich drinnen!
     
  3. 1. Januar 2007
    AW: Ausklappmenü von Nintendo

    Sers!

    der code is derhier:

    Code:
     <li><a href="#"><img src="/img/text/topnav_fun25_off.png" width="92" height="33" alt="FUN VAULT" onmouseover="showMenuLayer('subNavFunVault',this,'header');" onmouseout="delayHide('subNavFunVault');" onclick="return false;" /></a></li>
    a href="#" heißt soviel wie, er soll bei einem klick darauf nix öffnen!
    img src="funblblblba.png" ist das Fun Vault bild.
    width und height is klar
    jetzt kommts dann:
    onmouseover: is jvscript und sag sobald du die maus darüber tust soll er das LayerMEnu subNavFunVault',this,'header direkt darüber anzeigen.
    und onmouseout: er soll es verschwienden lassen, beim verlassen mit der mouse.

    die show menu layer und delay hide sind function in Javascript.
    Die sind in der datei: http://www.nintendo.com/js/nav.js

    und dann darunter ist:

    Code:
    <div id="subNavFunVault" class="flyoutMenu" onmouseout="delayHide(this);" onmouseover="keepUp(currentflyout);">
 <ul>
 <li><a href="http://www.nintendo.com/downloads" onmouseover="rolloverOn('funvault_downloads25');" onmouseout="rolloverOff('funvault_downloads25');"><img name="funvault_downloads25" src="/img/text/funvault_downloads25_off.png" width="89" height="16" alt="Downloads" border="0" /></a></li>

 <li><a href="http://www.nintendo.com/arcade" onmouseover="rolloverOn('funvault_arcade25');" onmouseout="rolloverOff('funvault_arcade25');"><img name="funvault_arcade25" src="/img/text/funvault_arcade25_off.png" width="89" height="16" alt="Arcade" border="0" /></a></li>
 <li class="last"><a href="http://www.nintendo.com/theater" onmouseover="rolloverOn('funvault_theater25');"
onmouseout="rolloverOff('funvault_theater25');"><img name="funvault_theater25" src="/img/text/funvault_theater25_off.png" width="89" height="16" alt="Theater" border="0" /></a></li>
 </ul>
</div>
    Wobei das einfach nur der Láyer wird und ist folgendes hat:
    Code:
    #subNavFunVault {
 display: none;
 position: absolute;
 width: 91px; height: 54px;
 background-color: #555;
 padding: 0px; margin: 0px;
 z-index: 1;}
    So, das wars! =)
    Hoff ich zumindest!^^

    gruß

    gl
     
  4. 1. Januar 2007
    AW: Ausklappmenü von Nintendo

    Ne, funktioniert leider nicht. Ich glaube, es fehlt noch der "class-tag" ...
     
  5. 1. Januar 2007
    AW: Ausklappmenü von Nintendo

    Sers!

    Ok, es hat noch mehr gefehlt!^^

    Code:
     <script src="/js/rollover.js" type="text/javascript" language="javascript">
 <!--
 function rolloverInit() {}
 function rolloverOn() {}
 function rolloverOff() {}
 //-->
 </script>
    und die rollover.js:

    Code:
    // Rollover v1.0
// http://www.dithered.com/javascript/rollover/index.html
// code by Chris Nott (chris@NOSPAMdithered.com - remove NOSPAM)

var rolloverImageOff = new Array();
var rolloverImageOn = new Array();
var rolloverCurrent = '';
var rolloverInitialized = false;
var rolloverNeeded = true;

// Preload rollover images
function rolloverInit() {
 if(!rolloverInitialized){
 if (document.images) {
 
 // for each rollover, preload both states and put filename in an associative array
 for (var i = 0; i < rolloverImageOnFiles.length; i++) {
 rolloverCurrentName = rolloverImageTagNames[i];
 
 rolloverImageOff[rolloverCurrentName] = new Image();
 rolloverImageOn[rolloverCurrentName] = new Image();
 rolloverImageOff[rolloverCurrentName].src = rolloverImageDirectory + rolloverImageOffFiles[i];
 rolloverImageOn[rolloverCurrentName].src = rolloverImageDirectory + rolloverImageOnFiles[i];
 }
 rolloverInitialized = true;
 }
 }//end if rolloverInitialized
}


// On state activation
function rolloverOn(img, layer) {
 if (document.images && rolloverImageOn[img]) {
 // rollovers in layers in NS4 require a different image reference
 if (layer != null && document.layers) {
 if (typeof(layer) == 'object') layer.document.images[img].src = rolloverImageOn[img].src;
 else if (typeof(layer) == 'string') eval('document.layers["' + layer + '"].document.images[img].src = rolloverImageOn[img].src');
 }

 // non-layer rollovers in NS4 and all rollovers in other browsers
 else if (document.images[img]){
 document.images[img].src = rolloverImageOn[img].src;
 }
 }
}


// Off state activation
function rolloverOff(img, layer) {
 if (document.images && rolloverImageOff[img]) {

 // rollovers in layers in NS4 require a different image reference
 if (layer != null && document.layers) {
 if (typeof(layer) == 'object') layer.document.images[img].src = rolloverImageOff[img].src;
 else if (typeof(layer) == 'string') eval('document.layers["' + layer + '"].document.images[img].src = rolloverImageOff[img].src');
 }

 // non-layer rollovers in NS4 and all rollovers in other browsers
 else if (document.images[img]) document.images[img].src = rolloverImageOff[img].src;
 }
}


function rolloverInputOn(btn, img) {
 btn.src = rolloverImageOn[img].src;
}

function rolloverInputOff(btn, img) {
 btn.src = rolloverImageOff[img].src;
}

// Rollover with state function (not used in standard rollovers; included for flexability)
function rolloverSetCurrent(img) {
 if (rolloverCurrent) rolloverOff(rolloverCurrent);
 rolloverCurrent = img;
 rolloverOn(rolloverCurrent);
}

// function for page specific rollovers
function preloadRollover(onFile, offFile, tagName) {
 var index = rolloverImageOffFiles.length;
 rolloverImageOnFiles[index] = onFile;
 rolloverImageOffFiles[index] = offFile;
 rolloverImageTagNames[index] = tagName;
}
    und in <body> tag: <body onload="rolloverInit();">

    Hm, der class-tag is ja nur wieder css.
    hab den aber auch nirgends gefunden! xD

    du musst dann noch schaun, dass bei dem subnavvault div der name vom bild (name="xyz") gleich dem rollover ist. (bei onmouseover bzw. onmouseoff).

    gruß

    gl
     
  6. 1. Januar 2007
    AW: Ausklappmenü von Nintendo

    Hm, das geht auch irgendwie sicher kürzer, ich schau mal nach einem anderen um, bewertung hast du aber, danke trotzdem
     
  7. 1. Januar 2007
    AW: Ausklappmenü von Nintendo

    joa, geht viel leichter!^^

    Design Community - Design Nation
    Design Community - Design Nation

    das wären 2 Beispiele.

    gruß
    gl
     
  8. 1. Januar 2007
    AW: Ausklappmenü von Nintendo

    eigentlich reicht da n einfaches onmouseover -> div.innerHtml = "meine links" onmouseout -> div.innerHtml = "n bild".
     
  9. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.