CSS Horisontale Navigasiebalk
Horisontale navigasiebalk
Daar is twee maniere om 'n horisontale navigasiebalk te skep. Gebruik inlyn- of drywende lysitems.
Inlyn lysitems
Een manier om 'n horisontale navigasiebalk te bou, is om die <li>-elemente as inlyn te spesifiseer, bykomend tot die "standaard"-kode van die vorige bladsy:
Voorbeeld
li
{
display: inline;
}
Voorbeeld verduidelik:
display: inline;
- By verstek is <li>-elemente blokelemente. Hier verwyder ons die reëlbreuke voor en na elke lysitem om dit op een reël te vertoon
Swaailys-items
Nog 'n manier om 'n horisontale navigasiebalk te skep, is om die <li>-elemente te laat dryf, en 'n uitleg vir die navigasieskakels te spesifiseer:
Voorbeeld
li
{
float: left;
}
a
{
display: block;
padding: 8px;
background-color:
#dddddd;
}
Voorbeeld verduidelik:
float: left;
- Gebruik float om blokelemente langs mekaar te laat dryfdisplay: block;
- Laat ons toe om vulling te spesifiseer (en hoogte, breedte, kantlyne, ens. as jy wil)padding: 8px;
- Spesifiseer 'n mate van opvulling tussen elke <a>-element om hulle goed te laat lykbackground-color: #dddddd;
- Voeg 'n grys agtergrond-kleur by elke <a> element
Wenk: Voeg die agtergrondkleur by <ul> in plaas van elke <a>-element as jy 'n volle breedte agtergrondkleur wil hê:
Voorbeeld
ul
{
background-color: #dddddd;
}
Horisontale navigasiebalk voorbeelde
Skep 'n basiese horisontale navigasiebalk met 'n donker agtergrondkleur en verander die agtergrondkleur van die skakels wanneer die gebruiker die muis daaroor beweeg:
Voorbeeld
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow:
hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color:
#111;
}
Aktiewe/huidige navigasieskakel
Voeg 'n "aktiewe" klas by die huidige skakel om die gebruiker te laat weet op watter bladsy hy/sy is:
Voorbeeld
.active {
background-color: #04AA6D;
}
Regs-belyn skakels
Belyn skakels regs deur die lysitems na regs te laat dryf ( float:right;
):
Voorbeeld
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li style="float:right"><a
class="active" href="#about">About</a></li>
</ul>
Grensverdelers
Voeg die border-right
eiendom by <li> om skakelverdelers te skep:
Voorbeeld
/* Add a gray right border to all list items, except the last item
(last-child) */
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
Vaste navigasiebalk
Laat die navigasiebalk bo- of onderaan die bladsy bly, selfs wanneer die gebruiker die bladsy blaai:
Vaste Top
ul {
position: fixed;
top: 0;
width: 100%;
}
Vaste onderkant
ul {
position: fixed;
bottom: 0;
width: 100%;
}
Let wel: Vaste posisie sal dalk nie behoorlik op mobiele toestelle werk nie.
Grys horisontale navigasiebalk
'n Voorbeeld van 'n grys horisontale navigasiebalk met 'n dun grys rand:
Voorbeeld
ul {
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li a {
color:
#666;
}
Plakkerige navigasiebalk
Voeg position: sticky;
by <ul> om 'n taai navigasiebalk te skep.
'n Taai element wissel tussen relatief en vas, afhangende van die rolposisie. Dit word relatief geposisioneer totdat 'n gegewe offsetposisie in die viewport bereik word - dan "plak" dit in plek (soos posisie:vas).
Voorbeeld
ul {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
Let wel: Internet Explorer ondersteun nie taai posisionering nie. Safari vereis 'n -webkit- voorvoegsel (sien voorbeeld hierbo). top
Jy moet ook ten minste een van , right
, bottom
of spesifiseer left
vir taai posisionering om te werk.
Meer voorbeelde
Responsiewe Topnav
Hoe om CSS-medianavrae te gebruik om 'n responsiewe topnavigasie te skep.
Responsiewe Sidenav
Hoe om CSS-medianavrae te gebruik om 'n responsiewe synavigasie te skep.
Aftreklys Navbar
Hoe om 'n aftreklys in 'n navigasiebalk by te voeg.
Al ooit gehoor van W3Schools Spaces ? Hier kan jy jou webwerf van nuuts af skep of 'n sjabloon gebruik en dit gratis aanbied.
Begin gratis ❯* geen kredietkaart benodig nie