Anzeige

mitlaufende Menüleiste

mitlaufende Menüleiste | PSD-Tutorials.de

Erstellt von Avoir, 28.09.2009.

  1. Avoir

    Avoir dein-Set.de by Campos Viola

    Dabei seit:
    20.07.2009
    Beiträge:
    126
    Geschlecht:
    männlich
    Ort:
    Munich
    Software:
    Adobe Cloud - Capture One
    Kameratyp:
    Nikon D800
    mitlaufende Menüleiste
    hallo kennt ihr mich noch?
    Ich habe ihr vor 2 Monaten mal gepostet da ich eine Sehr aufwändige Fläsch Seite programmieren wollt. Ihr sagtet, junge ohne jegliche Kenntnisse Wirt das nix! Also habe ich mir eine Schulungs DVD gekaut, so untern Motto jetzt bauen wir mal eine Webseite ^^
    Die Webseite von mir habe ich ohne Program geschrieben alles mit einen Editor ?SuperEdi? war anstrengen aber das kam dabei heraus;
    www.michaelgroen.de
    So da es sich um eine Photopag handelt habe ich mich entschlossen immer am Anfang ein großes Bild zu haben, das ist gewollt, man muss zwar immer runter scrollen aber das ist ok für mich. Ich habe auch das Menü oben nun verändert das es nimmer billig in einen grauen Kasten steht nun ist es nur unterstrichen und macht doch alles etwas lockerer? viele kennen glaub noch die ersten Anfänge meiner Seite?

    Zum Anliegen:
    Ich möchte ganz gerne dass das Menü sobald man nach unten scrollt immer oben am Fensterrand mit herunter kommt. Das wen man wieder ganz nach oben scrollt es wieder an seinen Ursprungs Ort kommt. Das Problem ist so, das auf dieser Seite Gallerie sehr fiele Bilder reinkommen und dann wer es doch pragtisch auch ohne weiteres zu zwitschen ohne erst wieder ganz nach oben zu scrollen.
    Also, wie stelle ich das an, das das Menü sich dynamisch mit bewegt?

    P.S.
    Wie ihr ja schon wist bin ich Legastheniker, habe dehn Text in Word korrigiert damit ihr ihn wenigstens ein wenig lesen könnt, glaube aber so ein oder zwei Schreibfehler noch drinne sind , so verzeiht mir dies.
     
    #1      
  2. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    mitlaufende Menüleiste
    AW: mitlaufende Menüleiste

    Das sieht ja schonmal ganz gut aus:)

    dem div #navigation musst du zusätzlich im css ein position: fixed; geben und per top: yy px; und left: xx px; positionieren.
    Damit das auch passend zum #main_container geschieht bekommt der die eigenschaft position: relative;
    Damit wäre das für die modernen Browser per css zu lösen, die älteren wie IE6 werden die leiste nicht 'fixed' darstellen. Musst du mal sehen, ob du für diese Spezialfälle ein javascript bemühst (oder es da eben so lässt).
     
    #2      
  3. kyle66

    kyle66 Guest

    mitlaufende Menüleiste
    AW: mitlaufende Menüleiste

    Unternehmensgründung schreibt man übrigens zusammen.
     
    #3      
  4. Avoir

    Avoir dein-Set.de by Campos Viola

    Dabei seit:
    20.07.2009
    Beiträge:
    126
    Geschlecht:
    männlich
    Ort:
    Munich
    Software:
    Adobe Cloud - Capture One
    Kameratyp:
    Nikon D800
    mitlaufende Menüleiste
    AW: mitlaufende Menüleiste

    Hi
    Danke für dehn hinweis Unternehmensgründung, ob ich das mit dem Lebenslauf so drin stehen lasse weis ich nicht, ich habe auch 4 Ausbildungen gemacht und sowie so ist mein Leben nicht grade Musterhaft. Naja aber ich habe es geändert Danke @kyle66.

    Ich habe überhabt keine Ahnung was ich wie und wo was reinschreiben muss *schäm*
    Das ist das was im CSS Steht:

    #main-container {
    width: 675px;
    margin: 40px auto 20px auto;
    }

    #navigation {
    clear: right;
    border: 1px solid #000;
    margin-top: 40px;
    margin-bottom: 1px;
    padding: 5px 10px 5px 0px;
    background: url("images/navi_bg0.png") bottom left repeat-x;
    }

    #navigation a {
    padding: 5px 10px;
    color: #ffffff;
    text-decoration: none;
    }

    #navigation a:hover {
    background: url("images/navi_bg1.png") bottom left repeat-x;
    }

    #navigation ul li {
    display: inline;
    }

    Und wo muss nun was hin?
    Helf mall bitte, muss das alles auch nur im screen.css geschrieben werden sondern auch in dehn *.php Dateien?

    Lg
    michael

    P.s.
    Meine statistig sagt (zeitfenster 7 Tage);

    Firefox 173x = 73,00 %
    Internet Explorer 55x = 23,21 %
    Opera 5x = 2,11 %
    Chrome 2x = 0,84 %
    Camino 1x = 0,42 %
    Safari 1x = 0,42 %

    Browser-Version ( Internet Explorer ):

    8.0 31x = 56,36 %
    6.0 13x = 23,64 %
    7.0 9 x = 16,36 %
    5.5 2 x = 3,64 %

    also 43,64% aller Internet Explorer besucher haben einen Älteren Explorer als 8.0 ^^ fieleicht solte man da eine lüsung vinden :rolleyes:
     
    #4      
  5. Avoir

    Avoir dein-Set.de by Campos Viola

    Dabei seit:
    20.07.2009
    Beiträge:
    126
    Geschlecht:
    männlich
    Ort:
    Munich
    Software:
    Adobe Cloud - Capture One
    Kameratyp:
    Nikon D800
    mitlaufende Menüleiste
    AW: mitlaufende Menüleiste

    kan mir jemand den nun helfen wie genau ich wo und was reinschreiben mus damit das mit dehm MEnü hinhaut?

    lg
     
    #5      
  6. SineTempore

    SineTempore Nicht mehr ganz neu hier

    Dabei seit:
    25.01.2007
    Beiträge:
    201
    Geschlecht:
    männlich
    mitlaufende Menüleiste
    AW: mitlaufende Menüleiste

    du willst doch, dass das menü am anfang, vorm scrollen unterm header ist und beim scrollen dann, sozusagen, oben hängen bleibt, oder?
    Das ist so allerdings mit CSS nicht machbar, da mit position: fixed der entsprechende div immer an der gleichen position zur links oberen bildschirmecke bleibt.
    => er wandert zwar mit, allerdings wandert er nicht zuerst nach oben und bleibt da hängen. er bleibt immer an der gleichen stelle.
    man könnte es wahrscheinlich mit JS lösen ... allerdings wüsste ich jetzt auch nicht wie :p
     
    #6      
  7. Avoir

    Avoir dein-Set.de by Campos Viola

    Dabei seit:
    20.07.2009
    Beiträge:
    126
    Geschlecht:
    männlich
    Ort:
    Munich
    Software:
    Adobe Cloud - Capture One
    Kameratyp:
    Nikon D800
    mitlaufende Menüleiste
    AW: mitlaufende Menüleiste

    JS also. oha... wirt auch alles komplexer... *gröbel*
     
    #7      
  8. Chriss1987

    Chriss1987 me.drinkCoffee();

    Dabei seit:
    26.03.2006
    Beiträge:
    378
    Geschlecht:
    männlich
    Ort:
    Kirchhundem
    Kameratyp:
    Canon EOS 400D
    mitlaufende Menüleiste
    AW: mitlaufende Menüleiste

    Hi,

    du kannst mit JS die Scrollposition abfragen, wenn diese z.B. einen Bestimmten Bereich überschreitet, ändert man das position-Attribut von relative auf fixed, so bleibt das Menü beim runterscrollen am oberen Rand kleben!;)

    (nen Beispiel kommt nachher evtl noch ;) )

    Schöne Grüße aus dem Sauerland!
    Chriss
     
    #8      
  9. Avoir

    Avoir dein-Set.de by Campos Viola

    Dabei seit:
    20.07.2009
    Beiträge:
    126
    Geschlecht:
    männlich
    Ort:
    Munich
    Software:
    Adobe Cloud - Capture One
    Kameratyp:
    Nikon D800
    mitlaufende Menüleiste
    AW: mitlaufende Menüleiste

    jau, beispiel und genaue anweisung wo ich was reinschreiben mus, ihr dürft nicht fergessen das es das erste mall ist das ich eine HP mache und 0.002% erfahrung habe ^^

    lg
     
    #9      
  10. SineTempore

    SineTempore Nicht mehr ganz neu hier

    Dabei seit:
    25.01.2007
    Beiträge:
    201
    Geschlecht:
    männlich
    mitlaufende Menüleiste
    #10      
  11. Avoir

    Avoir dein-Set.de by Campos Viola

    Dabei seit:
    20.07.2009
    Beiträge:
    126
    Geschlecht:
    männlich
    Ort:
    Munich
    Software:
    Adobe Cloud - Capture One
    Kameratyp:
    Nikon D800
    mitlaufende Menüleiste
    AW: mitlaufende Menüleiste

    ehm--- *rot-wert*

    jau danke zihe ich mir gleich mall rein ^^
     
    #11      
  12. Chriss1987

    Chriss1987 me.drinkCoffee();

    Dabei seit:
    26.03.2006
    Beiträge:
    378
    Geschlecht:
    männlich
    Ort:
    Kirchhundem
    Kameratyp:
    Canon EOS 400D
    mitlaufende Menüleiste
    AW: mitlaufende Menüleiste

    Hi,

    hab mal grad schnell ein Script zusammengebastelt:
    Code (Text):
    1.  
    2. // Quelle: http://www.signalwerk.de/web-code-library/javascript/scroll-position-ermitteln
    3. // ermittelt die aktuelle Scrollposition
    4. function get_scroll_position()
    5.     {
    6.         var scroll_x = 0, scroll_y = 0;
    7.         if (typeof( window.pageYOffset ) == 'number')
    8.             { // Netscape
    9.                 scroll_y = window.pageYOffset; scroll_x = window.pageXOffset;
    10.             }
    11.         else if (document.body && (document.body.scrollLeft || document.body.scrollTop))
    12.             { // DOM
    13.                 scroll_y = document.body.scrollTop; scroll_x = document.body.scrollLeft;
    14.             }
    15.         else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop))
    16.             { // IE6
    17.                 scroll_y = document.documentElement.scrollTop; scroll_x = document.documentElement.scrollLeft;
    18.             }
    19.         return scroll_y;
    20.     }
    21.  
    22. // prüft die Scrollposition des Fensters
    23. function position_fenster()
    24.     {
    25.         position = get_scroll_position();
    26.         // wenn die Scrollposition größer als die Position deiner Navigationsleise ist (hab mal grob gemessen, sollten 166px sein)
    27.         if (position > 166)
    28.             {
    29.                 // ändern des CSS-Atributes "position" auf "fixed"
    30.                 document.getElementById('navigation').style.position = "fixed";
    31.                 // bei den anderen beiden Attributen bin ich mir nicht sicher, funtionieren zwar, aber geben in der Fehlerkonsole einen Fehler zurück //// EDIT: Fehler gefunden: nicht "0" sondern "0px"
    32.                 document.getElementById('navigation').style.top = "0px";
    33.                 document.getElementById('navigation').style.marginTop = "0px";
    34.             }
    35.         // wenn die Scrollposition kleiner als die Position deiner Navigationsleise ist
    36.         else if (position <= 166)
    37.             {
    38.                 // ändern des CSS-Atributes "position" auf "relative"
    39.                 document.getElementById('navigation').style.position = "relative";
    40.                 // Standartwerte wieder herstellen (hier ist wieder ein Fehler dirn, siehe oben) //// EDIT: Fehler gefunden: nicht "0" sondern "0px"
    41.                 document.getElementById('navigation').style.top = "0px";
    42.                 document.getElementById('navigation').style.marginTop = "40px";
    43.             }
    44.     }
    45.  
    46. // Intervallstarten und die Funktion "position_fenster()" aufrufen (Intervallangabe in Millisekunden)
    47. var aktiv = window.setInterval("position_fenster()", 100);
    musst du nurnoch als .js-Datei speichern und im Head einbinden:
    HTML:
    1. <script type="text/javascript" src="test.js"></script>
    Hoffe, das hilft dir iwie weiter?

    Schöne Grüße aus dem Sauerland und gute Nacht!
    Chriss

    EDIT #3: Schau mal in deiner style.css in Zeile 196, da stimmt was nicht mit den öffnenden und schließenden geschweiften Klammern!

    EDIT #4: Wenn du die Breite der Menüleiste beibehalten möchtest, dann schreibe in der style.css die Weite der Navigation mit rein (width: 670px;)

    EDIT #5: deine css sollte dann so aussehen, dann gibt es auch keine Fehlermeldungen mehr:
    Code (Text):
    1. * {
    2.     margin: 0px;
    3.     padding: 0px;
    4. }
    5.  
    6. body {
    7.     font-family: "Trebuchet MS", "Bitstream Vera Sans", "Helvetica", sans-serif;
    8.     font-size: 10pt;
    9.     background: #000000 url("images/main_bg2.png") top center repeat-y;
    10.     color: white;
    11. }
    12.  
    13.  
    14.  
    15. a {
    16.     color: #1b65c8;
    17. }
    18.  
    19. a:hover {
    20.     color: #e41000;
    21. }
    22.  
    23. em  {
    24.     color: #e41000;
    25. }
    26.  
    27. hh  {
    28.     color: #007836;
    29. }
    30.  
    31. h1,h2,h3,h4,h5,h6 {
    32.     color: #e41000;
    33.     border-bottom: 1px dotted #e41000;
    34.     font-family: "Palatino Linotype", "Palatino", "URW Palladio L", serif;
    35.     margin-bottom: 5px;
    36. }
    37.  
    38. h1 { font-size: 180%; }
    39. h2 { font-size: 125%; }
    40. h3 { font-size: 100%; }
    41.  
    42. img {
    43.    
    44. }
    45.  
    46. p {
    47.     line-height: 140%;
    48.     text-align: justify;
    49.     margin-bottom: 15px;
    50. }
    51.  
    52. table thead th, table thead td {
    53.     background: #e3e3e3;
    54.     color: #000000;
    55.     text-align: left;
    56. }
    57.  
    58. table th, table td {
    59.     border-bottom: 1px solid black;
    60.     text-align: left;
    61.     padding: 2px 5px;
    62. }
    63.  
    64.  
    65. #main-container {
    66.     width: 675px;
    67.     margin: 40px auto 20px auto;
    68. }
    69.  
    70. #branding p {
    71.     font-size: 80%;
    72.     text-align: right;
    73.     float: right;
    74. }
    75.  
    76. #navigation {
    77.     clear: right;
    78.     border: 1px solid #000;
    79.     margin-top: 40px;
    80.     margin-bottom: 1px;
    81.     padding: 5px 10px 5px 0px;
    82.     background: url("images/navi_bg0.png") bottom left repeat-x;
    83.     width: 670px;
    84. }
    85.  
    86. #navigation a {
    87.     padding: 5px 10px;
    88.     color: #ffffff;
    89.     text-decoration: none;
    90. }
    91.  
    92. #navigation a:hover {
    93.     background: url("images/navi_bg1.png") bottom left repeat-x;
    94. }
    95.  
    96. #navigation ul li {
    97.     display: inline;
    98. }
    99.  
    100. #inhalt {
    101.     margin-top: 20px;
    102. }
    103.  
    104. #inhalt-haupt {
    105.     width: 420px;
    106.     float: left;
    107.     padding-right: 15px;
    108.     border-right: 1px dotted #999999;
    109.     margin-bottom: 10px;
    110. }
    111.  
    112. #inhalt-haupt2 {
    113.     width: 675px;
    114.     float: left;
    115.     padding-right: 15px;
    116.     margin-bottom: 10px;
    117. }
    118.  
    119. #inhalt-sub {
    120.     width: 225px;
    121.     float: right;
    122. }
    123.  
    124. #inhalt-haupt .portrait-foto {
    125.     float: left;
    126.     margin: 0px 10px 0px 0px;
    127.     padding: 5px;
    128.     border: 1px dotted #999999;
    129.  
    130. }
    131.  
    132. #inhalt-sub #navigation-sub ul li {
    133.     list-style-type: none;
    134.     list-style-image: url("images/li_image.png");
    135.     margin-left: 20px;
    136. }
    137.  
    138. #inhalt-sub #navigation-sub ul {
    139.     margin: 15px 0px;
    140. }
    141.  
    142. #navigation-sub img{
    143.    
    144.  
    145. float: left;
    146. margin: 5px 5px 5px 5px;   
    147.    
    148.    
    149.    
    150. }
    151.  
    152. #fusszeile {
    153.     clear: both;
    154.     border-top: 1px solid black;
    155.     padding-top: 10px;
    156. }
    157.  
    158. #fusszeile .bottom-right {
    159.     float: right;
    160. }
    161.  
    162. /* Galerie */
    163.  
    164.             #inhalt-haupt .galerie-foto {
    165.                 height: 90px;
    166.                 width: 117px;
    167.                 float: left;
    168.                 padding: 4px;
    169.                 margin: 5px;
    170.                 border: 1px solid #aaaaaa;
    171.                 background: #e3e3e3;
    172.             }
    173.  
    174.             #inhalt-haupt .galerie-foto img {
    175.                 border: 1px solid gray;
    176.             }
    177.  
    178.             #inhalt-haupt .galerie-foto a:hover img {
    179.                 border: 1px solid white;
    180.             }
    181.  
    182.             #inhalt-haupt table {
    183.                 width: 100%;
    184.             }
    185.             #inhalt-haupt table th,#inhalt-haupt table td {
    186.                 vertical-align: top;
    187.                 text-align: left;
    188.             }
    189.  
    190.             #inhalt-haupt input, #inhalt-haupt textarea {
    191.                 padding: 2px 2px 0px 2px;
    192.                 margin: 3px 3px 0px 3px;
    193.                 background: #e3e3e3;
    194.                 border: 1px solid #aaa;
    195.             }
    196.            
    197.             #inhalt-haupt table td {
    198.                 border: none;
    199.             }
    200.  
    201. /* ERROR & SUCCESS */
    202.  
    203.             .error {
    204.                 color: red;
    205.             }
    206.             .success {
    207.                 color: green;
    208.             }
    209.            
    210.  
    211.    
    212.  
     
    Zuletzt bearbeitet: 30.09.2009
    #12      
  13. Avoir

    Avoir dein-Set.de by Campos Viola

    Dabei seit:
    20.07.2009
    Beiträge:
    126
    Geschlecht:
    männlich
    Ort:
    Munich
    Software:
    Adobe Cloud - Capture One
    Kameratyp:
    Nikon D800
    mitlaufende Menüleiste
    AW: mitlaufende Menüleiste

    Ha hhaaa HHAAMMAA!!

    bist mein helt für heute arbend zu mindes ^^

    ich habe das mall online gestelt, es ferhält sich alerdings noch ein wenig komisch, schau selbs mal bitte^^

    höhe stimt nicht und es ferändert sich in der breite beim runter scrollen

    Michael Groen

    lg
    micha
     
    #13      
  14. Chriss1987

    Chriss1987 me.drinkCoffee();

    Dabei seit:
    26.03.2006
    Beiträge:
    378
    Geschlecht:
    männlich
    Ort:
    Kirchhundem
    Kameratyp:
    Canon EOS 400D
    mitlaufende Menüleiste
    AW: mitlaufende Menüleiste

    :p naja, habe den Code grade noch 5x editiert, nimm den neusten und dann passt das auch ;)

    Schöne Grüße aus dem Sauerland!
    Chriss

    Edit: siehste, jetzt passt die Position ;) Achja, die Breite in der CSS-Datei solltest du noch hinzufügen!;)

    Edit: (ja, ich weis, viele Edits, aber Doppelpost sind unschön ;) ) Du kannst einfach die CSS-Datei, die ich weiter oben gepostet hab kopieren, ist deine Originale, nur wurde die Breite hinzugefügt und ein Fehler mit den Klammern ausgebessert! Bei dem Javascript kannst du eigentlich die Kommentare (außer vielleicht die Quelle ganz oben) löschen!;)
     
    Zuletzt bearbeitet: 30.09.2009
    #14      
  15. Avoir

    Avoir dein-Set.de by Campos Viola

    Dabei seit:
    20.07.2009
    Beiträge:
    126
    Geschlecht:
    männlich
    Ort:
    Munich
    Software:
    Adobe Cloud - Capture One
    Kameratyp:
    Nikon D800
    mitlaufende Menüleiste
    AW: mitlaufende Menüleiste

    ja hamma,

    danke euch!!
    ich habe noch folgendes geändert:

    document.getElementById('navigation').style.top = "1px";
    document.getElementById('navigation').style.marginTop = "0px";


    und

    #navigation {
    clear: right;
    border: 1px solid #000;
    margin-top: 40px;
    margin-bottom: 1px;
    padding: 5px 10px 5px 0px;
    background: url("images/navi_bg0.png") bottom left repeat-x;
    width: 665px;


    es könte aber alerdings noch ein tick nach lings, nicht wah?
     
    #15      
  16. Avoir

    Avoir dein-Set.de by Campos Viola

    Dabei seit:
    20.07.2009
    Beiträge:
    126
    Geschlecht:
    männlich
    Ort:
    Munich
    Software:
    Adobe Cloud - Capture One
    Kameratyp:
    Nikon D800
    mitlaufende Menüleiste
    AW: mitlaufende Menüleiste

    hmm aufm localhoster sah es so aus, jetz past es mördermäzig!!!

    danke euch, endlich mall jemand der mir dieses kniflieges ding gelöst hat!

    so ist das doch auch wesenlich besser odeR?

    lg
    michael
     
    #16      
  17. SineTempore

    SineTempore Nicht mehr ganz neu hier

    Dabei seit:
    25.01.2007
    Beiträge:
    201
    Geschlecht:
    männlich
    mitlaufende Menüleiste
    AW: mitlaufende Menüleiste

    nimm in dem javascript als schwellwert mal 134. das müsste dann genau passen ;)
     
    #17      
  18. Avoir

    Avoir dein-Set.de by Campos Viola

    Dabei seit:
    20.07.2009
    Beiträge:
    126
    Geschlecht:
    männlich
    Ort:
    Munich
    Software:
    Adobe Cloud - Capture One
    Kameratyp:
    Nikon D800
    mitlaufende Menüleiste
    AW: mitlaufende Menüleiste

    ehm *dicke-Backen-machen*

    schwellwert *gröbel*
    ist es des:

    if (position <= 166)
    else if (position <= 166)


    oder des:

    var aktiv = window.setInterval("position_fenster()", 100);

    lg
    micha
     
    #18      
  19. SineTempore

    SineTempore Nicht mehr ganz neu hier

    Dabei seit:
    25.01.2007
    Beiträge:
    201
    Geschlecht:
    männlich
    mitlaufende Menüleiste
    AW: mitlaufende Menüleiste

    ersteres ;)
     
    #19      
  20. Chriss1987

    Chriss1987 me.drinkCoffee();

    Dabei seit:
    26.03.2006
    Beiträge:
    378
    Geschlecht:
    männlich
    Ort:
    Kirchhundem
    Kameratyp:
    Canon EOS 400D
    mitlaufende Menüleiste
    AW: mitlaufende Menüleiste

    Guten Morgen,

    was mir grad noch auffällt ist, dass wenn das Menü gefixed wird, der Content der Seite sich um die Höhe des Menüs nach oben verschiebt. Wenn du das verhindern möchtest, dann müsstest du nur einen Div vor das Menü setzten, mit Höhe 0px oder 1px und dieses Div, sobald das Menü "abgedockt" wird auf die Höhe des Menüs ändern.

    Schöne Grüße aus dem Sauerland!
    Chriss
     
    #20      
x
×
×