Anzeige

Brauche Hilfe bei (m)einer Navi...

Brauche Hilfe bei (m)einer Navi... | PSD-Tutorials.de

Erstellt von BlueThunder, 14.11.2005.

  1. BlueThunder

    BlueThunder Nicht mehr ganz neu hier

    Dabei seit:
    10.02.2005
    Beiträge:
    208
    Geschlecht:
    männlich
    Ort:
    Gelsenkirchen
    Software:
    PS | DW | ID | AI | FL | C4d
    Brauche Hilfe bei (m)einer Navi...
    Hallo @ All,

    da es total schwierig ist "Klapp-Navis", die sich nach oben öffnen zu finden, habe ich mir mit Hilfe dieser beiden
    Tutorials (Tut1&Tut2) eine Navi gebaut, welche nach oben hin "auf geht".

    Meine Navi (Den Code hänge ich an)

    Ich möchte allerdings, dass sie wieder verschwindet, wenn man diese "verläßt" :?
    Der Befehl onMouseout mag nicht so recht funktionieren, da man dann die Links, welche sich öffnen nicht
    anklicken kann Reiche ein Beispiel nach :cry:

    Weiß jemand von euch, wie man das macht?! Oder hat jemand einen Linktipp, wo ich eine solche Navi finde
    bzw. ein Tutorial?!

    Ich hoffe es kann jemand helfen. :roll:

    MfG BT

    & = Leerzeichen (zwischen den Links)

    Code (Text):
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    5. <title>Unbenanntes Dokument</title>
    6. <link rel="stylesheet" href="menu.css" type="text/css">
    7. <script type="text/JavaScript">
    8. <!--
    9. function MM_findObj(n, d) { //v4.01
    10.   var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    11.     d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
    12.   if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
    13.   for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
    14.   if(!x && d.getElementById) x=d.getElementById(n); return x;
    15. }
    16.  
    17. function MM_showHideLayers() { //v6.0
    18.   var i,p,v,obj,args=MM_showHideLayers.arguments;
    19.   for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    20.     if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    21.     obj.visibility=v; }
    22. }
    23. //-->
    24. </script>
    25. </head>
    26.  
    27. <body>
    28. <div id="Navigation">
    29. [url="#"]Industrie[/url] &&&
    30. [url="#"]People[/url] &&&
    31. [url="#"]Architektur[/url] &&&
    32. [url="#"]Food[/url] &&&
    33. [url="#"]Galerien[/url] </div>
    34.  
    35. <div id="Industrie">[url="#"]Werkzeug 1[/url]
    36.  
    37.   [url="#"]Werkzeug 2[/url]</div>
    38. <div id="People">[url="#"]Business[/url]
    39. [url="../images/people/musiker"]Musik[/url]
    40.  
    41.   [url="#"]Fashion[/url]
    42. [url="#"]Erotik[/url]</div>
    43. <div id="Architektur">[url="#"]Hyperlink 1[/url]
    44.  
    45.   [url="#"]Hyperlink 2[/url]</div>
    46. <div id="Food">[url="#"]Food 1[/url]
    47.  
    48.   [url="#"]Food 2[/url]</div>
    49. <div id="Galarien">[url="#"]Industriekultur 1[/url]
    50.  
    51.   [url="#"]Industriekultur 2[/url]
    52.  
    53.   [url="#"]Schottland[/url]</div>
    54. </body>
    55. </html>
    Und der CSS Code

    Code (Text):
    1. A:link {color : red; text-decoration: none;}
    2. A:visited {color : red; text-decoration: none;}
    3. A:hover {color: red; text-decoration: underline;}
    4. A:active { color: red; text-decoration:underline;}
    5.  
    6. #Navigation { font-family: Arial, Helvetica, sans-serif;
    7.               font-size: 12px;
    8.               font-weight: bold;
    9.               position:absolute;
    10.               left:50px;
    11.               top:100px;
    12.               width:290px;
    13.               height:20px;
    14.               z-index:1;
    15.               background-color: #000000;
    16.               layer-background-color: #000000;
    17.               border:1px none #ffffff;
    18.               padding-left:5px;
    19.               padding-top:2px;
    20.               padding-right:5px;
    21.               padding-bottom: 2px;
    22.               color:#FF0000;
    23. }
    24.  
    25. #Industrie { font-family: Arial, Helvetica, sans-serif;
    26.              font-size: 12px;
    27.              font-weight: bold;
    28.              position:absolute;
    29.              left: 50px;
    30.              top: 60px;
    31.              width:80px;
    32.              height:24px;
    33.              z-index:2;
    34.              background-color: #000000;
    35.              layer-background-color: #171617;
    36.              border: 1px; border-color:#FF0000;
    37.              visibility: hidden;
    38.              padding-left: 5px;
    39.              padding-top: 5px;
    40.              padding-right:5px;
    41.              padding-bottom: 5px;
    42.              color:#FF0000;
    43. }
    44.  
    45. #People { font-family: Arial, Helvetica, sans-serif;
    46.           font-size: 12px;
    47.           font-weight: bold;
    48.           position:absolute;
    49.           left: 115px;
    50.           top: 32px;
    51.           width:60px;
    52.           height:40px;
    53.           z-index:3;
    54.           background-color: #000000;
    55.           layer-background-color: #000000;
    56.           border: 1px none #000000;
    57.           visibility: hidden;
    58.           padding-left: 5px;
    59.           padding-top: 5px;
    60.           padding-right:5px;
    61.           padding-bottom: 5px;
    62.           color:#FF0000;         
    63. }
    64.  
    65. #Architektur { font-family: Arial, Helvetica, sans-serif;
    66.                font-size: 12px;
    67.                font-weight: bold;
    68.                position:absolute;
    69.                left: 169px;
    70.                top: 60px;
    71.                width:70px;
    72.                height:20px;
    73.                z-index:4;
    74.                background-color: #000000;
    75.                layer-background-color: #000000;
    76.                border: 1px none #000000;
    77.                visibility: hidden;
    78.                padding-left: 5px;
    79.                padding-top: 5px;
    80.                padding-right:5px;
    81.                padding-bottom: 5px;
    82.                color:#FF0000;
    83. }                
    84.                  
    85. #Food {
    86.         font-family: Arial, Helvetica, sans-serif;
    87.         font-size: 12px;
    88.         font-weight: bold;
    89.         position:absolute;
    90.         width:40px;
    91.         height:16px;
    92.         z-index:5;
    93.         top: 64px;
    94.         left: 248px;
    95.         visibility: hidden;
    96.         background-color: #000000;
    97.         layer-background-color: #000000;
    98.         border: 1px none #000000;
    99.         padding-left: 5px;
    100.         padding-top: 5px;
    101.         padding-right:5px;
    102.         padding-bottom: 5px;
    103.         color:#FF0000;
    104. }
    105.        
    106.        
    107. #Galarien {
    108.             font-family: Arial, Helvetica, sans-serif;
    109.             font-size: 12px;
    110.             font-weight: bold;
    111.             position:absolute;
    112.             width:96px;
    113.             height:26px;
    114.             z-index:6;
    115.             left: 290px;
    116.             top: 50px;
    117.             visibility: hidden;
    118.             background-color: #000000;
    119.             layer-background-color: #000000;
    120.             border: 1px none #000000;
    121.             padding-left: 5px;
    122.             padding-top: 5px;
    123.             padding-right:5px;
    124.             padding-bottom: 5px;
    125.             color:#FF0000;
    126. }
     
    #1      
  2. HoLgAy

    HoLgAy Nicht mehr ganz neu hier

    Dabei seit:
    12.03.2005
    Beiträge:
    58
    Geschlecht:
    männlich
    Ort:
    Aachen
    Brauche Hilfe bei (m)einer Navi...
    Hi,

    interessant, dass es so eine Navi gibt ;) Habe ich selbst noch nie gesehen ...könnte man aber verwenden :) hat irgendwie was... *g*

    Mal zu deinem Problem:
    Es ist ganz einfach, wenn du in deine Links auch noch einen onMouseOut effekt einbringst, der die gleiche Funktion aufruft jedoch überall mit dem 'hide'-Parameter. und zwar folgendermaßen:

    Code (Text):
    1.  
    2. [url="#"]Food[/url]
    3.  
    Dann sollte es funktionieren. Könnte man zwar noch schöner machen - aber das ist ne Menge Arbeit.

    Ich weiss nicht wieviel Ahnung du von Arrays in JavaScript hast. Weil du könntest die Bereiche auch in ein Array rein schreiben und dann als übergabeparameter der Funktion, die die den Bereich anzeigt nur noch den Array-Index oder den Namen des Bereiches nehmen.
    Naja - ist ja nur optional. Mit dem OnMouseOut-Effekt sollte dein Problem gelöst sein.
     
    #2      
  3. BlueThunder

    BlueThunder Nicht mehr ganz neu hier

    Dabei seit:
    10.02.2005
    Beiträge:
    208
    Geschlecht:
    männlich
    Ort:
    Gelsenkirchen
    Software:
    PS | DW | ID | AI | FL | C4d
    Brauche Hilfe bei (m)einer Navi...
    Hi!

    Erstmal Danke! Doch...

    Siehe Beispiel. Hover bei Food und versuche dann mal die Links, welche sich öffnen zu klicken. :roll:

    Genau das ist mein Problem :cry:

    Keine, habe es zwar mal mit C++ machen müssen, doch wirklich verstanden hab` ich es nicht :oops:

    Hast du sonst noch eine Lösung? HELP me :wink:

    Ja, ich glaube es gibt mehr Ferrari`s in meiner Stadt als diese Navi im Internet :lol:


    MfG BT
     
    #3      
  4. HoLgAy

    HoLgAy Nicht mehr ganz neu hier

    Dabei seit:
    12.03.2005
    Beiträge:
    58
    Geschlecht:
    männlich
    Ort:
    Aachen
    Brauche Hilfe bei (m)einer Navi...
    *mist* - da hätte ich ja auch selbst drauf kommen können ... *mir vor die Birne hau*
    Sorry für mein dann so sinnloses posting. :)

    Das Beispiel von mefisto sieht doch ganz vielversprechend aus. Versuche das doch mal - ich bin ja selbst auch nicht der, der so gerne JS auf den Seiten benutzt (wegen kann ausgeschaltet sein usw.)

    Ansonsten hätte ich jetzt auf anhieb keine Idee mehr, wie man es mit JS umsetzen kann ...
     
    #4      
  5. BlueThunder

    BlueThunder Nicht mehr ganz neu hier

    Dabei seit:
    10.02.2005
    Beiträge:
    208
    Geschlecht:
    männlich
    Ort:
    Gelsenkirchen
    Software:
    PS | DW | ID | AI | FL | C4d
    Brauche Hilfe bei (m)einer Navi...
    Dank dir, ich werd` es mal versuchen ;)


    Na, hast wenigstens ein paar Punkte bekommen :D Trotzdem Danke!!

    Ja, dass Problem hat man bei Flash ja auch (nicht jeder hat die Plugins installiert):? Bleibt eigentlich Jacke wie Hose, leider...

    Mir ist gerade etwas eingefallen, mal seh`n, ob es klappt. Ich könnte beim OnClick auf den Link die Layer ausblenden lassen, was meint ihr, sollte doch funzen, oder?! *mal an die Arbeit mach*

    Für weitere (Link)Tipps wär ich dankbar...

    MfG BT
     
    #5      
Seobility SEO Tool
x
×
×