CSS Vertikale Navigasiebalk
Vertikale navigasiebalk
Om 'n vertikale navigasiebalk te bou, kan jy die <a>-elemente binne die lys stileer, bykomend tot die kode van die vorige bladsy:
Voorbeeld
li a
{
display: block;
width: 60px;
}
Voorbeeld verduidelik:
display: block;- Deur die skakels as blokelemente te vertoon, maak die hele skakelarea klikbaar (nie net die teks nie), en dit stel ons in staat om die breedte (en opvulling, marge, hoogte, ens. te spesifiseer as jy wil)width: 60px;- Blokelemente neem die volle breedte by verstek beskikbaar. Ons wil 'n breedte van 60 pixels spesifiseer
Jy kan ook die breedte van <ul> stel, en die breedte van <a> verwyder, aangesien hulle die volle breedte sal opneem wat beskikbaar is wanneer dit as blokelemente vertoon word. Dit sal dieselfde resultaat as ons vorige voorbeeld lewer:
Voorbeeld
ul
{
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
}
li
a
{
display: block;
}
Vertikale navigasiebalk voorbeelde
Skep 'n basiese vertikale navigasiebalk met 'n grys 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;
width:
200px;
background-color: #f1f1f1;
}
li a {
display:
block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/*
Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
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;
color: white;
}
Sentrumskakels en voeg grense by
Voeg text-align:centerby <li> of <a> om die skakels te sentreer.
Voeg die bordereiendom by om <ul> by te voeg 'n rand om die navigasiebalk. As jy ook grense binne die navigasiebalk wil hê, voeg a border-bottomby alle <li>-elemente, behalwe vir die laaste een:
Voorbeeld
ul {
border: 1px solid #555;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}
Volle hoogte vaste vertikale navigasiebalk
Skep 'n volle hoogte, "taai" synavigasie:
Voorbeeld
ul {
list-style-type: none;
margin: 0;
padding: 0;
width:
25%;
background-color: #f1f1f1;
height: 100%; /* Full height */
position: fixed; /*
Make it stick, even on scroll */
overflow: auto; /* Enable scrolling if the sidenav has too much content */
}
Let wel: Hierdie voorbeeld werk dalk nie behoorlik op mobiele toestelle nie.