To učinkovito in močno tehniko je veliko lažje doseči, kot bi morda pričakovali.

V spletnem oblikovanju je lepljiva glava močno orodje, ki izboljša uporabniško izkušnjo in navigacijo. Ko se uporabniki pomaknejo navzdol po spletni strani, ostane lepljiva glava vidna, kar zagotavlja, da so bistvene navigacijske povezave vedno dostopne. Poglobimo se v zapletenost gradnje lepljive glave s pomočjo CSS.

Za kaj se uporablja lepljiva glava?

Lepljiva glava ostane na enem mestu na spletni strani, tudi ko se uporabnik pomika. Predvsem posebne lastnosti CSS položaj: lepljiv, vam bo pomagal doseči to vedenje. Nekatere prednosti lepljive glave vključujejo izboljšano uporabniško izkušnjo in enostavno navigacijo po spletnem mestu.

  • Uporabniki lahko preprosto dostopajo do glavnih navigacijskih povezav, ne da bi se pomaknili na vrh.
  • Logotip ali ime blagovne znamke ostane vidno, kar krepi identiteto blagovne znamke.
  • Lepljiva glava lahko prihrani prostor tako, da odstrani navigacijo stranske vrstice in pusti več prostora za vsebino.
instagram viewer

Oblikovanje glave: struktura HTML

Osnova vsake lepljive glave je njena struktura HTML. Tukaj je opisano, kako ustvarite potrebne elemente HTML za svojo lepljivo glavo.

<body>
<header>
<spanclass="logo">Company Logo 🏠span>
<nav>
<ul>
<li><ahref="#home">Homea>li>
<li><ahref="#about">Abouta>li>
<li><ahref="#services">Servicesa>li>
<li><ahref="#contact">Contacta>li>
ul>
nav>
header>
<mainid="home"><h1>Home pageh1>main>
<sectionid="about"><h1>Abouth1>section>
<sectionid="services"><h1>Servicesh1>section>
<sectionid="contact"><h1>Contacth1>section>
body>

Ta struktura uporablja glavo, ki vsebuje logotip in element navigacije z neurejenim seznamom navigacijskih povezav. Nato uporabi glavno oznako in več oznak odsekov za predstavitev vsakega odseka na strani. Trenutno stran izgleda takole:

Polaganje temeljev s CSS

Spodnja koda CSS uporablja lastnosti škatlastega modela kot so oblazinjenje, rob in flexbox, da ustvarite privlačen dizajn z višino za vsak odsek mesta.

@import url("https://fonts.googleapis.com/css2?family=Quicksand: wght@600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}


html { font-size: 62.5%; }


body { font-family: "Quicksand", sans-serif; }


main,
section { height: 100vh; }


.logo { font-size: 3rem; }


main,
header,
section {
display: flex;
align-items: center;
}


main { justify-content: center; }


header {
justify-content: space-between;
padding: 1rem 2rem;
background: #b2babb; 
}


navul {
display: flex;
column-gap: 2rem;
list-style: none;
}


a {
text-decoration: none;
font-size: 2rem;
color: #333;
}


section { justify-content: center; }


#home { background: #2c3e50; }


#about { background: #ccccff; }


#services { background: #f5b7b1; }


#contact { background: #40e0d0; }


h1 {
 font-size: 4rem;
 color: #fff;
}

Stran naj bi zdaj izgledala takole:

Implementacija lepljivega učinka: CSS

Trenutno, ko se pomaknete navzdol po strani, boste opazili, da se glava premakne z zaslona. Če želite to popraviti, uporabite lastnost položaja CSS in nastavite glavo na lepljivo.

Ta lastnost se obnaša kot kombinacija relativnega in fiksnega pozicioniranja, odvisno od uporabnikovega položaja drsenja.

header {
justify-content: space-between;
padding: 1rem 2rem;
position: sticky;
top: 0;
}

Nastavitev glave na lepljivo zagotavlja, da se prilepi na mesto na strani ne glede na drsenje. Lastnost top določa, kam na strani naj bo postavljena glava. Zdaj, ko se pomaknete navzdol po strani, dobite:

Reševanje morebitnih težav z zlaganjem

Včasih se lahko drugi elementi na strani prekrivajo z lepljivo glavo. Če želite zagotoviti, da glava ostane na vrhu, lahko dodate lastnost z-index:

header {
justify-content: space-between;
padding: 1rem 2rem;
position: sticky;
top: 0;
z-index: 9999;
}

Nazadnje dodajte lastnost gladkega drsenja elementu HTML za lepšo uporabniško izkušnjo:

html {
font-size: 62.5%;
scroll-behavior: smooth;
}

Stran bi se zdaj morala gladko premikati med razdelki:

Izboljšanje spletne navigacije z lepljivimi glavami CSS

Dodajanje lepljive glave oblikovanju vašega spletnega mesta lahko močno izboljša uporabniško izkušnjo. Ta funkcija ohranja uporabnike povezane z glavnim menijem, ohranja dosledno blagovno znamko in daje vašemu spletnemu mestu sodoben videz.

Z močjo CSS je ustvarjanje tega učinka preprosto in učinkovito. Trendi spletnega oblikovanja se sčasoma spreminjajo, vendar je lepljiva glava vedno uporabna za različne industrije.