Hvordan lage en flytende bar på CSS

November 17

Opprette en flytende bar er en metode for å holde innholdet i en fast posisjon på websiden. Du kan bruke en flytende bar for å holde en navigasjonsmeny hendig for de besøkende, eller du kan irritere dem med en annonse som blir værende på skjermen sin uansett hvor de bla på en lang side. Uavhengig av din motivasjon, er CSS-koden for å lage en flytende bar enkel og kan legges til nettstedet ditt på bare noen få minutter.

Bruksanvisning

1 Definer CSS flytende bar i <head> -delen av HTML-koden. Start med en <style> -taggen og definere en <div> for å holde den flytende bar:

<Style>
div.floating-bar
{
stilling: fast; bakgrunn: # 808080; border: 1px solid # 000000; bredde 100%; z-index: 100;
}

2 Gi medlemmer til <div> element og plassere baren på skjermen med koden:

div.floating-bar h3
{
display: block; margin: 0 0,5 em;
}
</ Style>

3 Sett flytende bar inn i <body> -delen av koden din og sette noen tekst i baren:

<Div class = "flytende-bar">
<H3> Floating Bar </ h3>
</ Div>

Hint

Denne koden skaper en flytende bar med teksten "Floating Bar." Opprett en meny ved å sette inn de riktige ankerkoder. Du kan også bruke feltet for å vise bilder, tekst eller en blanding av alle tre.
Innstilling av "z-index" til 100 holder bar vist på toppen av en annen side som en bruker ruller nedover siden.
Setting "posisjon: faste" holder baren på plass i forhold til brukerens skjerm for å skape en flytende effekt.