Navi-Leiste die mit Mouse-over aufgeht

Status
Nicht offen für weitere Antworten.
P

Paku

Grünschnabel
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
 
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:

PHP: 
<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

PHP: 
<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!
 

Anhänge

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.
 
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
 
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.
 
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
 
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.
 
Und noch ein Beispiel:

Code: 
<!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
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück