Tekst ruller

[Kvis]

Hej Kim
Jeg har lavet en hjemme side hvor nogle af siderne er blevet meget lange, og ville derfor sætte min menu fast i toppen, så ser jeg tilfældigt at det gør din side i index, men jeg kan ikke lige lurer hvordan man gør !!
Vil du hjælpe ??
mvh René

Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.71 Safari/537.36

[Kim Ludvigsen]

Hej René

Det kan gøres på flere forskellige måder. Hvis det er en menu, som blot skal have den samme størrelse hele tiden, kan det gøres meget nemt ved at placere den i en div-boks, som så får CSS-egenskaben position:fixed.

Min menu er lidt speciel, fordi jeg starter med at vise logo og menu, hvor det så ændres til kun at være en smal menu, når der rulles ned. Min løsning er meget gammel og var mægtig smart dengang - den er lavet med en menu med position:fixed, der ligger skjult bag logo og menu. Når der rulles, rulles logo og menu op, og den skjulte menu vises i stedet. I dag kan sådan en rulle op-menu laves meget bedre på anden vis.

[Kvis]

Hej Kim
Tak for dit svar !!

Når jeg ruller ned står min menu 4 cm. nede på siden og ruller over min tekst/billeder, jeg ville gerne at den var i top !! som din, du skriver menu gemt under menuen ?? se www.poseidon-egaa.dk
mvh René

[Kim Ludvigsen]

Hej René

Tak for linket, det gør det meget nemt at se, at du ikke kan bruge position:fixed i dette tilfælde. Enten skal du bruge min metode, hvor der ligger en ekstra menu skjult i baggrunden, eller du skal bruge en af de nyere metoder, der benytter JavaScript.

Min metode er ikke så nem, fordi du skal lave et billede, der er magen til toppen af din boks med Posidon, og bag det billede skal der så skjules en anden menu. Den skjules ved at benytte lagdeling, så den ligger under det nye billede, men over teksten længere nede på siden.

Det er noget nemmere med JavaScript, især hvis du benytter JQuery, der er et specielt JavaScript, der giver adgang til mange smarte funktioner. Men du vil være nødt til at grise fingrene lidt til med kode. Prøv at tjekke denne side:
http://jsfiddle.net/jpXjH/6/
Du kan se koden, og du kan se et eksempel nederst til højre. Det hele ruller indtil et bestemt element (Hello Guys) er i toppen, og så forbliver elementet i toppen i stedet for at blive rullet væk.

For at bruge JQuery, skal du have indsat lidt kode i headeren på dine sider. jeg er ikke så skrap til JavaScript, men jeg vil tro, at disse linjer vil virke til dit brug:
<script src='https://code.jquery.com/jquery-2.1.1.min.js'></script>
<script src='https://code.jquery.com/ui/1.11.1/jquery-ui.min.js'></script>
De skal indsættes lige over koden:
</head>

Ud over de linjer skal du bruge kode, som er angivet på ovenstående side. Du er velkommen til at spørge her, hvis du får problemer, men du er nok endnu bedre stillet ved at spørge i et forum om JavaScript - jeg er som nævnt ikke så skrap til det.

[NetKongen]

Hej Rene,

Har du selv udviklet din hjemmeside fra bunden eller bruger du et form for framework?

Jeg kan varmt anbfale dig at tage et kig på Bootstrap, som også har den her "sticky top-menu" som du leder efter. Menuen i bootstrap er selvfølgelig også responsive.

Du kan se den her: http://getbootstrap.com/examples/navbar-fixed-top/

Hvis du gerne vil bruge menuen, men ikke hele bootstrap, kan du blot nøjes med at hente css´en + lidt bootstrap filer til den uden alene

Bootstrap bruger også jquery som Kim beskriver...

Mvh.
NetKongen.

[Kvis]

Hej Netkonge og Kim

Jeg er helt klart ikke en ørn til programering og fatter ikke en bjælde af Jquery, jeg kan lige begå mig i komposer hvor jeg fik stor hjælp fra Kim i starten, og køb af Kims hæfte.

Mine hjemmesider er lavet på skabeloner, hentet på nette og en fra Kims bog/hjemmeside.

Jeg prøver at løse det på anden måde evt flytte menuen op så den altid er i top, hvis jeg ikke kan finde en løsning jeg fatter... :D :D

mvh René

[NetKongen]

Hej Rene,

Ok - hvis du ikke er vildt stærk i hjemmesider, koder osv - så kan bootstrap godt være lidt op ad bakke kan jeg godt se

Mvh.