# Navi-Leiste die mit Mouse-over aufgeht



## Paku (20. Januar 2004)

Hallo,

bin neu hier und auf der Suche nach Info`s zum Aufbau einer Navi-Leiste wie Sie hier zu sehen ist http://www.photoshop-faq.de/  oder z.B. hier http://www.macromedia.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash. Habe mich schon durch verschiedene Seiten gewühlt aber leider nichts gefunden, nicht zu letzt weil ich den Fachbegriff nicht  kenne. 

Es geht mir um die Leiste im oberen Drittel, bei der ich mit Mouse-over eine Spalte aufmache in der wieder Verlinkungen zu finden sind. 
Ist wahrscheinlich gar nicht so schwierig aber ich finde halt nichts.

Ich arbeite selber mit NOF 7.5. und Photoshop 7.

Vorab schon mal vielen Dank


----------



## mgd-one (20. Januar 2004)

Hallo,

das ist ja recht simpel, hier im Forum gibt es irgendwo ein Tutorial dazu, aber weil ich so net bin schreib ich es dir noch mal hier rein 

zunächst musst du eine JavaScript funktion schreiben:


```
<script type="text/javascript">
<!--

function show(divid) {
document.getElementById("cat1").style.display="none";
document.getElementById("cat2").style.display="none";

document.getElementById(divid).style.display="inline";

}
//-->
</script>
```

Danach musst du die Links einbauen


```
<a href="#" onMouseOver="show('cat1')">Category 1</a><br>
<div id="cat1" style="display:none">
<a href="#" class="sub">Sub 1</a><br>
<a href="#" class="sub">Sub 2</a><br>
<a href="#" class="sub">Sub 3</a><br>
</div><br>
<a href="#" onMouseOver="show('cat2')">Category 2</a><br>
<div id="cat2" style="display:none">
<a href="#" class="sub">Sub 1</a><br>
<a href="#" class="sub">Sub 2</a><br>
<a href="#" class="sub">Sub 3</a><br>
</div>
```

ich habe die Datei auch mal angehängt!

MfG mgd-one

P.S. NOF ist der schlechteste Editor den ich gesehen habe, benutz mal lieber Dreamweaver oder ähnlichen!


----------



## Paku (20. Januar 2004)

Hallo mgd-one, schon mal besten Dank.

Für Dich ist das Problem jetzt wahrscheinlich schon gelöst, für mich fängt es jetzt erst richtig an, da ich in Sachen Java Script etwas unterbelichtet bin (..und das ist wahrscheinlich noch geprahlt) muß ich noch ein zwei Fragen stellen:

Wo muß ich das Script einfügen? In eine entsprechende Grafik die ich mir gebastelt habe oder in einen NOF-Platzhalter (oder so was in der Richtung)!

Falls es Dir zu anstrengend wird, kannst Du ja eventuell den Link zum Tutorial legen.

Entschuldige bitte meine Unwissenheit, in der Zwischenzeit werde ich mal ein bißchen rumprobieren.


----------



## Camelion (20. Januar 2004)

Hallo,

wenn Du ein wenig Englisch beherrschst kann du auch die Shareware von Sothink: http://www.sothink.com namens DHTMLmenu benutzen. Damit kann man auch schöne Menüs in allen Formen Farben mit/ohne Bilder usw. erstellen.

Gruss
Camelion


----------



## RicRom (20. Januar 2004)

Hi und wie macht man das, dass sich wenn man auf den link geht sowas wie eine table ausfährt  ? So wie bei n24.de in etwa. Und dann noch eine Frage, wie macht man das, dass wenn man nicht mit dem Cursor auf einen der beiden links ist, beide wieder zusammenfahren, also wieder verschwinden. So wie das jetzt ist bleibt ja immer eins offen auch wenn man mit dem Cursor garnicht drauf ist.


----------



## mgd-one (20. Januar 2004)

du musst das dort einfügen wo du dein Menü haben willst. Den Code Kopieren bzw. abändern und in den quellcode von deiner Homepage einfügen. Normalerweise kommt die Funktion in den HTML Head also zwischen die beiden Tags <head> und </head> und der rest kommt einfach dort hin wo du ihn haben willst.

Und entschuldigen musst du dich nicht jeder hat mal angefangen 

MfG mgd-one


----------



## mgd-one (21. Januar 2004)

Da fällt mir ein im zusammenhang mit Anfängern nennt man gerne schon mal die HP http://www.selfhtml.net 

Also wenn du HTML wirklich lernen willst guck dir die Seite mal an

MfG mgd-one


----------



## Paku (21. Januar 2004)

Das waren ja jetzt schon mal viele Info`s mit den ich hoffentlich etwas anfangen kann, besonders der url scheint hilfreich zu sein, auch wenn ich dort zu genau meinem Problem noch nichts gefunden habe. Ich werde eben mal ein wenig rumsuchen und rumprobieren. 

Also noch mal besten Dank an mgd-one.


----------



## Fabian H (21. Januar 2004)

Und noch ein Beispiel:


```
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
        <title>onMouseOver Men&uuml;</title>

        <script type="text/javascript">
        var sActiveMenu = "";
        var aMenuStruct = new Array();

        aMenuStruct["Bla"] = new Array();
            aMenuStruct["Bla"]["Display"] = new Array("Link 1",   "Link 2",    "Link 3");
            aMenuStruct["Bla"]["Link"]    = new Array("bla.html", "test.html", "abc.html");

        aMenuStruct["Test"] = new Array();
            aMenuStruct["Test"]["Display"] = new Array("Test 1",   "Test 2",    "Test 3");
            aMenuStruct["Test"]["Link"]    = new Array("bla.html", "test.html", "abc.html");

        function closeMenu()
        {
            if (sActiveMenu != "") {
                window.document.getElementById("MoreLinks").innerHTML = "";
                sActiveMenu = "";

                return true;
            }

            return false;
        }

        function openMenu(a_sMenuName)
        {
            if (aMenuStruct[a_sMenuName] == undefined) {
                closeMenu();
                return false;
            }

            aNewDisplay = new Array();
            for (i=0; i<aMenuStruct[a_sMenuName]['Display'].length; i++) {
                aNewDisplay[i] = "<a href=\"" + aMenuStruct[a_sMenuName]['Link'][i]
                                  + "\">" + aMenuStruct[a_sMenuName]['Display'][i] + "</a>";
            }

            window.document.getElementById("MoreLinks").innerHTML = aNewDisplay.join(" | ");
            
            sActiveMenu = a_sMenuName;
        }
        </script>
    </head>
    <body>
        <h1>onMouseOver Men&uuml;</h1>
        <a href="home.html" onMouseOver="closeMenu();">Home</a> |
        <a href="bla.html"  onMouseOver="openMenu('Bla');">Bla</a> |
        <a href="test.html" onMouseOver="openMenu('Test');">Test</a>
        <br>
        <br>
        <span id="MoreLinks"></span>
    <body>
</html>
```

hth


----------

