Java-Script? - Für DropDown-Menü

Mutant · 15.02.2012, 16:49

Hallo User und Userinnen,
habe mal eine Frage bezüglich einem Java-Script.

Wie mache ich das genau? Ich hab ein DropDown-Menü von Suckerfish
und im Quelltext steht das drin:

PHP-Code:
<!-- dieses javascript wird benötigt damit diese dropdownmenü im IE funktioniert -->
<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" sfhover";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script> 

Wo muss ich diesen Code einfügen?

Wäre sehr dankbar, wenn mir da jemand weiterhelfen könnte Smile

MfG

StefanT · 15.02.2012, 16:51

Das sehe ich dem Code auch nicht an...

MrBrechreiz · 15.02.2012, 17:16

Ganz spontan per GOOGLE hab ich das gefunden.

LINK

Im übrigen, das mit GOOGLE schaffst auch DU ^^.

Mutant · 15.02.2012, 17:30

Wie, was meinst du StefanT?

@ MrBrechreiz, diese Seite kenn ich selber, nur da steht irgendwie
auch nicht dabei, wo ich den Code einfügen muss..

MrBrechreiz · 15.02.2012, 17:57

-Die Navi natürlich ins Header Template deines Designs.
-CSS Code ins global.css
-Den Java Code hängst du vor dem schliessenden head tag

Code:
<script type="text/javascript">sfHover = function() {

    var sfEls = document.getElementById("nav").getElementsByTagName("LI");

    for (var i=0; i<sfEls.length; i++) {

        sfEls[i].onmouseover=function() {

            this.className+=" sfhover";

        }

        sfEls[i].onmouseout=function() {

            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");

        }

    }

}

if (window.attachEvent) window.attachEvent("onload", sfHover);

</script>

hab ma seinen quelltext ausgelesen.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html>

<head>

<title>Suckerfish Dropdowns - One Level Bones</title>

<style type="text/css">

body {

    font-family: arial, helvetica, serif;

}

#nav, #nav ul { /* all lists */

    padding: 0;

    margin: 0;

    list-style: none;

    line-height: 1;

}

#nav a {

    display: block;

    width: 10em;

}

#nav li { /* all list items */

    float: left;

    width: 10em; /* width needed or else Opera goes nuts */

}

#nav li ul { /* second-level lists */

    position: absolute;

    background: orange;

    width: 10em;

    left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */

}

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */

    left: auto;

}

#content {

    clear: left;

    color: #ccc;

}

</style>

<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {

    var sfEls = document.getElementById("nav").getElementsByTagName("LI");

    for (var i=0; i<sfEls.length; i++) {

        sfEls[i].onmouseover=function() {

            this.className+=" sfhover";

        }

        sfEls[i].onmouseout=function() {

            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");

        }

    }

}

if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>

</head>

<body>

<h1>PERCIFORMES! (1)</h1>

<p>Welcome to the world of Perciformes - perch-like fish including the world famous <strong>Suckerfish</strong></p>

<ul id="nav">

    <li><a href="#">Percoidei</a>

        <ul>

            <li><a href="#">Remoras</a></li>

            <li><a href="#">Tilefishes</a></li>

            <li><a href="#">Bluefishes</a></li>

            <li><a href="#">Tigerfishes</a></li>

        </ul>

    </li>

    <li><a href="#">Anabantoidei</a>

        <ul>

            <li><a href="#">Climbing perches</a></li>

            <li><a href="#">Labyrinthfishes</a></li>

            <li><a href="#">Kissing gouramis</a></li>

            <li><a href="#">Pike-heads</a></li>

            <li><a href="#">Giant gouramis</a></li>

        </ul>

    </li>

    <li><a href="#">Gobioidei</a>

        <ul>

            <li><a href="#">Burrowing gobies</a></li>

            <li><a href="#">Dartfishes</a></li>

            <li><a href="#">Eellike gobies</a></li>

            <li><a href="#">Gobies</a></li>

            <li><a href="#">Loach gobies</a></li>

            <li><a href="#">Odontobutidae</a></li>

            <li><a href="#">Sandfishes</a></li>

            <li><a href="#">Schindleriidae</a></li>

            <li><a href="#">Sleepers</a></li>

            <li><a href="#">Xenisthmidae</a></li>

        </ul>

    </li>

</ul>

<div id="content">

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus. Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et, volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus. Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan turpis at erat.</p>

    <p><a href="/articles/suckerfish/dropdowns/">Suckerfish Dropdowns</a> by <a href="/ptg/">Patrick Griffiths</a> and <a href="http://www.danwebb.net">Dan Webb</a>.</p>

</div>

</body>

</html>

Falkenauge Mihawk · 15.02.2012, 17:58

Java != Javascript

Wichtigste Regel.

edit: JS-Code kommt in der Regel immer in den Head-Bereich (im <head>-Tag und vor </head>).

MrBrechreiz · 15.02.2012, 18:01

(15.02.2012, 17:58)Falkenauge Mihawk schrieb: edit: JS-Code kommt in der Regel immer in den Head-Bereich (im <head>-Tag und vor </head>).

nicht immer ^^

Mutant · 15.02.2012, 18:02

Erstmal Danke.

Blöde Frage: In welchem Template muss ich den JavaCode einfügen?
Im Template "header" gibt es nichts mit <head></head>

Falkenauge Mihawk · 15.02.2012, 18:04

(15.02.2012, 18:01)MrBrechreiz schrieb:
(15.02.2012, 17:58)Falkenauge Mihawk schrieb: edit: JS-Code kommt in der Regel immer in den Head-Bereich (im <head>-Tag und vor </head>).

nicht immer ^^

Darum steht da auch in der Regel.

(15.02.2012, 18:02)Mutant schrieb: Erstmal Danke.

Blöde Frage: In welchem Template muss ich den JavaCode einfügen?
Im Template "header" gibt es nichts mit <head></head>

Das Template heisst "headerinclude".

Mutant · 15.02.2012, 18:09

Im headerinclude template gibt es aber auch keine <head></head> tags? Oo

Sorry, ich kenn mich nicht so aus, deswegen bin ich entweder blöd oder
ich versteh das nur falsch. Big Grin